:root {
    --color-theme: #D68331;
    --color-dark: #292F3F;
    --color-green: #00908E;
    /*--color-red: #FC5546;*/
    --color-smoke: #ABB4BD;
    --color-light: #EFEFF4;
    --transition-smooth: all 0.5s cubic-bezier(0.04, 1, 0.6, 0.97);
    --transition-smooth-2: all 1s cubic-bezier(0.04, 1, 0.6, 0.97);
}

body {
    width: 100%;
    font-size: 15px;
    color: var(--color-dark);
    font-family: 'Muli', sans-serif;
    /*background: #0D0F15;*/
    /*overflow: hidden;*/
    overflow-x: hidden;
}

body.menuOn {
    height: 100vh;
    overflow: hidden;
}

.color-theme {
    color: var(--color-theme);
}

.m-shown {
    display: none;
}

.m-hidden {}

button {
    outline: none;
    border: none;
    background-color: transparent;
}

.btnTheme {
    color: white;
    background: var(--color-theme);
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 24px;
    display: inline-flex;
    border-radius: 2px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.homeIntro .btnTheme {
    background-color: var(--color-green);
}

.btnTheme:hover {
    color: white;
    text-decoration: none;
}

.btnTheme.style-whiteGreen {
    background: white;
    color: var(--color-green);
}

.btnTheme i {
    font-size: 16px;
    margin: 0 12px 0 12px;
    transition: var(--transition-smooth);
}

.btnTheme:hover i {
    margin-left: 24px;
}

h1,
h2,
h3 {
    font-weight: 900;
}

h4,
h5,
h6 {
    font-weight: 600;
}

a {
    color: var(--color-green);
}

a:hover {
    color: var(--color-green);
}

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

.align--right {
    text-align: right;
}

ul,
li {
    display: block;
    margin: 0;
    padding: 0;
}

#home {}

#menu-toggle {
    width: 72px;
    height: 72px;
    /* position: fixed; */
    /* top: 0; */
    /* right: 0; */
    z-index: 9999;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: var(--transition-smooth);
    cursor: pointer;
    /*padding: 24px;*/
    float: left;
    display: none;
}

#menu-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 50%;
    background: white;
    border-radius: 9px;
    opacity: 1;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(0deg);
    -moz-transform: translateX(-50%) rotate(0deg);
    -o-transform: translateX(-50%) rotate(0deg);
    transform: translateX(-50%) rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#menu-toggle span:nth-child(1) {
    top: 20px;
}

#menu-toggle span:nth-child(2) {
    top: 32px;
}

#menu-toggle span:nth-child(3) {
    top: 44px;
}

#menu-toggle.open span:nth-child(1) {
    top: 28px;
    -webkit-transform: translateX(-50%) rotate(135deg);
    -moz-transform: translateX(-50%) rotate(135deg);
    -o-transform: translateX(-50%) rotate(135deg);
    transform: translateX(-50%) rotate(135deg);
}

#menu-toggle.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

#menu-toggle.open span:nth-child(3) {
    top: 28px;
    -webkit-transform: translateX(-50%) rotate(-135deg);
    -moz-transform: translateX(-50%) rotate(-135deg);
    -o-transform: translateX(-50%) rotate(-135deg);
    transform: translateX(-50%) rotate(-135deg);
}

header {
    position: relative;
    z-index: 10;
    border-top: 4px solid var(--color-green);
}

.scrollTop {
    position: fixed;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
    border: 1px solid #DDD;
    display: flex;
    z-index: 1000;
    right: 20px;
    bottom: 20px;
    opacity: 0;
    transition: var(--transition-smooth);
    transform: scale(.5);
    align-items: center;
    justify-content: center;
    font-size: 34px;
    cursor: pointer;
}

.scrollTop.active {
    opacity: 1;
    transform: none;
    color: red;
}

.topHeader {
    height: 80px;
    display: flex;
    align-items: center;
}

.botHeader {
    height: 60px;
    background: var(--color-green);
    color: white;
}

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

.headerLogo img {
    height: 65px;
}

.headerTool {
    display: flex;
}

.headerTool>* {
    margin-left: 12px;
    display: flex;
    align-items: center;
}

