@media (min-width:320px) and (max-width:767px){
    .container{ padding: 0 15px;}
    header{ background: #fff; align-items: normal; box-shadow: 0 4px 8px 0 rgba(138, 107, 118, 0.08);}
    header.homeHeader{ align-items: normal;}
    header.homeHeader .logo{ width: 90px; height: 46px; background: url(../images/fch-logo.png) 0 0 no-repeat; display: inline-flex; background-size:contain;} 
    .logo{ width: 90px; height: 46px; background: url(../images/fch-logo.png) 0 0 no-repeat; display: inline-flex; background-size:contain;}
    header.homeHeader .headerLeft{ padding: 5px 5px 0 10px; align-items: center;}
    .headerLeft{ padding: 5px 5px 0 10px;}
    .btnGetInTouch{ padding: 0 10px; font-size: 12px;}
    .menuBtn{ padding: 0 10px; font-size: 12px;}
    .navBar{ margin-right: 10px;}
    .owl-carousel{ margin-top: 59px;}
    .slideDetails{ padding: 0 20px;}
    .homeContentOuter{ padding: 0;}

    .topNav{ display: none;}
    .rightNav{ top: 59px; width: 320px;}
    .rightNav ul{ padding: 20px 0 0 0;}
    .headerLeft h1{ margin-right: 0;}

    

    .slideDetails h3{ font-size: 18px; line-height: 22px; padding: 10px 0;}
    .slideDetails h3::after{ content: none;}
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{ width: 15px; height: 15px; transform: scale(0.6);}
    .homeContent{ margin-bottom: 30px;}
    .homeContentLeft{ width: 100%; margin-top: 15px; border-radius: 6px; padding: 15px;}
    .homeContentLeft p{ font-size: 14px; line-height: 24px; margin-bottom: 30px; font-family: 'gothamlight';}
    .homeContentRight{ border-radius: 0 0 10px 0; display: none;}
    .contentList{ flex-wrap: wrap; flex-direction: column;}
    .contentList > li{ width: auto; flex: 1; margin: 0 0 30px 0;}
    .contentList > li h4{ font-size: 22px; line-height: 28px; margin-bottom: 10px;}
    .contentList > li p{ font-size: 16px; line-height: 26px; font-family: 'gothamlight'; margin-bottom: 30px;}
    .ourValues{ font-family: 'gothamlight'; font-size: 16px; line-height: 26px;}
    .ourValues li{ margin-bottom: 15px;}
    .learnMore{ width: 100%; height: 48px; font-size: 16px; border-width: 2px;}

    .bannerCont{ margin-top: 59px; padding: 30px 0;}
    .bannerCont .headerTitle{ font-size: 30px; line-height: 38px; margin-bottom: 20px;}
    .bannerCont .headerSubTitle{ font-size: 14px; line-height: 26px;}
    .mainTitle{ font-size: 16px; line-height: 20px; margin-bottom: 10px;}

    .servicesCont{ padding: 30px 0;}
    .serviceList{ flex-wrap: wrap; padding: 20px 0;}
    .serviceList li{ width: 250px; margin: 0 10px 20px 10px;}
    .serviceList li .serviceDesc h5{ font-size: 14px; line-height: 18px;}
    .btnServiceDetails{ width: 30px; height: 30px;}
    .serviceList.mBottom130{ margin-bottom: 0;}
    .hotelList{ justify-content: center; align-items: center; flex-direction: column;}
    .serviceList li .serviceDesc{ padding:10px 0;}
    .hotelList > li{ flex: 1; width: 295px; min-height: auto; margin: 0 0 30px 0; flex-direction: column;}
    .htlImage{ width: 100%;}
    .htlDetails{ padding: 15px;}
    .teamMember{ padding-top: 30px;}
    .teamMember li{ width: 40%; margin: 0 14px 30px 14px;}
    .memberThumb{ width: 90px; height: 90px; margin-bottom: 15px;}
    .memberName{ font-size: 16px; line-height: 20px;}
    .memberTitle{ font-size: 14px; line-height: 18px;}
    .mainTitle span::after, .mainTitle span::before{ width: 0;}
    .mainTitle span::before{ left:-110px;}
    .mainTitle span::after{ right:-110px;}

    .whyConsiderFCH{ column-count: 1; column-gap: 0;}
    .whyConsiderFCH li{ margin-bottom: 20px; padding-left: 26px;}
    .whyConsiderFCH li h6{ font-size: 14px; line-height: 18px; margin-bottom: 10px;}
    .whyConsiderFCH li p{ font-size: 14px; margin-bottom: 10px;}

    .serviceDetails{ width: 250px;}
    .popImg{ height: 130px;}
    .serviceDetailsContent{ padding: 0;}
    .serviceDetails h6{ font-size: 16px; margin-bottom: 15px;}
    .serviceDetails p{ font-size: 14px; line-height: 22px; margin-bottom: 15px;}
    .btnServiceClose{ width: 30px;}

    .ourStory p{ font-size: 14px; line-height: 24px; margin-bottom: 20px;}
    .valuableAssets{ font-size: 14px; line-height: 24px; padding: 15px; margin-bottom: 30px;}
    .crp{ font-size: 14px; line-height: 24px; margin-bottom: 30px;}
    .crpList{ flex-wrap: wrap; flex-direction: column;}
    .crpListCol h4{ font-size: 18px; line-height: 22px; margin-bottom: 10px;}
    .crpListCol h5{ font-size: 14px; line-height: 18px; margin-bottom: 20px;}
    .crpListCol ul li{ font-size: 13px; line-height: 15px; margin-bottom: 15px; padding-left: 20px;}
    .crpListCol:first-child{ padding-right: 0; padding-bottom: 15px;}
    .crpListCol:last-child{ padding-left: 0; border-left: 0; border-top: 1px #e0e5e8 solid; padding-top: 15px;}
    .crpListCol ul li::before{ width: 10px; height: 10px; top: 4px;}

    .loadedCont{ flex-direction: row; flex-wrap: wrap; max-height: 500px; overflow-y: auto;}
    .bioPopupLeft{ width: 100%; float: left; padding: 10px;}
    .bioPopupLeft img{ width: 100%;}
    .bioPopupRight{ padding: 15px; flex: 1; width: 100%;}
    .bioTop{ flex-direction: column; align-items: flex-start; margin-bottom: 20px;}
    .bioTop > div{ flex: 1; width: 100%;}
    .bioTop h4{ font-size: 18px; line-height: 24px;}
    .bioTop h5{ font-size: 14px; line-height: 18px;}
    .bioTop h6{ font-size: 14px; line-height: 20px;}
    .emailBtn{ flex: 1; width: 100%; height: auto; padding: 10px; font-size: 14px; border-width: 2px; margin-top: 20px;}
    .bioContent{ max-height: none;}
    .bioPopupRight p{ font-size: 14px; line-height: 22px; margin-bottom: 15px;}
    .btnPopClose{ width: 30px; height: 30px; right: -10px; top: -10px;}

    .successList li{ width: 300px; margin: 0 10px 20px 10px;}
    .csCont a{ font-size: 16px;}
    .csCont h5{ font-size: 18px;}
    .csCont h6{ font-size: 14px;}
    .csCont p{ font-size: 14px; line-height: 22px; margin-bottom: 20px;}
    .successList{ margin-bottom: 30px;}
    .hotelAwards{ flex-wrap: wrap; flex-direction: column;}
    .hotelAwardsCol{ width: 100%;}
    .hotelAwardsCol h4{ font-size: 14px; margin-bottom: 10px;}
    .hotelAwardsCol ul{ margin-bottom: 20px; font-size: 13px;}
    .hotelAwardsCol ul li{ margin-bottom: 10px;}
    .taCertificate{ margin: 30px 0;}
    .taCertificate h3{ font-size: 18px; line-height: 26px;}
    .taCertificate p{ font-size: 14px; line-height: 20px;}

    .applyFor{ font-size: 14px; top: 50px; right: auto; left: 0; width: auto; text-align: center; display: block; left: 50%; transform: translateX(-50%); white-space: nowrap;}
    .txFilterJob{ margin-top: 70px; padding-left: 0;}
    .filterJobs{ flex-wrap: wrap;}
    .filterJobsCol{ width: 100%; flex: none; margin: 0 0 10px 0;}
    .filterJobsCol select{ font-size: 14px; height: 46px; padding: 10px; background-size: 10px; background-position: 95% 20px;}
    .filterJobsCol .btnSearch{ height: 46px; font-size: 16px;}
    .searchedJobs .container{ display: flex; flex-direction: column; white-space: nowrap; overflow-x: auto;}
    .jobRow{ white-space: normal; flex: 1; padding: 0; border-bottom: 0;}
    .jobRow .jobCol{ padding-right: 15px; width: 200px; flex: none !important; padding: 30px 0; border-bottom: 1px #e3e8eb solid;}
    .jobRow .jobCol h5{ font-size: 14px; line-height: 16px; margin-bottom: 5px;}
    .jobRow .jobCol p{ font-size: 13px; line-height: 18px;}

    .btnCloseForm{ width: 30px; height: 30px;}
    .applicationFormInner{ padding: 15px; padding-top: 40px;}
    .applicationFormInner h3{ font-size: 22px; line-height: 26px;}
    .applicationTab{ margin-top: 30px; margin-bottom: 30px; flex-wrap: wrap; flex-direction: column;}
    .applicationTab li{ display: flex; flex: 1; margin-right: 0; margin-bottom: 15px;}
    .applicationTab li a{ font-size: 16px;}
    .applicationTab li a.active::after{ bottom: -5px;}
    .txtInput{ padding: 10px 15px; font-size: 14px;}
    .frmLabel{ margin-bottom: 5px; font-size: 14px;}
    .frmRow{ margin-bottom: 0; flex-wrap: wrap; flex-direction: column;}
    .frmRow .frmCol{ margin-bottom: 15px;}
    .radioList{ flex-wrap: wrap; align-items: flex-start;}
    .radioList li{ font-size: 14px; width: 50%; margin: 0 0 15px 0;}
    .btnAddLanguage{ width: 56px; height: 42px; font-size: 30px;}
    .applicationFormInner h5{ font-size: 16px; margin-bottom: 20px;}
    .selectBox{ background-position: 90% 20px; padding: 10px; font-size: 14px; background-size: 10px;}
    .txtArea{ height: 43px;}
    .btnNext, .btnPrev{ margin-top: 30px; width: auto; height: auto; padding: 10px 30px;}

    .portfolioTab li{ font-size: 16px; margin: 0 15px;}
    .htlDetails h4{ font-size: 18px; margin-bottom: 10px;}
    .rooms h6{ font-size: 26px; line-height: 28px;}
    .rooms p{ font-size: 14px;}
    .rooms{ margin-bottom: 20px;}
    .htlDetails .visit li{ font-size: 14px;}
    .htlDetails h5{ font-size: 14px;}
    .hotelList .viewDetails{ font-size: 16px;}

    .bannerCont.portfolio{ padding: 30px 0 130px 0 !important;}
    .bannerCont.success{ padding: 30px 0 130px 0 !important;}

    
    .footerTop{ flex-direction: column; align-items: flex-start; flex-wrap: wrap; padding: 15px;}
    .footerBottom{ display: none;}
    .fooLeft{ flex: 1; width: 100%; margin-bottom: 30px; flex-direction: column; align-items: center; justify-content: center;}
    .logoCont{ margin-right: 0; margin-bottom: 15px;}
    .addressCont{ padding-left: 0; padding-top:15px; border-left: 0; border-top: 1px #305268 solid; text-align: center; }
    .fooRight{ flex: 1; width: 100%; border-radius: 6px;}
    .contactRow{ flex-direction: column;}
    .contactRow a:first-child{ border-right: 0;}
    .contactRow a{ border-bottom: 1px #35556d solid;}
    .contactRow a:last-child{ padding-left: 0;}
    .contactRow:last-child a:last-child{ border-bottom: 0; padding-bottom: 0;}
    
    .headerTitle.contact{ margin-bottom: 0;}
    .contactOuter{ padding: 30px 15px;}

    .awardWining{ width: 90%; padding: 15px;}
    .awardWining h3{ font-size: 26px; margin-bottom: 0;}
    .awardWining h4{ font-size: 18px; line-height: 22px; margin-bottom: 50px;}
    .awardWining p{ font-size: 16px; line-height: 20px; margin-bottom: 20px;}
    .btnAwardClose{ width: 30px; top: -10px; right: -10px;}

    .previousManagedList{ flex-wrap: wrap;}
    .previousManagedListCol{ width: 100%; margin: 0;}
    .previousHotelList > li{ padding: 15px; flex-wrap: wrap; flex-direction: column;}
    .htlLogoCont{ width: 100%; margin-right: 0; margin-bottom: 20px; justify-content: flex-start;}
    .phRoomRow h4{font-size: 18px; margin-bottom: 10px;}
    .phRooms h6{ font-size: 26px; line-height: 28px;}
    .hotelTabContOuter{ margin-bottom: 0;}

    .bioPopup{ position: absolute; top: 50px; transform: translateX(-50%);}
}


@media (min-width:768px) and (max-width:1024px){
    .container{ padding: 0 30px;}
    header{ background: #fff; align-items: normal;}
    header.homeHeader{ align-items: normal;}
    header.homeHeader .logo{ width: 131px; height: 62px; background: url(../images/fch-logo.png) 0 0 no-repeat; display: inline-flex; background-size:contain;} 
    .logo{ width: 131px; height: 62px; background: url(../images/fch-logo.png) 0 0 no-repeat; display: inline-flex; background-size:contain;}
    header.homeHeader .headerLeft{ padding: 0 20px 0 25px; align-items: center;}
    .headerLeft{ padding: 0 20px 0 25px;}
    .btnGetInTouch{ padding: 25px;}
    .menuBtn{ padding: 25px;}

    .topNav{ width: 348px; height: 100vh; right: 0; top: 78px; background: #fff; position: absolute; display: none;}
    .topNav ul{ flex-direction: column; padding: 30px 0 0 0;}
    .topNav ul li{ margin-right: 0; margin-bottom: 20px;}
    header.homeHeader .topNav ul li a{ color: #4A4A4A;}
    .rightNav{ top: 78px;}

    .slideItem{  min-height: 450px;}
    .slideDetails h3{ font-size: 48px; line-height: 50px;}
    .homeContentLeft{ width: 350px; margin-top: -60px; border-radius: 10px 10px 0 10px;}
    .homeContentLeft p{ font-size: 18px; line-height: 28px; margin-bottom: 30px;}
    .homeContentRight{ border-radius: 0 0 10px 0;}
    .contentList > li{ width: auto; flex: 1; margin: 0 10px;}
    .contentList > li h4{ font-size: 22px; line-height: 28px; margin-bottom: 30px;}
    .contentList > li p{ font-size: 16px; line-height: 26px; font-family: 'gothamlight';}
    .ourValues{ font-family: 'gothamlight'; font-size: 16px; line-height: 26px;}
    .ourValues li{ margin-bottom: 15px;}
    .learnMore{ width: 100%; height: 48px; font-size: 16px; border-width: 2px;}

    .bannerCont{ margin-top: 78px; padding: 30px 0;}
    .bannerCont .headerTitle{ font-size: 48px; line-height: 50px; margin-bottom: 20px;}
    .bannerCont .headerSubTitle{ font-size: 17px; line-height: 30px;}
    .mainTitle{ font-size: 28px; line-height: 32px; margin-bottom: 40px;}

    .serviceList{ flex-wrap: wrap;}
    .serviceList li{ width: 215px; margin: 0 10px 20px 10px;}
    .serviceList li .serviceDesc h5{ font-size: 14px; line-height: 20px;}
    .serviceDetails{ width: 450px;}
    .btnServiceDetails{ width: 30px; height: 30px;}
    .serviceList.mBottom130{ margin-bottom: 50px;}
    .hotelList > li{ flex: 1; width: 100%; min-height: auto; margin: 0 0 30px 0;}
    .teamMember{ padding-top: 30px;}
    .teamMember li{ width: 40%; margin: 0 35px 40px 35px;}
    .memberThumb{ width: 130px; height: 130px; margin-bottom: 15px;}
    .memberName{ font-size: 20px; line-height: 22px;}
    .memberTitle{ font-size: 16px; line-height: 18px;}
    .mainTitle span::after, .mainTitle span::before{ width: 100px;}
    .mainTitle span::before{ left:-110px;}
    .mainTitle span::after{ right:-110px;}

    .ourStory p{ font-size: 18px; line-height: 30px; margin-bottom: 30px;}
    .valuableAssets{ font-size: 18px; line-height: 36px; padding: 30px; margin-bottom: 60px;}
    .crp{ font-size: 18px; line-height: 28px;}
    .crpListCol h4{ font-size: 26px; line-height: 28px; margin-bottom: 10px;}
    .crpListCol h5{ font-size: 16px; line-height: 26px; margin-bottom: 30px;}
    .crpListCol ul li{ font-size: 16px; line-height: 20px; margin-bottom: 15px; padding-left: 20px;}
    .crpListCol:first-child{ padding-right: 30px;}
    .crpListCol:last-child{ padding-left: 30px;}
    .crpListCol ul li::before{ width: 10px; height: 10px; top: 4px;}

    .successList li{ width: 300px;}
    .csCont a{ font-size: 16px;}
    .successList{ margin-bottom: 30px;}
    .hotelAwardsCol{ width: 48%;}
    .hotelAwardsCol h4{ font-size: 18px;}
    .hotelAwardsCol ul{ margin-bottom: 30px; font-size: 15px;}
    .hotelAwardsCol ul li{ margin-bottom: 10px;}
    .taCertificate{ margin: 30px 0;}
    .taCertificate h3{ font-size: 26px; line-height: 32px;}
    .taCertificate p{ font-size: 16px; line-height: 28px;}

    .applyFor{ font-size: 14px; top: 10px; right: 10px; padding: 10px;}
    .filterJobsCol select{ font-size: 14px; height: 46px; padding: 10px; background-size: 10px; background-position: 95% 20px;}
    .filterJobsCol .btnSearch{ height: 46px; font-size: 16px;}
    .jobRow .jobCol{ padding-right: 15px;}
    .jobRow .jobCol h5{ font-size: 14px; line-height: 16px; margin-bottom: 5px;}
    .jobRow .jobCol p{ font-size: 13px; line-height: 18px;}

    .applicationFormInner{ padding: 30px; padding-top: 40px;}
    .applicationFormInner h3{ font-size: 28px; line-height: 32px;}
    .applicationTab{ margin-top: 30px; margin-bottom: 30px;}
    .applicationTab li a{ font-size: 18px;}
    .txtInput{ padding: 10px 15px; font-size: 14px;}
    .frmLabel{ margin-bottom: 5px; font-size: 14px;}
    .frmRow{ margin-bottom: 30px;}
    .radioList li{ font-size: 14px;}
    .btnAddLanguage{ width: 56px; height: 42px; font-size: 30px;}
    .applicationFormInner h5{ font-size: 16px; margin-bottom: 20px;}
    .selectBox{ background-position: 90% 20px; padding: 10px; font-size: 14px; background-size: 10px;}
    .txtArea{ height: 43px;}

    .portfolioTab li{ font-size: 20px; margin: 0 20px;}
    .htlDetails h4{ font-size: 20px;}
    .htlDetails h5{ font-size: 14px;}
    .hotelList .viewDetails{ font-size: 16px;}

    .bioPopupLeft{ width: 200px;}
    .bioTop{ flex-direction: column; align-items: flex-start;}
    .bioTop > div{ margin-bottom: 20px;}
    .bioTop h4{ font-size: 28px; line-height: 34px;}
    .bioTop h5{ font-size: 22px; line-height: 26px;}
    .bioTop h6{ font-size: 16px; line-height: 22px;}
    .bannerCont.portfolio{ padding: 30px 0 130px 0;}
    .bannerCont.success{ padding: 30px 0 130px 0;}

    .headerTitle.contact{ margin-bottom: 0;}
    .contactOuter{ padding: 50px 30px;}

    .footerTop{ flex-direction: column; align-items: flex-start;}
    .fooLeft{ flex: 1; width: 100%; margin-bottom: 30px;}
    .fooRight{ flex: 1; width: 100%;}

    .previousManagedList{ flex-wrap: wrap;}
    .previousManagedListCol{ width: 100%; margin: 0;}
}
	
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){
}