/* ==============================================
   Responsve stylesheet
   ============================================== */
/* =======================
   @screen: MD
   =======================*/
@media (min-width: 992px) and (max-width: 1199px) {
    .page-container {
        border-left: 0;
        border-right: 0;
        width: 100%;
    }

    /* =======================
       @section: top slide
       =======================*/
    .top-logo-container {
        top: 40%;
        left: 28%;
    }

    /* =======================
       @section: map
       =======================*/
    .map-content {
        top: 150px;
        left: 20%;
        width: 60%;
    }

    /* =======================
       @section: food culture
       =======================*/
    .food-culture-content {
        top: 38%;
    }

     /* =======================
       @section: service
       =======================*/
    .service-container {
        padding: 50px 60px;
    }

    .service-description {
        margin-bottom: 50px;
    }

    .service-grid {
        margin: 40px auto 0 auto;
        max-width: 860px;
    }

    .service-item,
    .service-item:lang(fr) {
        margin-left: 70px;
        width: 240px;
    }

    .service-item:first-child {
        margin-left: 0;
    }

    /* =======================
       @section: entertaiment
       =======================*/
    .entertaiment-container {
        padding: 40px 60px;
    }
    
    /* =======================
       @section: company
       =======================*/
    .company-info-container {
        padding: 40px 60px;
    }

    .company-info-panel {
        padding: 30px;
        width: 872px;
    }

    .company-info-panel-left {
        margin-right: 35px;
    }
    
    /* =======================
       @section: footer
       =======================*/
    .footer {
        padding: 40px 0 70px 0;
    }

    .go-to-top {
        right: 20px;
        bottom: 20px;
    }
}

/* =======================
   @screen: SM
   =======================*/
@media (min-width: 768px) and (max-width: 991px) {
    .page-container {
        border-left: 0;
        border-right: 0;
        width: 100%;
    }

    /* =======================
       @section: top slide
       =======================*/
    .top-logo-container {
        top: 40%;
        left: 25%;
    }

    .top-logo-container img {
        max-width: 450px;
    }

    /* =======================
       @section: map
       =======================*/
    .map-around-wrapper {
        height: 400px;
    }

    .map-content {
        top: 150px;
        left: 10%;
        width: 80%;
    }

    .map-title {
        font-size: 30px;
    }

    .map-title span {
        font-size: 22px;
    }

    .map-description {
        font-size: 16px;
    }

    /* =======================
       @section: food culture
       =======================*/
    .food-culture-content {
        top: 38%;
    }

    .food-culture-description {
        width: 90%;
        font-size: 16px;
        line-height: 1.7;
    }

    /* =======================
       @section: service
       =======================*/
    .service-container {
        padding: 30px 40px;
    }

    .service-description {
        margin-bottom: 40px;
    }

    .service-grid {
        width: 100%;
    }

    .service-item,
    .service-item:lang(fr) {
        width: 28%;
        margin-left: 8%;
    }

    .service-item:first-child {
        margin-left: 0;
    }

    .service-item-title {
        font-size: 16px;
    }

    .service-item-description {
        font-size: 14px;
    }

    /* =======================
       @section: entertaiment
       =======================*/
    .entertaiment-container {
        padding: 30px 40px 40px 40px;
    }

    .entertaiment-description {
        padding: 0 10%;
    }

    .video-container {
        width: 100%;
        padding: 0 10%;
    }

    .video-container iframe {
        width: 100%;
        height: 350px;
    }

    .entertaiment-slider-container {
        width: 100%;
        padding: 0 10%;
    }

    .entertaiment-slider .swiper-slide {
        max-width: 240px;
    }

    .entertaiment-slide-title {
        font-size: 13px;
    }

    .btn-control-entertaiment-slide {
        top: 22%;
    }

    .btn-next-entertaiment-slide {
        right: 0;
    }

    .btn-prev-entertaiment-slide {
        left: 0;
    }

    /* =======================
       @section: company info
       =======================*/
    .company-info-container {
        padding: 30px 40px;
    }

    .company-info-title {
        margin-bottom: 30px;
    }

    .company-info-panel {
        width: 100%;
        padding: 30px;
    }

    .company-info-panel-left {
        width: 49%;
        margin-right: 5%;
    }

     .company-info-panel-right {
        width: 46%;
     }

     .company-info-panel-description {
        font-size: 15px;
     }

     .btn-download-document {
        width: 100%;
        font-size: 15px;
        height: 50px;
        line-height: 50px;
    }
    
     /* =======================
       @section: footer
       =======================*/
    .footer {
        padding: 30px 0 40px 0;
    }

    .go-to-top {
        right: 20px;
        bottom: 20px;
    }
}

/* =======================
   @screen: XS
   =======================*/