.headerMiddle {}

.headerBrand {
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
    text-align: center;
    font-weight: 900;
    /* color: var(--color-blue); */
    font-size: 20px;
    letter-spacing: -0.4px;
    /* opacity: .25; */
    display: none;
}

.headerMenu {
    display: flex;
    justify-content: space-between;
}

.headerMenuItem {
    font-size: 16px;
    padding: 18px 12px;
    font-weight: 700;
    position: relative;
    color: white;
    transition: all .15s ease-out;
}

.headerMenuItem:hover {
    color: white;
    text-decoration: none;
    background: rgba(0, 0, 0, .1);
}

.headerMenuItem:after {
    content: '';
    width: 0;
    height: 4px;
    background: var(--color-blue);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .5s cubic-bezier(0.67, -0.58, 0.37, 1.6) 0s;
}

.headerMenuItem:hover:after {
    width: 100%;
}

.headerMenuItem:hover {}

.subMenu {
    flex-flow: column;
    display: flex;
    position: absolute;
    top: 60px;
    background: white;
    padding: 12px 0;
    width: 240px;
    transform: translate(0, 12px);
    transition: all .2s ease-out;
    left: 0px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 24px 24px 42px rgba(0, 0, 0, .5);
}

.headerMenuItem:hover .subMenu.lvl-2 {
    left: 100%;
    top: -8px;
    transform: translateX(24px);
    opacity: 0;
    pointer-events: none;
}

.subMenuItem:hover .subMenu.lvl-2 {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.headerMenuItem:hover .subMenu {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.subMenuItem {
    padding: 12px 12px;
    transition: all .15s ease-out;
    position: relative;
    color: initial;
}

.subMenuItem:hover {
    background: var(--color-green);
    text-decoration: none;
    color: white;
}

.headerMenuItem:after {
    content: '';
    width: 0;
    height: 4px;
    background: var(--color-blue);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .5s cubic-bezier(0.67, -0.58, 0.37, 1.6) 0s;
}

.headerMenuItem:hover:after {
    width: 100%;
}

.headerMenuItem:hover {
    text-decoration: none;
    color: var(--color-blue);
}

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

.headerContact i {
    font-size: 42px;
    color: #DDD;
    justify-content: center;
    margin-right: 12px;
}

.headerContactTxt {}

.headerContactTxt span {
    font-size: 11px;
    opacity: .5;
    text-transform: uppercase;
}

.headerContactTxt h4 {
    margin: -2px 0 -4px 0;
    font-size: 24px;
    font-weight: 600;
}

.headerCTA {
    color: white;
    height: 38px;
    background: var(--color-theme);
    color: white;
    border-radius: 2px;
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
}

.headerCTA i {
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

.headerLang {}


#home {
    /* height: 1000vh; */
}

.homeBanner {}

.banner {}

.bannerItem {
    width: 100%;
    height: 330px;
    background-color: var(--color-light);
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
}

.slider {}

.homeAbout {
    background: var(--color-dark);
    color: white;
    padding: 32px 0 0 0;
}

.homeIntro {
    padding: 64px 0;
    max-height: 540px;
    position: relative;
    border-bottom: 1px solid #DDD;
}

.homeIntroQuote {}

.homeIntroQuote span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-blue);
    font-weight: 600;
    letter-spacing: 2px;
}

.homeIntroTxt {
    font-size: 18px;
    text-align: justify;
    margin: 0 42px 36px 0;
}

.homeIntroImg {
    width: 60%;
    height: 100%;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.homeIntroImg:after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: block;background: linear-gradient(90deg, #fff 10%, transparent);}

.homeIntroImg img {
    width: 100%;
}

.homeAboutMore {
    background: #EFEFF4;
    padding: 94px 0 32px;
    color: initial;
    text-align: center;
    margin: -54px 0 0 0;
}

.homeService {
    margin: 0px 0 0 0;
    position: relative;
    z-index: 2;
    /* background: #282e3f; */
    background: var(--color-light);
}

.homeServiceWrapper {
    /* background: var(--color-theme); */
    color: white;
    padding: 0;
    height: 182px;
    overflow: hidden;
}

.homeServiceWrapper>*:hover {
    /* background-color: rgba(0,0,0,.15); */
}

.homeServiceItem {
    padding: 0 12px 24px;
    display: flex;
    flex-flow: column;
    align-items: center;
    transition: var(--transition-smooth);
    /* color: white; */
    text-align: center;
    height: 100%;
    color: var(--color-theme);
}

.homeServiceItem:hover {
    /* background: rgba(0,0,0,.15); */
    background: transparent;
}

.homeServiceItem:hover {
    transform: translateY(-116px);
    /* color: white; */
    text-decoration: none;
    color: var(--color-theme);
}

.homeServiceIcon {
    font-size: 48px;
    margin: 54px 0 0 0;
    /* color: #fff; */
    transition: all .35s ease-out;
}

.homeServiceTxt,
.homeServiceItem .fa-arrow-circle-right {
    opacity: 0;
    transition: all .5s ease-out;
}

.homeServiceItem:hover .homeServiceIcon {
    opacity: 0;
}

.homeServiceTitle {
    margin: 24px 0;
    font-size: 18px
}

.homeServiceTxt {
    position: relative;
    margin-bottom: 24px;
    transition-delay: .15s;
    height: 66px;
    overflow: hidden;
    color: #333;
}

.homeServiceTxt:before {
    content: '';
    width: 54px;
    height: 4px;
    background: var(--color-theme);
    display: block;
    margin: 0 auto 18px;
}

.homeServiceItem:hover .homeServiceTxt,
.homeServiceItem:hover .fa-arrow-circle-right {
    opacity: 1;
}

.homeServiceItem .fa-arrow-circle-right {
    font-size: 24px;
    transition-delay: .3s;
}

.homeNews {
    padding: 42px 0;
}

.homeProperty {
    background: var(--color-green);
    color: white;
    padding: 42px 0;
}

.homePropertyBtn {
    margin: 48px 0 0;
}

.boxProperty {
    background: white;
    color: initial;
    border: 1px solid #DDD;
}

#home .boxProperty {
    border: none;
}

#market .boxProperty {
    border: 1px solid #DDD;
}

.boxPropertyImg {
    width: 100%;
    height: 230px;
    background-size: cover;
    background-position: center;
    background-color: #DDD;
}

.boxPropertyTxt {
    border-bottom: 1px solid #DDD;
    padding: 16px;
    position: relative;
}

.boxPropertyMore {}

.boxPropertyMore a {
    border-radius: 0;
}

.boxPropertyTag {
    width: 60px;
    height: 70px;
    background: url(../img/tag-bg.png);
    background-size: 100% 100%;
    justify-content: center;
    display: flex;
    padding: 16px 0 0;
    color: white;
    position: absolute;
    right: 20px;
    top: -24px;
}

.boxPropertyTitle {
    color: var(--color-green);
    margin-bottom: 0px;
}

.boxPropertyAddress {
    opacity: .5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boxPropertyMeta {
    margin: 12px 0 0;
}

.propertyMeta {}

.propertyMetaItem {
    font-weight: 600;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.propertyMetaItem span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.propertyMetaIcon {
    color: var(--color-smoke);
    margin-right: 8px;
}

.boxPropertyItem span {}

.homePartner {
    height: 200px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-light);
}

.homePartner-list i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    width: 54px;
    border-radius: 50%;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease-out;
}

.homePartner-list i:hover {
    background-color: var(--color-light);
}

.homePartner-list i.fa-angle-left {
    left: -42px;
}

.homePartner-list i.fa-angle-right {
    right: -42px;
}

.boxSuggest {
    display: flex;
    flex-flow: column;
    align-items: center;
    font-weight: 600;
}

.boxSuggest:hover {
    text-decoration: none;
    color: initial;
}

.boxSuggestImg {
    width: 100%;
    height: 160px;
    background-color: #EEE;
}

.boxSuggestTxt {
    width: 90%;
    background: white;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
    text-align: center;
    padding: 12px 0;
    margin: -42px 0 0 0;
}

.boxSuggestTxt span {
    display: block;
    margin: 0 0 8px 0;
    color: var(--color-blue);
}