@media (max-width: 767px) {
    .page-container {
        border-left: 0;
        border-right: 0;
        width: 100%;
    }
    
     /* =======================
       @section: top slide
       =======================*/
    .top-language-container {
        right: 10px;
    }

    .top-language-container .btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    .top-language-container:lang(zh-Hant) .btn,
    .top-language-container:lang(zh-Hans) .btn {
        padding: 5px 4px 5px 5px;
        font-size: 11px;
    }

    .top-language-container:lang(fr) .btn {
        font-size: 11px;
        padding: 5px 7px;
    }

    .bootstrap-select.btn-group .dropdown-toggle .caret:lang(zh-Hant),
    .bootstrap-select.btn-group .dropdown-toggle .caret:lang(zh-Hans) {
        right: 7px;
    }

    .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 90px;
    }

    .dropdown-menu {
        font-size: 12px;
    }

    .dropdown-menu > li > a {
        padding: 3px 12px;
    }

    .top-logo-container {
        top: 40%;
        left: 10%;
        width: 80%;
    }

     /* =======================
       @section: map
       =======================*/
    .map-around-wrapper {
        height: 300px;
    }

    .map-content {
        top: 55px;
        left: 10%;
        width: 80%;
    }

    .map-content:lang(fr) {
        width: 85%;
        left: 7%;
    }

    .map-title {
        font-size: 16px;
    }

    .map-title:lang(en) {
        font-size: 15px;
        margin: 0 0 10px 0;
    }

    .map-title:lang(fr) {
        font-size: 14px;
        margin: 0 0 10px 0;
    }

    .map-title:lang(de) {
        font-size: 13px;
        margin: 0 0 10px 0;
    }

    .map-title span {
        font-size: 13px;
    }

    .map-description {
        font-size: 14px;
    }

    .map-description:lang(en) {
        font-size: 13px;
    }

    .map-description:lang(fr),
    .map-description:lang(de) {
        font-size: 12px;
    }

    /* =======================
       @section: food culture
       =======================*/
    .food-culture-title {
        font-size: 16px;
    }

    .food-culture-title:lang(en),
    .food-culture-title:lang(th) {
        font-size: 14px;
        margin: 0 auto 5px auto;
    }
    
    .food-culture-title:lang(de),
    .food-culture-title:lang(fr) {
        font-size: 13px;
        margin: 0 auto 5px auto;
    }

    .food-culture-content {
        top: 10%;
    }

    .food-culture-content:lang(th) {
        top: 7%;
    }

    .food-culture-description {
        font-size: 14px;
        width: 95%;
        line-height: 1.4;
    }

    .food-culture-description:lang(en),
    .food-culture-description:lang(fr),
    .food-culture-description:lang(de),
    .food-culture-description:lang(th) {
        font-size: 12px;
    }

    /* =======================
       @section: service
       =======================*/
    .service-container {
        padding: 20px;
    }

    .service-logo {
        width: 100%;
        height: auto;
    }

    .service-description {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .service-description:lang(en),
    .service-description:lang(de),
    .service-description:lang(fr) {
        font-size: 14px;
    }

    .service-title {
        font-size: 20px;
    }

    .service-title:lang(fr),
    .service-title:lang(de) {
        font-size: 18px;
    }

    .service-title:before, .service-title:after {
        width: 65px;
    }

    .service-title:lang(de):before, .service-title:lang(de):after, 
    .service-title:lang(fr):before, .service-title:lang(fr):after {
        width: 60px;
    }

    .service-grid {
        margin-top: 0;
        width: 100%;
        text-align: center;
    }

    .service-item,
    .service-item:lang(fr) {
        float: none;
        width: 240px;
        margin: 30px auto 0 auto;
    }

    .service-item:first-child {
        margin-left: auto;
    }

    .service-item-title {
        font-size: 18px;
        margin: 20px 0 10px 0;
    }

    .service-item-title:lang(en),
    .service-item-title:lang(de) {
        font-size: 16px;
    }

    .service-item-description {
        line-height: 1.5;
    }

    .service-item-description:lang(en),
    .service-item-description:lang(de) {
        font-size: 14px;
    }

    /* =======================
       @section: entertaiment
       =======================*/
    .entertaiment-container {
        padding: 20px;
        overflow: hidden;
    }

    .entertaiment-title {
        font-size: 20px;
    }

    .entertaiment-title:before, .entertaiment-title:after {
        width: 50px;
    }

    .entertaiment-description {
        margin: 20px 0 30px 0;
        padding: 0;
    }

    .entertaiment-description:lang(en),
    .entertaiment-description:lang(de),
    .entertaiment-description:lang(fr) {
        font-size: 14px;
        margin: 20px 0 30px 0;
        padding: 0;
    }

    .video-container {
        width: 100%;
    }

    .video-container iframe {
        width: 100%;
        height: 250px;
    }

    .entertaiment-slider-container {
        max-width: 100%;
    }

    .entertaiment-slider .swiper-slide {
        max-width: 240px;
    }

    .btn-control-entertaiment-slide img {
        width: 40px;
        height: 40px;
    }

    .btn-play-video-slide {
        display: inline-block;
    }

    .video-slide-image {
        margin: 0 auto;
        width: 100%;
        height: auto;
    }



    .btn-next-entertaiment-slide {
        right: -14px;
    }

    .btn-prev-entertaiment-slide {
        left: -14px;
    }

    .entertaiment-slide-title {
        font-size: 14px;
    }
    
    /* =======================
       @section: entertaiment
       =======================*/
    .company-info-container {
        padding: 20px 20px 30px 20px;
    }

    .company-info-title,
    .company-info-title:lang(en) {
        font-size: 20px;
        margin-bottom: 25px;
        line-height: 1.4;
    }

    .company-info-panel {
        width: 100%;
        padding: 20px;
    }

    .company-info-panel-left {
        width: 100%;
        margin-right: 0;
    }

    .company-info-panel-right {
        width: 100%;
        margin-top: 20px;
    }

    .btn-download-document {
        width: 100%;
        height: 50px;
        line-height: 50px;
    }

    .company-info-panel-description {
        font-size: 14px;
        line-height: 1.5;
    }

    .footer {
        padding: 20px 10px 40px 10px;
    }

    .go-to-top {
        right: 10px;
        bottom: 10px;
    }

    .go-to-top p {
        display: none;
    }
}