.boxSuggestTxt h4 {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxSuggestTxt h4 i {
    font-size: 18px;
    margin: 0 12px;
}

.sectionTitle {
    padding: 42px 0;
    text-align: center;
}

.homeIntro .sectionTitle {
    text-align: left;
    padding: 24px 0;
}

.homeIntro .sectionTitle h2 {
    color: var(--color-green);
}

.sectionTitle span {
    text-transform: uppercase;
    opacity: .5;
}

.boxService {
    background: var(--color-light);
    padding: 36px;
    text-align: center;
    display: flex;
    flex-flow: column;
    font-size: 16px;
    border-radius: 4px;
}

.boxService h4 {
    margin-bottom: 24px;
}

.boxService p {
    margin: 0;
}

.boxServiceIcon {
    font-size: 84px;
    margin: 24px 0;
    color: var(--color-theme);
}

.boxService a {
    color: var(--color-blue);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxService a i {
    font-size: 14px;
    margin: 0 0 0 8px;
}

.boxPost {
    margin-bottom: 30px;
    position: relative;
    text-decoration: none !important;
}

.boxPost.type--large {
    height: 100%;
}

#home .boxPost.type--large {
    height: calc(100% - 30px);
}

.boxPostThumbnail {
    width: 100%;
    height: 120px;
    background-color: var(--color-dark);
    /* background-color: var(--color-green); */
    background-size: cover;
    background-position: center;
    transition: all .2s ease-out;
}

.boxPost:hover .boxPostThumbnail {
    opacity: .8;
}

#news .boxPostThumbnail {
    height: 180px;
    border-radius: 8px;
    transition: all .2s ease-out;
}

#news .boxPost:hover .boxPostThumbnail {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}

.boxPost.type--large .boxPostThumbnail {
    height: 240px;
}

.boxPostTxt {
    padding: 12px 0;
}

.boxPost.type--large .boxPostTxt {
    padding: 15px 0;
}

.boxPostTitle {
    height: 80px;
    overflow: hidden;
}

#news .boxPostTitle {height: 120px;overflow: hidden;position: relative;}

#news .boxPostTitle a {
    display: block;
    height: 72px;
    overflow: hidden;
}

#news .boxPostTitle:after {
    content: '';
    width: 42px;
    height: 4px;
    background: var(--color-theme);
    display: block;
    margin: 24px 0;
    transition: all .2s ease-out;
}

#news .boxPost:hover .boxPostTitle:after {
    width: 54px;
}

.boxPost.type--large .boxPostTitle {
    margin: 12px 0;
}

.boxPostDate {
    opacity: .5;
    color: initial;
}

.boxPostBtn {
    background: white;
    height: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    width: calc(100% - 72px);
    border-radius: 4px;
    color: var(--color-blue);
    font-weight: 600;
    box-shadow: 0 2px 0 #DDD;
}

.boxPostDesc {
    margin-bottom: 16px;
}

.boxPostDesc .view-article {
    display: none;
}

.partnerItem {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 160px;
}

.partnerItem img {
    max-width: 80%;
    height: auto;
    max-height: 50%;
}

.homeRegister {
    background: url(../img/banner-4.jpg);
    color: white;
    padding: 42px 0;
    background-size: cover;
    background-position: center;
    position: relative;
    text-align: center;
}

.homeRegister>.container {
    position: relative;
    z-index: 2;
}

.homeRegister:after {
    background: #000;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .75;
}

.homeRegisterTitle {
    position: relative;
}

.homeRegisterTitle:after {
    content: '';
    width: 42px;
    height: 4px;
    background: var(--color-green);
    display: block;
    margin: 32px auto;
}

.homeRegisterTxt {
    text-align: center;
}

.homeRegisterTxt .btn {
    display: block;
    margin: 42px auto 0;
}

.homeRegisterForm {}

.homeRegisterForm button {
    height: 56px;
}

.RegisterFormTitle {
    margin: 0 0 30px 0;
    font-size: 18px;
}

.registerFormItem {
    margin-bottom: 30px;
}

.registerFormItem input {
    width: 100%;
    height: 56px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .5);
    color: white;
    padding: 0 15px;
}

.registerFormItem input:focus {
    border-color: white;
    box-shadow: 0 0 0 4px rgba(0, 144, 142, 0.3);
}

input {
    outline: none;
}

.registerFormTitle input {}

footer {
    padding: 42px 0;
    border-top: 1px solid var(--color-light);
    background: white;
    position: relative;
    z-index: 10;
}

.footerLogo {}

.footerIntro {
    margin: 16px 0;
    border-bottom: 1px solid #DDD;
    padding-bottom: 12px;
}

.footerLogo img {
    width: 200px;
}

.footerContact {
    margin: 0 0 12px;
}

.footerContactInfo {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    font-size: 16px;
}

.footerContactInfo-address {
    font-weight: 900;
}

.footerContactInfo i {
    width: 32px;
    height: 32px;
    border: 1px solid #DDD;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 8px 0 0;
}

.footerSocial {
    display: flex;
}

.footerCpr {
    padding: 8px 0 0 0;
    border-top: 1px solid #DDD;
    margin: 12px 0 0 0;
    font-size: 14px;
}

.footerCpr em {
    display: block;
    font-size: 12px;
    font-style: initial;
}

.footerSocial a {
    padding: 4px 0;
    font-size: 20px;
    margin-right: 12px;
}

.footerLink {}

.footerLink-blk {
    font-size: 16px;
    border-left: 1px solid #DDD;
    height: 100%;
}

.footerLinkTitle {
    margin-bottom: 16px;
    padding-left: 20px;
    font-size: 18px;
}

.footerLinkItem {
    display: block;
    padding: 12px 0 12px 20px;
    position: relative;
    transition: all .15s ease-out;
}

.footerLinkItem:after {
    content: '';
    width: 0;
    height: 100%;
    background: var(--color-dark);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .25s ease-out;
}

.footerLinkItem:hover:after {
    /* width: 100%; */
}

.footerLinkItem:hover {
    text-decoration: none;
    color: var(--color-green);
    background-image: linear-gradient(45deg, var(--color-light), transparent);
}

.footerLinkItem:hover span {
    margin-right: 7px;
}

.footerLinkItem span {
    transition: all .15s ease-out;
}

.footerLinkItem {
    color: initial;
}

#about {
    background: white;
    position: relative;
}

#about .breadcrumb {
    margin: 0 72px 26px 66px;
}

#about h1 {
    margin-left: 66px;
}

.relatedPrd {
    padding-left: 66px;
    margin-bottom: 24px;
}

.relatedPrd-title {
    color: var(--color-green);
    border-bottom: 1px solid #DDDD;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.relatedPrd-listing {}

.breadcrumb {
    background-color: transparent;
    align-items: center;
    border-radius: 0;
    border-bottom: 1px solid var(--color-light);
    padding: 12px 0;
}

.breadcrumb i {
    margin: 0 8px;
}

#about>* {
    position: relative;
    z-index: 2;
}



#about:before,
#about:after {
    content: '';
}

#about:after {}

#about:before {}

.pageBanner {
    height: 240px;
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed; */
    position: relative;
    width: calc(100% + ((100vw - 1100px)/2));
    margin-left: calc((100vw - 1110px)/-2);
    width: 100%;
    margin: 0 0 32px 0;
    background-color: var(--color-green);
    color: oldlace;
}

.pageBanner:after {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#contact .pageBanner {
    margin-bottom: -110px;
}

#single .pageBanner:after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color-dark);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .6;
}

#single .pageBannerTxt {
    z-index: 2;
    color: white;
}

.pageBannerTxt {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    justify-content: center;
}

.pageBannerTxt h1 {
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

.pageBannerTxt h1:after {
    content: '';
    width: 64px;
    height: 2px;
    background: white;
    display: block;
    margin: 32px auto;
}

.pageBannerTxt span {
    font-size: 18px;
    line-height: 22px;
}

.singleDate {
    display: block;
    margin: 0 0 24px 0;
    letter-spacing: 2px;
}

.pageContent {
    padding: 0;
}

.pageDetail {
    /* border-right: 1px solid #DDD; */
}

.pageSidebar {
    height: 100%;
    margin-left: -30px;
    padding: 32px 0 0 30px;
    background-image: linear-gradient(90deg, var(--color-light), transparent);
}

.boxPanel {
    background: white;
    border-radius: 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.boxPanel-title {
    background: var(--color-green);
    color: white;
    padding: 4px 15px;
    font-weight: 700;
}

.boxPanel-content {
    padding: 0 0;
}

.pageNav {
    display: flex;
    flex-flow: column;
}

.pageNavItem {
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    color: initial;
    transition: all .15s ease-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.pageNavItem i {
    transform: translateX(28px);
    opacity: 0;
    transition: var(--transition-smooth);
    color: white;
}

.pageNavItem:hover i {
    transform: none;
    opacity: 1;
}

.pageNavItem span {
    position: relative;
    display: block;
    z-index: 2;
}

.pageNavItem:after {
    content: '';
    width: 0;
    height: 100%;
    background: var(--color-green);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .35s cubic-bezier(0, 0.73, 0.54, 0.87);
    opacity: 0;
}

.pageNavItem:hover:after {
    width: 100%;
}

.pageNavItem:hover {
    text-decoration: none;
    color: white;
    background: var(--color-green);
}

article {
    text-align: justify;
}

article img {
    width: 100%;
    padding: 12px;
    background: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    margin: 12px 0 24px;
}

#about article {
    padding: 0 72px;
    margin-bottom: 72px;
    text-align: justify;
    position: relative;
}

#about .pageBanner {
    height: 240px;
    width: calc(100% + ((100vw - 1110px)/2));
    margin-left: calc((100vw - 1110px)/-2);
}

#about article:after {
    content: '';
    width: 42px;
    height: 2px;
    position: absolute;
    background: var(--color-green);
    display: block;
    top: 12px;
    left: 0;
}

article h1,
article h2,
article h3,
article h4 {
    color: var(--color-green);
}

article p strong {
    font-weight: 900;
    color: var(--color-theme);
}

article ul {
    margin-left: 20px;
}

article ul li {
    display: list-item;
    margin-bottom: 4px;
}

#news {
    background: var(--color-light);
}

#single {
    background-image: linear-gradient(0deg, var(--color-light), transparent);
    /* box-shadow: inset 0 -12px 24px rgba(0,0,0,.05); */
}

#contact {
    background: var(--color-light);
}

.map {
    display: flex;
    justify-content: center;
}

.map img {}

.bannerNavItem {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .5);
    color: white;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 1px solid rgba(255, 255, 255, .5);
    z-index: 2;
    transition: all .15s ease-out;
}

.bannerNavItem:hover {
    background-color: white;
    color: var(--color-blue);
    box-shadow: 0 0 24px 2px;
}

.bannerNavPrev {
    left: -1px;
}

.bannerNavNext {
    right: -1px;
}

.slick-dots {
    display: flex;
    justify-content: center;
}

.slick-dots li {
    margin: 0 4px;
}

.slick-dots li.slick-active {}

.slick-dots li button {
    color: transparent;
    background: rgba(0, 0, 0, .35);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: scale(.5);
    transition: var(--transition-smooth);
    outline: none !important;
}

.slick-dots li.slick-active button {
    background-color: var(--color-theme);
    transform: scale(1);
}

/* single product */

#singlePrd {}

.prdBanner {}

.prdBanner .thumbnail {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
}

.prdMain {
    background: var(--color-light);
    padding: 42px 0;
}

.prdContent {}

.prdTitle {}

.prdBlk {
    padding-bottom: 24px;
    border-bottom: 1px solid #DDD;
    margin-bottom: 24px;
}

.prdBlk-title {
    font-size: 24px;
}

.prdBlk-txt {}

.prdBlk-txt ul {}

.prdBlk-txt li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
}

.prdBlk-txt li:before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-green);
    display: block;
    transform: rotate(45deg);
    margin-right: 6px;
    position: absolute;
    left: 0;
    top: 8px;
}

.prdSidebar {}

.prdMap {
    width: 100%;
    height: 240px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    margin-bottom: 24px;
}

.prdInfo,
.prdAgency {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    margin-bottom: 24px;
}

.prdInfo-title {
    color: var(--color-green);
    margin-bottom: 16px;
}

.prdInfo-txt {}

.prdInfo-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.prdInfo-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-light);
    margin-right: 8px;
    flex: 0 0 auto;
}

.prdAgency {
    text-align: center;
}

.prdAgent {
    display: none;
}

.prdAgent:first-child {
    display: block;
}

.prdAgent-avatar {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 auto 16px;
}

.prdAgent-name {
    font-weight: 700;
    font-size: 18px;
}

.prdAgent-role {
    margin: -4px 0 12px;
    opacity: .5;
}

.prdAgent-contact {
    display: flex;
}

.prdAgent-contact a {
    width: 50%;
    background: var(--color-green);
    border-radius: 4px;
    /* height: 42px; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 6px;
    font-size: 11px;
    flex-flow: column;
    padding: 8px 0 6px;
    text-decoration: none !important;
}

.prdAgent-contact a:nth-child(2) {
    background-color: var(--color-theme);
}

.prdAgent-contact a i {
    display: block;
    margin: 0 0 10px 0;
    font-size: 20px;
}

.prdAgent-contact a span {
    /* display: none; */
}

.uagb-toc__wrap {
    background-color: var(--color-light) !Important;
    border: none !Important;
    margin-bottom: 24px;
}

.singleDoc {}

.docMain {}

.docContent {}

.docTitle {}

.docDetail {}

.docSidebar {}

.docMenu {}

/* market */

#market {}

.marketSearch {
    height: 164px;
    background: #3c3c3c;
    display: flex;
    align-items: center;
    /* margin-bottom: 24px; */
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

.marketSearch:after {}

.marketForm {}

.marketForm .searchandfilter ul {
    display: flex;
    align-items: center;
    height: 56px;
    background: #fff;
}

.marketForm .searchandfilter .sf-field-search {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 100%;
    flex: auto;
    background-color: transparent;
    flex-flow: row;
    justify-content: flex-start;
}

.marketForm .searchandfilter .sf-field-search label {
    height: 100%;
    width: 100%;
    padding-left: 42px;
    position: relative;
}

.marketForm .searchandfilter .sf-field-search label:after {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    content: "\f002";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 2px;
    font-size: 23px;
}

.marketForm .searchandfilter .sf-field-search i {
    font-size: 20px;
    margin-right: 12px;
}

.marketForm .searchandfilter .sf-field-search input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
}

.marketForm .searchandfilter li {
    width: 172px;
    flex: 0 0 auto;
    height: 100%;
    background: var(--color-light);
    margin-right: 1px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 0 12px;
}

.marketForm .searchandfilter li h4 {
    text-transform: uppercase;
    opacity: .5;
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    margin: 8px 0 2px 0;
}

.marketForm .searchandfilter li select {
    background: transparent;
    border: none;
    height: 32px;
    text-transform: uppercase;
    margin-left: -8px;
    width: 100%;
    min-width: auto;
    font-weight: 700;
}

.marketForm .searchandfilter .sf-field-submit {
    width: 156px;
    flex: 0 0 auto;
    border-radius: 0;
    height: 100%;
    padding: 0;
    margin: 0;
    background: var(--color-theme);
}

.marketForm .searchandfilter .sf-field-submit input {
    height: 100%;
    color: white;
    margin: 0;
    background: rgba(0, 0, 0, 0);
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    transition: all .15s ease-out;
    cursor: pointer;
}

.marketForm .searchandfilter .sf-field-submit input:hover {
    background-color: rgba(0, 0, 0, .2);
}

.marketListing {
    background: var(--color-light);
    padding: 0 0 54px 0;
}

.marketList-title {
    padding: 0 15px;
    height: 100px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-light);
    margin: 4px -15px 16px;
    position: relative;
}

.marketList-title:after {
    content: '';
    width: 90px;
    height: 4px;
    background: var(--color-theme);
    display: block;
    position: absolute;
    bottom: 0;
}

.marketList-title h3 {
    margin: 0;
}

.marketList-all {}

/* article */

/* article */

#article {}

#article .main {}

#article .footer {
    position: relative;
    height: 100vh;
    background: var(--color-theme);
}

#article .header {
    margin-bottom: 32px;
}

#article .featured-photo {
    height: 320px;
    margin: 0 0 32px 0;
    background-size: cover;
    background-position: bottom center;
    position: relative;
}

#article .featured-photo:after {
    content: '';
}

#article .meta {}

#article .meta .category {
    text-align: center;
    /*color: white;*/
    margin-bottom: 24px;
}

#article .meta .category li {}

#article .meta .category li a {
    color: white;
    opacity: .5;
    display: inline-block;
    padding: 0 4px;
}

#article h1 {
    font-weight: 900;
    text-align: center;
}

#article h1:after {
    content: '';
    width: 32px;
    height: 4px;
    background: var(--color-theme);
    display: block;
    margin: 24px auto;
}

#article h1:hover {}

#article .content {
    text-align: justify;
    padding: 0 54px;
    position: relative;
}

#article .content h3 {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background-image: var(--color-grad);
}

#article .content h3:after {
    content: '';
    width: 32px;
    height: 4px;
    background: var(--color-blue);
    display: block;
    margin: 24px 0;
}

#article .main .content:before {
    content: '';
    width: 54px;
    height: 2px;
    background: var(--color-orange);
    display: block;
    left: 0;
    top: 8px;
    position: absolute;
}

#article .content p {}

#article .content img {
    width: calc(100% + 42px);
    max-width: none;
    margin: 12px 0 24px -21px;
    height: auto;
    /* box-shadow: 24px 24px 32px rgba(0, 0, 0, .15); */
    border-radius: 4px;
}

#article .content h2 {
    text-align: center;
    margin: 32px 0 32px 0;
    font-size: 24px;
    color: var(--color-orange);
}

#article .content h2:after {
    content: '';
    width: 54px;
    height: 2px;
    background: white;
    display: block;
    margin: 24px auto;
}

#article .content blockquote {
    padding: 15px;
    border: solid 1px #F1692B;
    border-radius: 15px;
}

#article .content blockquote ul {
    padding-left: 40px;
}

#article .content blockquote li {
    list-style: inherit;
}

#article .content blockquote p {
    margin-top: 1rem;
}

#article .related {
    margin-top: 32px;
}

#article .related h4 {
    font-size: 22px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    padding-bottom: 12px;
    margin-bottom: 16px;
    font-family: var(--font-title);
}

#article .related .listing {
    display: flex;
    flex-wrap: wrap;
}

#article .related .item {
    margin-bottom: 12px;
    width: 48%;
    margin-right: 2%;
    text-align: left;
}

#article .related .item a {
    display: flex;
    color: initial;
}

#article .related .item .thumbnail {
    width: 90px;
    height: 90px;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    margin-right: 16px;
    border: 1px solid rgba(255, 255, 255, .25);
}

#article .related .item .txt {}

#article .related .item .txt h5 {
    font-size: initial;
    margin-bottom: 0px;
}

#article .related .item .txt span {
    opacity: .5;
}

/* contact */

#contact {}

.contactMain {}

.contactBanner {
    height: 260px;
    background-color: var(--color-green);
    background-size: cover;
    background-position: center;
}

.contactForm {}

.contactSide {}

.contactInfo {}

.contactMap {}

.contactMap iframe {
    width: 100%;
    height: 240px;
    margin: 12px 0 24px;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.contactInfo-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.contactInfo-item i {
    width: 32px;
    height: 32px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #DDD;
    margin-right: 8px;
}

.contactInfo-address {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 16px;
}

.contactInfo-phone {}

.contactInfo-mail {}

/* regForm */

#regForm {}

#regForm .modal-dialog {
    max-width: 440px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#regForm .modal-content {
    background: #fff;
    border: none;
    color: #fff;
    padding: 0;
}

#regForm .close {
    text-shadow: none;
    color: #333;
    opacity: .75;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
    padding: 24px;
}

#regForm .btnTheme {
    margin-left: 42px;
    margin-top: 42px;
}

#regForm .modalTitle {}

#regForm .modalTitle:after {
    content: '';
    width: 32px;
    height: 4px;
    background: var(--color-green);
    display: block;
    margin: 24px 0;
}

#regForm .modal-title {
    color: var(--color-green);
}