@charset "utf-8";
:root {
    --primary-color: #223f5a;
    --secondary-color: #8dbf6a;
    --secondary-color02: #8bced3;
    --background-color: #f8fafc;
    --background-color-100: #f3f4f6;
    --background-color-200: #e5e7eb;
    --background-color-300: #d1d5db;
    --background-color-400: #9ca3af;
    --background-color-500: #6b7280;
    --background-color-600: #4b5563;
    --background-color-700: #374151;
    --text-color: #223f5a
}

[class*=" icon-"]:before, [class^=icon-]:before {
    font-family: yfont;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-music:before {
    content: '\e800'
}

.icon-search:before {
    content: '\e801'
}

.icon-mail:before {
    content: '\e802'
}

.icon-heart:before {
    content: '\e803'
}

.icon-heart-empty:before {
    content: '\e804'
}

.icon-star:before {
    content: '\e805'
}

.icon-star-empty:before {
    content: '\e806'
}

.icon-user:before {
    content: '\e807'
}

.icon-users:before {
    content: '\e808'
}

.icon-videocam:before {
    content: '\e809'
}

.icon-picture:before {
    content: '\e80a'
}

.icon-camera-alt:before {
    content: '\e80b'
}

.icon-th-large:before {
    content: '\e80c'
}

.icon-th-list:before {
    content: '\e80d'
}

.icon-ok:before {
    content: '\e80e'
}

.icon-plus:before {
    content: '\e80f'
}

.icon-minus:before {
    content: '\e810'
}

.icon-home:before {
    content: '\e811'
}

.icon-link:before {
    content: '\e812'
}

.icon-attach:before {
    content: '\e813'
}

.icon-lock:before {
    content: '\e814'
}

.icon-pin:before {
    content: '\e815'
}

.icon-eye:before {
    content: '\e816'
}

.icon-eye-off:before {
    content: '\e817'
}

.icon-tag:before {
    content: '\e818'
}

.icon-bookmark:before {
    content: '\e819'
}

.icon-flag:before {
    content: '\e81a'
}

.icon-download:before {
    content: '\e81b'
}

.icon-upload:before {
    content: '\e81c'
}

.icon-export:before {
    content: '\e81d'
}

.icon-pencil:before {
    content: '\e81e'
}

.icon-edit:before {
    content: '\e81f'
}

.icon-print:before {
    content: '\e820'
}

.icon-comment:before {
    content: '\e821'
}

.icon-chat:before {
    content: '\e822'
}

.icon-bell:before {
    content: '\e823'
}

.icon-location:before {
    content: '\e824'
}

.icon-trash-empty:before {
    content: '\e825'
}

.icon-doc:before {
    content: '\e826'
}

.icon-folder-open:before {
    content: '\e827'
}

.icon-folder:before {
    content: '\e828'
}

.icon-phone:before {
    content: '\e829'
}

.icon-cog:before {
    content: '\e82a'
}

.icon-wrench:before {
    content: '\e82b'
}

.icon-basket:before {
    content: '\e82c'
}

.icon-calendar:before {
    content: '\e82d'
}

.icon-login:before {
    content: '\e82e'
}

.icon-logout:before {
    content: '\e82f'
}

.icon-volume-off:before {
    content: '\e830'
}

.icon-volume-down:before {
    content: '\e831'
}

.icon-spin3:before {
    content: '\e832'
}

.icon-volume-up:before {
    content: '\e833'
}

.icon-clock:before {
    content: '\e834'
}

.icon-resize-full:before {
    content: '\e835'
}

.icon-resize-small:before {
    content: '\e836'
}

.icon-zoom-in:before {
    content: '\e837'
}

.icon-zoom-out:before {
    content: '\e838'
}

.icon-down-open:before {
    content: '\e839'
}

.icon-left-open:before {
    content: '\e83a'
}

.icon-right-open:before {
    content: '\e83b'
}

.icon-up-open:before {
    content: '\e83c'
}

.icon-down-big:before {
    content: '\e83d'
}

.icon-left-big:before {
    content: '\e83e'
}

.icon-right-big:before {
    content: '\e83f'
}

.icon-firefox:before {
    content: '\e840'
}

.icon-chrome:before {
    content: '\e841'
}

.icon-emo-happy:before {
    content: '\e842'
}

.icon-emo-wink:before {
    content: '\e843'
}

.icon-crown:before {
    content: '\e844'
}

.icon-up-big:before {
    content: '\e845'
}

.icon-shuffle:before {
    content: '\e846'
}

.icon-play:before {
    content: '\e847'
}

.icon-stop:before {
    content: '\e848'
}

.icon-pause:before {
    content: '\e849'
}

.icon-to-end:before {
    content: '\e84a'
}

.icon-to-end-alt:before {
    content: '\e84b'
}

.icon-to-start:before {
    content: '\e84c'
}

.icon-to-start-alt:before {
    content: '\e84d'
}

.icon-award:before {
    content: '\e84e'
}

.icon-globe:before {
    content: '\e84f'
}

.icon-cloud:before {
    content: '\e850'
}

.icon-flash:before {
    content: '\e851'
}

.icon-umbrella:before {
    content: '\e852'
}

.icon-flight:before {
    content: '\e853'
}

.icon-leaf:before {
    content: '\e854'
}

.icon-scissors:before {
    content: '\e855'
}

.icon-briefcase:before {
    content: '\e856'
}

.icon-barcode:before {
    content: '\e857'
}

.icon-qrcode:before {
    content: '\e858'
}

.icon-fire:before {
    content: '\e859'
}

.icon-chart-bar:before {
    content: '\e85a'
}

.icon-credit-card:before {
    content: '\e85b'
}

.icon-floppy:before {
    content: '\e85c'
}

.icon-megaphone:before {
    content: '\e85d'
}

.icon-key:before {
    content: '\e85e'
}

.icon-truck:before {
    content: '\e85f'
}

.icon-database:before {
    content: '\e860'
}

.icon-wallet:before {
    content: '\e861'
}

.icon-money-1:before {
    content: '\e862'
}

.icon-truck-1:before {
    content: '\e863'
}

.icon-tv:before {
    content: '\e864'
}

.icon-skype:before {
    content: '\e865'
}

.icon-emo-wink2:before {
    content: '\e866'
}

.icon-emo-unhappy:before {
    content: '\e867'
}

.icon-emo-sleep:before {
    content: '\e868'
}

.icon-spin5:before {
    content: '\e869'
}

.icon-cancel-circled:before {
    content: '\e86a'
}

.icon-cancel:before {
    content: '\e86b'
}

.icon-ok-circled2:before {
    content: '\e86c'
}

.icon-cancel-circled2:before {
    content: '\e86d'
}

.icon-right-dir:before {
    content: '\e86e'
}

.icon-left-dir:before {
    content: '\e86f'
}

[dir=ltr] .icon-left-dir:before {
    content: '\e86e'
}

.icon-up-dir:before {
    content: '\e870'
}

.icon-down-dir:before {
    content: '\e871'
}

.icon-align-justify:before {
    content: '\e872'
}

.icon-desktop-1:before {
    content: '\e873'
}

.icon-laptop-1:before {
    content: '\e874'
}

.icon-tablet-1:before {
    content: '\e875'
}

.icon-mobile-1:before {
    content: '\e876'
}

.icon-emo-thumbsup:before {
    content: '\e877'
}

.icon-bell-1:before {
    content: '\e878'
}

.icon-chat-1:before {
    content: '\e879'
}

.icon-clock-1:before {
    content: '\e87a'
}

.icon-hourglass:before {
    content: '\e87b'
}

.icon-publish:before {
    content: '\e87c'
}

.icon-clipboard:before {
    content: '\e87d'
}

.icon-floppy-1:before {
    content: '\e87e'
}

.icon-phone-1:before {
    content: '\e87f'
}

.icon-phone-outline:before {
    content: '\e880'
}

.icon-wristwatch:before {
    content: '\e881'
}

.icon-chart-bar-1:before {
    content: '\e882'
}

.icon-emo-devil:before {
    content: '\e883'
}

.icon-help:before {
    content: '\e884'
}

.icon-info:before {
    content: '\e885'
}

.icon-home-1:before {
    content: '\e886'
}

.icon-emo-surprised:before {
    content: '\e887'
}

.icon-emo-tongue:before {
    content: '\e888'
}

.icon-emo-coffee:before {
    content: '\e889'
}

.icon-emo-sunglasses:before {
    content: '\e88a'
}

.icon-emo-displeased:before {
    content: '\e88b'
}

.icon-emo-beer:before {
    content: '\e88c'
}

.icon-emo-grin:before {
    content: '\e88d'
}

.icon-emo-angry:before {
    content: '\e88e'
}

.icon-emo-saint:before {
    content: '\e88f'
}

.icon-emo-cry:before {
    content: '\e890'
}

.icon-emo-shoot:before {
    content: '\e891'
}

.icon-emo-squint:before {
    content: '\e892'
}

.icon-emo-laugh:before {
    content: '\e893'
}

.icon-marquee:before {
    content: '\e894'
}

.icon-crown-minus:before {
    content: '\e895'
}

.icon-crown-plus:before {
    content: '\e896'
}

.icon-crown-1:before {
    content: '\e897'
}

.icon-spin6:before {
    content: '\e898'
}

.icon-spin5-1:before {
    content: '\e899'
}

.icon-spin4:before {
    content: '\e89a'
}

.icon-spin3-1:before {
    content: '\e89b'
}

.icon-glass:before {
    content: '\e89c'
}

.icon-eye-1:before {
    content: '\e89d'
}

.icon-pin-1:before {
    content: '\e89e'
}

.icon-tag-1:before {
    content: '\e89f'
}

.icon-tags:before {
    content: '\e8a0'
}

.icon-direction-1:before {
    content: '\e8a1'
}

.icon-fax-1:before {
    content: '\e8a2'
}

.icon-menu-1:before {
    content: '\e8a3'
}

.icon-cog-alt:before {
    content: '\e8a4'
}

.icon-cog-1:before {
    content: '\e8a5'
}

.icon-sliders-1:before {
    content: '\e8a6'
}

.icon-wrench-1:before {
    content: '\e8a7'
}

.icon-cart-plus-1:before {
    content: '\e8a8'
}

.icon-basket-1:before {
    content: '\e8a9'
}

.icon-headphones:before {
    content: '\e8aa'
}

.icon-clock-2:before {
    content: '\e8ab'
}

.icon-block:before {
    content: '\e8ac'
}

.icon-resize-full-1:before {
    content: '\e8ad'
}

.icon-resize-full-alt-1:before {
    content: '\e8ae'
}

.icon-resize-small-1:before {
    content: '\e8af'
}

.icon-resize-vertical:before {
    content: '\e8b0'
}

.icon-resize-horizontal:before {
    content: '\e8b1'
}

.icon-move-1:before {
    content: '\e8b2'
}

.icon-zoom-in-1:before {
    content: '\e8b3'
}

.icon-zoom-out-1:before {
    content: '\e8b4'
}

.icon-down-hand:before {
    content: '\e8b5'
}

.icon-up-hand:before {
    content: '\e8b6'
}

.icon-left-hand:before {
    content: '\e8b7'
}

.icon-right-hand:before {
    content: '\e8b8'
}

.icon-play-1:before {
    content: '\e8b9'
}

.icon-stop-1:before {
    content: '\e8ba'
}

.icon-to-end-1:before {
    content: '\e8bb'
}

.icon-to-end-alt-1:before {
    content: '\e8bc'
}

.icon-to-start-1:before {
    content: '\e8bd'
}

.icon-to-start-alt-1:before {
    content: '\e8be'
}

.icon-fast-fw:before {
    content: '\e8bf'
}

.icon-fast-bw:before {
    content: '\e8c0'
}

.icon-eject:before {
    content: '\e8c1'
}

.icon-signal:before {
    content: '\e8c2'
}

.icon-wifi-1:before {
    content: '\e8c3'
}

.icon-target:before {
    content: '\e8c4'
}

.icon-award-1:before {
    content: '\e8c5'
}

.icon-align-left:before {
    content: '\e8c6'
}

.icon-align-center:before {
    content: '\e8c7'
}

.icon-align-right:before {
    content: '\e8c8'
}

.icon-align-justify-1:before {
    content: '\e8c9'
}

.icon-italic:before {
    content: '\e8ca'
}

.icon-leaf-1:before {
    content: '\e8cb'
}

.icon-scissors-1:before {
    content: '\e8cc'
}

.icon-paste-1:before {
    content: '\e8cd'
}

.icon-briefcase-1:before {
    content: '\e8ce'
}

.icon-asterisk:before {
    content: '\e8cf'
}

.icon-check:before {
    content: '\e8d0'
}

.icon-book:before {
    content: '\e8d1'
}

.icon-credit-card-1:before {
    content: '\e8d2'
}

.icon-megaphone-1:before {
    content: '\e8d3'
}

.icon-truck-2:before {
    content: '\e8d4'
}

.icon-motorcycle-1:before {
    content: '\e8d5'
}

.icon-dollar-1:before {
    content: '\e8d6'
}

.icon-hammer:before {
    content: '\e8d7'
}

.icon-language-1:before {
    content: '\e8d8'
}

.icon-soccer-ball-1:before {
    content: '\e8d9'
}

.icon-newspaper-1:before {
    content: '\e8da'
}

.icon-calc-1:before {
    content: '\e8db'
}

.icon-brush-1:before {
    content: '\e8dc'
}

.icon-birthday-1:before {
    content: '\e8dd'
}

.icon-facebook-1:before {
    content: '\e8de'
}

.icon-facebook-squared-1:before {
    content: '\e8df'
}

.icon-instagram-2:before {
    content: '\e8e0'
}

.icon-pinterest-squared-1:before {
    content: '\e8e1'
}

.icon-pinterest-1:before {
    content: '\e8e2'
}

.icon-paypal-1:before {
    content: '\e8e3'
}

.icon-linkedin-squared-1:before {
    content: '\e8e4'
}

.icon-twitter-squared-1:before {
    content: '\e8e5'
}

.icon-twitter-1:before {
    content: '\e8e6'
}

.icon-youtube-1:before {
    content: '\e8e7'
}

.icon-handshake-o-1:before {
    content: '\e8e8'
}

.icon-flashlight:before {
    content: '\e8e9'
}

.icon-th-outline:before {
    content: '\e8ea'
}

.icon-th:before {
    content: '\e8eb'
}

.icon-th-large-1:before {
    content: '\e8ec'
}

.icon-plus-1:before {
    content: '\e8ed'
}

.icon-minus-1:before {
    content: '\e8ee'
}

.icon-divide:before {
    content: '\e8ef'
}

.icon-eq:before {
    content: '\e8f0'
}

.icon-cancel-1:before {
    content: '\e8f1'
}

.icon-ok-1:before {
    content: '\e8f2'
}

.icon-cancel-outline:before {
    content: '\e8f3'
}

.icon-ok-outline:before {
    content: '\e8f4'
}

.icon-basket-2:before {
    content: '\e8f5'
}

.icon-menu-outline:before {
    content: '\e8f6'
}

.icon-menu-2:before {
    content: '\e8f7'
}

.icon-sort-alphabet:before {
    content: '\e8f8'
}

.icon-sort-numeric-outline:before {
    content: '\e8f9'
}

.icon-sort-numeric:before {
    content: '\e8fa'
}

.icon-sort-alphabet-outline:before {
    content: '\e8fb'
}

.icon-dollar-2:before {
    content: '\e8fc'
}

.icon-stopwatch:before {
    content: '\e8fd'
}

.icon-hourglass-1:before {
    content: '\e8fe'
}

.icon-warehouse:before {
    content: '\e8ff'
}

.icon-tree-2:before {
    content: '\e900'
}

.icon-tree-1:before {
    content: '\e901'
}

.icon-theatre:before {
    content: '\e902'
}

.icon-toilet:before {
    content: '\e903'
}

.icon-tennis:before {
    content: '\e904'
}

.icon-swimming:before {
    content: '\e905'
}

.icon-skiing:before {
    content: '\e906'
}

.icon-soccer:before {
    content: '\e907'
}

.icon-religious-islam:before {
    content: '\e908'
}

.icon-lodging:before {
    content: '\e909'
}

.icon-golf:before {
    content: '\e90a'
}

.icon-giraffe:before {
    content: '\e90b'
}

.icon-garden:before {
    content: '\e90c'
}

.icon-fuel:before {
    content: '\e90d'
}

.icon-fast-food:before {
    content: '\e90e'
}

.icon-instagram-3:before {
    content: '\e90f'
}

.icon-linkedin-1:before {
    content: '\e910'
}

.icon-twitter-2:before {
    content: '\e911'
}

.icon-pinterest-2:before {
    content: '\e912'
}

.icon-braille:before {
    content: '\e913'
}

.icon-ok-2:before {
    content: '\e914'
}

.icon-ok-circle:before {
    content: '\e915'
}

.icon-cancel-2:before {
    content: '\e916'
}

.icon-cancel-circle:before {
    content: '\e917'
}

.icon-terminal:before {
    content: '\e918'
}

.icon-th-list-1:before {
    content: '\f009'
}

.icon-th-thumb:before {
    content: '\f00a'
}

.icon-move:before {
    content: '\f047'
}

.icon-phone-squared:before {
    content: '\f098'
}

.icon-twitter:before {
    content: '\f099'
}

.icon-facebook:before {
    content: '\f09a'
}

.icon-hdd:before {
    content: '\f0a0'
}

.icon-certificate:before {
    content: '\f0a3'
}

.icon-tasks:before {
    content: '\f0ae'
}

.icon-resize-full-alt:before {
    content: '\f0b2'
}

.icon-menu:before {
    content: '\f0c9'
}

.icon-table:before {
    content: '\f0ce'
}

.icon-pinterest-circled:before {
    content: '\f0d2'
}

.icon-pinterest-squared:before {
    content: '\f0d3'
}

.icon-money:before {
    content: '\f0d6'
}

.icon-columns:before {
    content: '\f0db'
}

.icon-mail-alt:before {
    content: '\f0e0'
}

.icon-linkedin:before {
    content: '\f0e1'
}

.icon-gauge:before {
    content: '\f0e4'
}

.icon-sitemap:before {
    content: '\f0e8'
}

.icon-paste:before {
    content: '\f0ea'
}

.icon-lightbulb:before {
    content: '\f0eb'
}

.icon-exchange:before {
    content: '\f0ec'
}

.icon-user-md:before {
    content: '\f0f0'
}

.icon-stethoscope:before {
    content: '\f0f1'
}

.icon-bell-alt:before {
    content: '\f0f3'
}

.icon-coffee:before {
    content: '\f0f4'
}

.icon-food:before {
    content: '\f0f5'
}

.icon-building:before {
    content: '\f0f7'
}

.icon-hospital:before {
    content: '\f0f8'
}

.icon-ambulance:before {
    content: '\f0f9'
}

.icon-beer:before {
    content: '\f0fc'
}

.icon-h-sigh:before {
    content: '\f0fd'
}

.icon-angle-double-left:before {
    content: '\f100'
}

.icon-angle-double-right:before {
    content: '\f101'
}

.icon-angle-double-up:before {
    content: '\f102'
}

.icon-angle-double-down:before {
    content: '\f103'
}

.icon-circle-empty:before {
    content: '\f10c'
}

.icon-quote-left:before {
    content: '\f10d'
}

.icon-quote-right:before {
    content: '\f10e'
}

.icon-circle:before {
    content: '\f111'
}

.icon-github:before {
    content: '\f113'
}

.icon-smile:before {
    content: '\f118'
}

.icon-frown:before {
    content: '\f119'
}

.icon-meh:before {
    content: '\f11a'
}

.icon-keyboard:before {
    content: '\f11c'
}

.icon-code:before {
    content: '\f121'
}

.icon-star-half-alt:before {
    content: '\f123'
}

.icon-direction:before {
    content: '\f124'
}

.icon-crop:before {
    content: '\f125'
}

.icon-mic:before {
    content: '\f130'
}

.icon-shield:before {
    content: '\f132'
}

.icon-calendar-empty:before {
    content: '\f133'
}

.icon-extinguisher:before {
    content: '\f134'
}

.icon-rocket:before {
    content: '\f135'
}

.icon-angle-circled-left:before {
    content: '\f137'
}

.icon-angle-circled-right:before {
    content: '\f138'
}

.icon-angle-circled-up:before {
    content: '\f139'
}

.icon-angle-circled-down:before {
    content: '\f13a'
}

.icon-anchor:before {
    content: '\f13d'
}

.icon-lock-open-alt:before {
    content: '\f13e'
}

.icon-bullseye:before {
    content: '\f140'
}

.icon-rss-squared:before {
    content: '\f143'
}

.icon-ticket:before {
    content: '\f145'
}

.icon-compass:before {
    content: '\f14e'
}

.icon-euro:before {
    content: '\f153'
}

.icon-pound:before {
    content: '\f154'
}

.icon-dollar:before {
    content: '\f155'
}

.icon-rupee:before {
    content: '\f156'
}

.icon-yen:before {
    content: '\f157'
}

.icon-rouble:before {
    content: '\f158'
}

.icon-sort-name-up:before {
    content: '\f15d'
}

.icon-sort-name-down:before {
    content: '\f15e'
}

.icon-thumbs-up-alt:before {
    content: '\f164'
}

.icon-thumbs-down-alt:before {
    content: '\f165'
}

.icon-youtube-squared:before {
    content: '\f166'
}

.icon-youtube:before {
    content: '\f167'
}

.icon-youtube-play:before {
    content: '\f16a'
}

.icon-dropbox:before {
    content: '\f16b'
}

.icon-instagram:before {
    content: '\f16d'
}

.icon-flickr:before {
    content: '\f16e'
}

.icon-apple:before {
    content: '\f179'
}

.icon-android:before {
    content: '\f17b'
}

.icon-dribbble:before {
    content: '\f17d'
}

.icon-foursquare:before {
    content: '\f180'
}

.icon-female:before {
    content: '\f182'
}

.icon-male:before {
    content: '\f183'
}

.icon-moon:before {
    content: '\f186'
}

.icon-box:before {
    content: '\f187'
}

.icon-bug:before {
    content: '\f188'
}

.icon-vkontakte:before {
    content: '\f189'
}

.icon-renren:before {
    content: '\f18b'
}

.icon-wheelchair:before {
    content: '\f193'
}

.icon-vimeo-squared:before {
    content: '\f194'
}

.icon-space-shuttle:before {
    content: '\f197'
}

.icon-google:before {
    content: '\f1a0'
}

.icon-stumbleupon-circled:before {
    content: '\f1a3'
}

.icon-stumbleupon:before {
    content: '\f1a4'
}

.icon-digg:before {
    content: '\f1a6'
}

.icon-language:before {
    content: '\f1ab'
}

.icon-fax:before {
    content: '\f1ac'
}

.icon-building-filled:before {
    content: '\f1ad'
}

.icon-paw:before {
    content: '\f1b0'
}

.icon-spoon:before {
    content: '\f1b1'
}

.icon-cubes:before {
    content: '\f1b3'
}

.icon-behance:before {
    content: '\f1b4'
}

.icon-behance-squared:before {
    content: '\f1b5'
}

.icon-cab:before {
    content: '\f1b9'
}

.icon-tree:before {
    content: '\f1bb'
}

.icon-spotify:before {
    content: '\f1bc'
}

.icon-deviantart:before {
    content: '\f1bd'
}

.icon-soundcloud:before {
    content: '\f1be'
}

.icon-file-pdf:before {
    content: '\f1c1'
}

.icon-file-word:before {
    content: '\f1c2'
}

.icon-file-excel:before {
    content: '\f1c3'
}

.icon-file-powerpoint:before {
    content: '\f1c4'
}

.icon-file-image:before {
    content: '\f1c5'
}

.icon-file-archive:before {
    content: '\f1c6'
}

.icon-vine:before {
    content: '\f1ca'
}

.icon-codeopen:before {
    content: '\f1cb'
}

.icon-lifebuoy:before {
    content: '\f1cd'
}

.icon-rebel:before {
    content: '\f1d0'
}

.icon-empire:before {
    content: '\f1d1'
}

.icon-git-squared:before {
    content: '\f1d2'
}

.icon-paper-plane:before {
    content: '\f1d8'
}

.icon-paper-plane-empty:before {
    content: '\f1d9'
}

.icon-header:before {
    content: '\f1dc'
}

.icon-sliders:before {
    content: '\f1de'
}

.icon-share:before {
    content: '\f1e0'
}

.icon-share-squared:before {
    content: '\f1e1'
}

.icon-bomb:before {
    content: '\f1e2'
}

.icon-soccer-ball:before {
    content: '\f1e3'
}

.icon-tty:before {
    content: '\f1e4'
}

.icon-binoculars:before {
    content: '\f1e5'
}

.icon-plug:before {
    content: '\f1e6'
}

.icon-yelp:before {
    content: '\f1e9'
}

.icon-newspaper:before {
    content: '\f1ea'
}

.icon-wifi:before {
    content: '\f1eb'
}

.icon-calc:before {
    content: '\f1ec'
}

.icon-paypal:before {
    content: '\f1ed'
}

.icon-gwallet:before {
    content: '\f1ee'
}

.icon-cc-visa:before {
    content: '\f1f0'
}

.icon-cc-mastercard:before {
    content: '\f1f1'
}

.icon-cc-discover:before {
    content: '\f1f2'
}

.icon-cc-amex:before {
    content: '\f1f3'
}

.icon-cc-paypal:before {
    content: '\f1f4'
}

.icon-cc-stripe:before {
    content: '\f1f5'
}

.icon-bell-off:before {
    content: '\f1f6'
}

.icon-bell-off-empty:before {
    content: '\f1f7'
}

.icon-trash:before {
    content: '\f1f8'
}

.icon-copyright:before {
    content: '\f1f9'
}

.icon-at:before {
    content: '\f1fa'
}

.icon-eyedropper:before {
    content: '\f1fb'
}

.icon-brush:before {
    content: '\f1fc'
}

.icon-birthday:before {
    content: '\f1fd'
}

.icon-chart-pie:before {
    content: '\f200'
}

.icon-chart-line:before {
    content: '\f201'
}

.icon-toggle-off:before {
    content: '\f204'
}

.icon-toggle-on:before {
    content: '\f205'
}

.icon-bicycle:before {
    content: '\f206'
}

.icon-bus:before {
    content: '\f207'
}

.icon-angellist:before {
    content: '\f209'
}

.icon-cc:before {
    content: '\f20a'
}

.icon-forumbee:before {
    content: '\f211'
}

.icon-cart-plus:before {
    content: '\f217'
}

.icon-cart-arrow-down:before {
    content: '\f218'
}

.icon-diamond:before {
    content: '\f219'
}

.icon-ship:before {
    content: '\f21a'
}

.icon-user-secret:before {
    content: '\f21b'
}

.icon-motorcycle:before {
    content: '\f21c'
}

.icon-heartbeat:before {
    content: '\f21e'
}

.icon-venus:before {
    content: '\f221'
}

.icon-mars:before {
    content: '\f222'
}

.icon-facebook-official:before {
    content: '\f230'
}

.icon-pinterest:before {
    content: '\f231'
}

.icon-whatsapp:before {
    content: '\f232'
}

.icon-user-plus:before {
    content: '\f234'
}

.icon-user-times:before {
    content: '\f235'
}

.icon-bed:before {
    content: '\f236'
}

.icon-train:before {
    content: '\f238'
}

.icon-subway:before {
    content: '\f239'
}

.icon-medium:before {
    content: '\f23a'
}

.icon-opencart:before {
    content: '\f23d'
}

.icon-gg:before {
    content: '\f260'
}

.icon-tripadvisor:before {
    content: '\f262'
}

.icon-odnoklassniki-square:before {
    content: '\f264'
}

.icon-map:before {
    content: '\f279'
}

.icon-handshake-o:before {
    content: '\f2b5'
}

.icon-envelope-open:before {
    content: '\f2b6'
}

.icon-address-card:before {
    content: '\f2bb'
}

.icon-address-card-o:before {
    content: '\f2bc'
}

.icon-user-o:before {
    content: '\f2c0'
}

.icon-quora:before {
    content: '\f2c4'
}

.icon-telegram:before {
    content: '\f2c6'
}

.icon-thermometer-3:before {
    content: '\f2c8'
}

.icon-thermometer-quarter:before {
    content: '\f2ca'
}

.icon-shower:before {
    content: '\f2cc'
}

.icon-bath:before {
    content: '\f2cd'
}

.icon-snowflake-o:before {
    content: '\f2dc'
}

.icon-twitter-bird:before {
    content: '\f303'
}

.icon-twitter-squared:before {
    content: '\f304'
}

.icon-facebook-squared:before {
    content: '\f308'
}

.icon-linkedin-squared:before {
    content: '\f30c'
}

.icon-instagram-filled:before {
    content: '\f31f'
}

.icon-instagram-1:before {
    content: '\f32d'
}

.icon-behance-1:before {
    content: '\f34e'
}

* {
    box-sizing: border-box;
    border: 0;
    outline: 0;
    direction: rtl
}

[dir=ltr] * {
    direction: ltr
}

:focus {
    border: 0;
    outline: 0
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Somar, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color);
    background-color: var(--background-color)
}

main {
    display: block
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    text-decoration: none;
    color: inherit;
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a, a img, img {
    border-style: none;
    border-width: 0;
    outline: 0
}

button, input, optgroup, select, textarea {
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=search] {
    outline-offset: -2px
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

h1, h2, h3, h4, h5, h6, li, p, ul {
    margin: 0;
    padding: 0
}

h1, h2, h3, h4, h5, h6, p {
    margin: 15px 0
}

.center {
    text-align: center
}

:focus {
    outline: 0
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px
}

::-webkit-scrollbar-track {
    background-color: #f1f1f1
}

.container-fluid::after, .container::after, .row::after {
    clear: both
}

.clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .row::after, .row::before {
    display: table;
    content: " "
}

.container, .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    margin-right: -15px;
    margin-left: -15px
}

.row [class^=col] {
    float: right;
    padding: .5rem 15px;
    min-height: .125rem
}

[dir=ltr] .row [class^=col] {
    float: left
}

.row.no-padding > [class*=col-] {
    padding: 0
}

.row.no-gutter > [class*=col-] {
    padding: .5rem 15px
}

.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: 15px;
    padding-left: 15px;
    width: 100%
}

.col-xs-12 {
    width: 100%
}

.col-xs-11 {
    width: 91.66666667%
}

.col-xs-10 {
    width: 83.33333333%
}

.col-xs-9 {
    width: 75%
}

.col-xs-8 {
    width: 66.66666667%
}

.col-xs-7 {
    width: 58.33333333%
}

.col-xs-6 {
    width: 50%
}

.col-xs-5 {
    width: 41.66666667%
}

.col-xs-4 {
    width: 33.33333333%
}

.col-xs-3 {
    width: 25%
}

.col-xs-2 {
    width: 16.66666667%
}

.col-xs-1 {
    width: 8.33333333%
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }

    .col-sm-12 {
        width: 100%
    }

    .col-sm-11 {
        width: 91.66666667%
    }

    .col-sm-10 {
        width: 83.33333333%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-8 {
        width: 66.66666667%
    }

    .col-sm-7 {
        width: 58.33333333%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-5 {
        width: 41.66666667%
    }

    .col-sm-4 {
        width: 33.33333333%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-2 {
        width: 16.66666667%
    }

    .col-sm-1 {
        width: 8.33333333%
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px
    }

    .col-md-12 {
        width: 100%
    }

    .col-md-11 {
        width: 91.66666667%
    }

    .col-md-10 {
        width: 83.33333333%
    }

    .col-md-9 {
        width: 75%
    }

    .col-md-8 {
        width: 66.66666667%
    }

    .col-md-7 {
        width: 58.33333333%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-5 {
        width: 41.66666667%
    }

    .col-md-4 {
        width: 33.33333333%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-2 {
        width: 16.66666667%
    }

    .col-md-1 {
        width: 8.33333333%
    }

    .row [class^=col] {
        padding: .5rem 15px
    }

    .row.no-gutter > [class*=col-] {
        padding: .5rem 0
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1200px
    }

    .col-lg-12 {
        width: 100%
    }

    .col-lg-11 {
        width: 91.66666667%
    }

    .col-lg-10 {
        width: 83.33333333%
    }

    .col-lg-9 {
        width: 75%
    }

    .col-lg-8 {
        width: 66.66666667%
    }

    .col-lg-7 {
        width: 58.33333333%
    }

    .col-lg-6 {
        width: 50%
    }

    .col-lg-5 {
        width: 41.66666667%
    }

    .col-lg-4 {
        width: 33.33333333%
    }

    .col-lg-3 {
        width: 25%
    }

    .col-lg-2 {
        width: 16.66666667%
    }

    .col-lg-1 {
        width: 8.33333333%
    }
}

.skip-link {
    background: var(--secondary-color);
    height: 30px;
    left: 50%;
    padding: 0 15px;
    position: absolute;
    transform: translate(-50%, -100%);
    transition: transform .3s;
    display: block;
    height: 40px;
    line-height: 40px;
    z-index: 5;
    border-radius: 0 0 5px 5px;
    color: #fff
}

.skip-link:focus {
    transform: translate(-50%, 0)
}

.slick-list, .slick-slider, .slick-track {
    position: relative;
    display: block
}

.slick-loading .slick-slide, .slick-loading .slick-track {
    visibility: hidden
}

.slick-slider {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    top: 0;
    left: 0
}

.slick-track:after, .slick-track:before {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.navi {
    order: 2
}

#jawdaMenu {
    display: none;
    list-style: none;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    background: #fff;
    padding: 40px 20px;
    font-size: 1rem
}

[dir=rtl] #jawdaMenu {
    left: auto;
    right: 0
}

#jawdaMenu li {
    display: block;
    width: 100%;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid var(--background-color-200);
    font-size: 1rem;
    font-weight: 400
}

#jawdaMenu li.current-menu-item {
    position: relative
}

#jawdaMenu li.current-menu-item:hover {
    color: var(--secondary-color)
}

#jawdaMenu li.current-menu-item:hover li {
    color: var(--primary-color)
}

#jawdaMenu li a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
    height: 40px;
    line-height: 40px
}

#jawdaMenu li a:hover {
    color: var(--secondary-color)
}

#jawdaMenu li li a:hover {
    color: inherit
}

#jawdaMenu li.menu-item-has-children {
    position: relative
}

#jawdaMenu li.menu-item-has-children a {
    padding: 0 25px
}

#jawdaMenu li.menu-item-has-children > a {
    padding-left: 10px;
    padding-right: 25px
}

[dir=rtl] #jawdaMenu li.menu-item-has-children > a {
    padding-right: 10px;
    padding-left: 25px
}

#jawdaMenu li.menu-item-has-children span.mobOpen {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 28px;
    z-index: 1;
    background: var(--background-color-100);
    border-radius: 5px;
    margin-top: 5px
}

[dir=rtl] #jawdaMenu li.menu-item-has-children span.mobOpen {
    right: auto;
    left: -3px
}

#jawdaMenu li.menu-item-has-children span.mobOpen::after {
    content: '\e839';
    font-family: yfont;
    font-size: .5rem
}

#jawdaMenu li.menu-item-has-children span.mobOpen:hover {
    background-color: var(--background-color-200)
}

#jawdaMenu li > .sub-menu {
    display: none;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    background: #f7f7f7;
    animation: .5s slide-down
}

@keyframes slide-down {
    from {
        transform: translateY(-20px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

#jawdaMenu li > .sub-menu li {
    display: block;
    border-bottom: 1px solid var(--background-color-100)
}

#jawdaMenu li > .sub-menu li:last-child {
    border-bottom: none;
    border-radius: 0 0 10px 10px
}

#jawdaMenu li > .sub-menu li:hover {
    background-color: var(--background-color-100)
}

.CloseMyMenu {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 10px;
    display: block;
    font-size: 1.5rem;
    border-radius: 5px;
    background-color: var(--secondary-color);
    color: #fff;
    font-weight: 400;
    margin-right: 3px;
    height: 36px;
    width: 36px;
    line-height: 30px;
    text-align: center;
    cursor: pointer
}

.CloseMyMenu::after {
    content: "×";
    margin-right: -3px
}

.CloseMyMenu:hover {
    background-color: var(--primary-color)
}

[dir=rtl] .CloseMyMenu {
    right: auto;
    left: 10px
}

.nav-button {
    display: block;
    font-size: 1.1rem;
    border-radius: 5px;
    background-color: #fff;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-weight: 400;
    margin-right: 5px;
    margin-left: -5px;
    height: 30px;
    width: 30px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    align-self: stretch
}

.nav-button:hover {
    background-color: var(--secondary-color);
    color: #fff
}

@media screen AND (min-width: 992px) {
    .navi {
        order: 0
    }

    #jawdaMenu li.menu-item-has-children span.mobOpen, #jawdaMenu li.menu-item-has-children span.mobOpen:hover {
        background-color: transparent
    }

    .CloseMyMenu, .nav-button {
        display: none
    }

    #jawdaMenu {
        display: block;
        position: relative;
        padding: 0;
        max-width: none;
        width: auto;
        height: auto;
        overflow: visible;
        background-color: transparent
    }

    #jawdaMenu li {
        display: inline-block;
        width: auto;
        position: relative;
        border-bottom: none
    }

    #jawdaMenu > li {
        margin: 0 5px
    }

    #jawdaMenu li.current-menu-item::after {
        content: "";
        position: absolute;
        left: 7px;
        right: 7px;
        bottom: -5px;
        background-color: var(--secondary-color);
        height: 3px;
        transition: .3s
    }

    #jawdaMenu > li::after {
        content: "";
        position: absolute;
        right: 100%;
        left: 7px;
        bottom: -5px;
        background-color: var(--secondary-color);
        height: 3px;
        transition: .5s
    }

    #jawdaMenu > li:hover::after {
        right: 7px
    }

    [dir=rtl] #jawdaMenu > li::after {
        left: 100%;
        right: 7px
    }

    [dir=rtl] #jawdaMenu > li.current-menu-item::after {
        left: 7px;
        right: 7px
    }

    [dir=rtl] #jawdaMenu > li:hover::after {
        left: 7px
    }

    #jawdaMenu li > .sub-menu {
        position: absolute;
        z-index: 2;
        width: auto;
        background: #fff;
        top: 40px;
        left: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .05)
    }

    [dir=rtl] #jawdaMenu li > .sub-menu {
        left: auto;
        right: 0
    }

    #jawdaMenu li.menu-item-has-children ul li.menu-item-has-children span.mobOpen::after {
        content: '\e83b';
        font-family: yfont;
        font-size: .5rem
    }

    [dir=rtl] #jawdaMenu li.menu-item-has-children ul li.menu-item-has-children span.mobOpen::after {
        content: '\e83a';
        font-family: yfont;
        font-size: .5rem
    }

    #jawdaMenu li > .sub-menu li > .sub-menu {
        top: 0;
        left: 100%
    }

    [dir=rtl] #jawdaMenu li > .sub-menu li > .sub-menu {
        left: auto;
        right: 100%
    }

    #jawdaMenu li.menu-item.hide-pc {
        display: none
    }
}

.jawda-responsive-menu {
    animation: slide-left .5s ease
}

@keyframes slide-left {
    from {
        transform: translateX(50px);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

@media screen and (min-width: 992px) {
    .jawda-responsive-menu {
        animation-duration: 0s
    }
}

.alignnone {
    margin: 5px 20px 20px 0
}

.aligncenter, div.aligncenter {
    display: block;
    margin: 5px auto 5px auto
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

a img.alignnone {
    margin: 5px 20px 20px 0
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto
}

.gallery-caption, .wp-caption .wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px
}

.blognavigation {
    margin-top: 20px
}

.blognavigation li.active, .blognavigation li:hover, .tags a:hover {
    background: #202636;
    color: #fff
}

.blognavigation .next, .blognavigation .prev {
    background-color: var(--primary-color);
    color: #fff
}

.blognavigation .dots {
    font-size: 20px;
    margin: 0 5px
}

.blognavigation a, .blognavigation li, .blognavigation span.current {
    display: inline-block;
    margin: 10px 3px;
    line-height: 30px;
    padding: 0 12px;
    font-size: 1rem;
    transition: .2s;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color)
}

.blognavigation a:hover, .blognavigation li:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    transition: .2s
}

.blognavigation span.current {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .blognavigation {
        margin-top: 40px
    }
}

.alert {
    display: none;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem
}

.alert.show {
    display: block
}

.alert-dismissible {
    padding-right: 4rem
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb
}

.alert-failed {
    color: #571515;
    background-color: #edd4d4;
    border-color: #e6c3c3
}

.alertclose:not(:disabled):not(.disabled) {
    cursor: pointer
}

.alert-dismissible .alertclose {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 10px;
    color: inherit;
    background: 0 0;
    font-size: 1.5rem
}

.lwptoc_toggle {
    display: none
}

ul.tags {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style: none
}

ul.tags a {
    display: inline-block;
    background: var(--background-color-600);
    color: #fff;
    padding: 1px 10px;
    margin: 2px;
    border-radius: 5px
}

.lwptoc_toggle_label {
    display: none
}

#showmoreUnits {
    background-color: var(--primary-color);
    padding: 5px 15px;
    color: #fff;
    font-size: 1rem;
    border: 0;
    transition: .5s;
    border-radius: 5px;
    font-family: Somar, sans-serif;
    display: inline-block
}

#showmoreUnits .less, #showmoreUnits.texthide .more {
    display: none
}

#showmoreUnits .more, #showmoreUnits.texthide .less {
    display: block
}

.hiddenUnit {
    display: none
}

.hiddenUnit.show {
    display: block
}

.bigText.center {
    font-size: 2.5rem
}

.main-headline, .main-headline h1 {
    font-size: 1.7rem;
    display: flex;
    margin-bottom: 15px;
    font-weight: 400;
    margin-top: 0;
    align-items: center
}

.main-headline h1 {
    margin: 0;
    font-size: 1.6rem
}

.main-headline img {
    height: 3rem;
    width: auto;
    display: inline-block
}

[dir=ltr] .main-headline img {
    transform: scaleX(-1)
}

.headline-txt {
    font-weight: 400;
    font-size: 1.1rem
}

.headline {
    font-size: 1.2rem;
    font-weight: 400;
    position: relative;
    display: inline-block;
    margin-bottom: 15px
}

.headline::after {
    content: "";
    width: 100%;
    height: 4px;
    background-color: var(--secondary-color);
    position: absolute;
    right: 0;
    bottom: -15px
}

@media only screen and (min-width: 992px) {
    .main-headline, .main-headline h1 {
        font-size: 2.4rem;
        margin-bottom: 25px
    }

    .main-headline h1 {
        margin: 0
    }

    .main-headline img {
        height: 4rem
    }

    .headline-txt {
        font-size: 1.2rem;
        line-height: 2.6rem;
        margin-bottom: 15px
    }

    .headline {
        font-size: 1.4rem;
        margin-bottom: 25px
    }
}

.main-section {
    padding: 30px 0;
    background: linear-gradient(white, var(--background-color-100))
}

@media only screen and (min-width: 992px) {
    .main-section {
        padding: 50px 0
    }
}

.view-all-btn {
    background-color: var(--primary-color);
    padding: 4px 25px;
    color: #fff;
    margin: 15px 0;
    display: inline-block;
    transition: .2s;
    min-width: 120px;
    font-size: 1.1rem;
    border-radius: 5px
}

.view-all-btn:hover {
    background-color: var(--secondary-color);
    color: #fff;
    min-width: 126px
}

.lightbox-target {
    position: fixed;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0;
    transition: .5s ease-in-out;
    z-index: 200;
    top: -100%;
    overflow-y: scroll;
    right: 0;
    left: 0
}

a.lightbox-close {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: .5s ease-in-out;
    opacity: 0;
    top: 0;
    left: 0
}

.lightbox-target:target {
    opacity: 1;
    top: 0;
    bottom: 0;
    left: 0
}

.lightbox-target .icon-cancel {
    color: #000;
    background-color: #fff;
    font-size: 1.5rem;
    top: 10px;
    left: 10px;
    position: absolute;
    border-radius: 5px
}

[dir=ltr] .lightbox-target .icon-cancel {
    left: auto;
    right: 10px
}

.lightbox-target.small .zoom-popup {
    width: fit-content
}

#back-top {
    position: fixed;
    z-index: 50;
    left: 10px;
    bottom: 10px
}

#back-top i {
    background-color: var(--primary-color);
    line-height: 34px;
    height: 38px;
    width: 38px;
    text-align: center;
    font-size: 14px;
    display: block;
    transition: .5s;
    color: #fff;
    border-radius: 5px
}

#back-top i:hover {
    background-color: var(--secondary-color)
}

#floating-icons {
    position: fixed;
    z-index: 20;
    right: 10px;
    transition: .5s;
    bottom: 10px
}

#floating-icons .hide-pc {
    display: none
}

#form-btn {
    display: none
}

#floating-icons a {
    display: block;
    width: 40px;
    background-color: var(--secondary-color);
    margin: 8px 0;
    font-size: 1rem;
    text-align: center;
    height: 40px;
    line-height: 40px;
    transition: .5s;
    color: #fff;
    border-radius: 5px
}

#floating-icons .float-phone {
    background-color: var(--primary-color);
    color: #fff
}

#floating-icons .float-wts {
    background-color: var(--secondary-color);
    color: #fff
}

#floating-icons .float-zoom {
    background-color: var(--secondary-color02);
    color: #fff
}

.hide-me {
    opacity: 0;
    visibility: hidden
}

.show-me {
    opacity: 1;
    visibility: visible
}

@media only screen and (min-width: 992px) {
    #floating-icons {
        z-index: 201
    }

    #floating-icons a:hover {
        transform: translateY(-2px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, .5)
    }

    #floating-icons .float-phone {
        position: relative
    }
}

@media only screen and (max-width: 786px) {
    #floating-icons {
        width: auto;
        top: auto;
        background-color: #fff;
        right: 0;
        left: 0;
        padding: 2px;
        display: flex;
        bottom: 0;
        justify-content: space-around;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2)
    }

    #floating-icons .hide-pc {
        display: inline-block
    }

    #floating-icons a {
        width: 90%;
        height: 30px;
        border-radius: 5px;
        margin: 4px 2px;
        line-height: 28px;
        padding: 0;
        border: none;
        font-size: .9rem
    }

    #back-top {
        display: none
    }
}

header {
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02)
}

header.shrink-me {
    animation: headerSlide .3s ease-in;
    position: fixed;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
    background-color: #fff;
    z-index: 20;
    right: 0;
    left: 0
}

@keyframes headerSlide {
    from {
        transform: translateY(-50px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@media only screen and (min-width: 1200px) {
    header {
        padding: 0 30px
    }
}

@media only screen and (min-width: 1400px) {
    header {
        padding: 0 80px
    }
}

.header-section-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.logo {
    order: 2;
    position: absolute;
    left: 50%;
    transform: translatex(-50%)
}

.logo img {
    height: 60px;
    width: auto;
    padding: 15px 0;
    display: block
}

header.shrink-me .logo img {
    height: 50px;
    padding: 10px 0
}

@media only screen and (min-width: 992px) {
    .logo {
        flex-grow: 0;
        order: 0;
        position: relative;
        transform: none;
        left: auto
    }

    .logo img {
        height: 60px;
        padding: 15px 0
    }

    header.shrink-me .logo img {
        height: 50px;
        padding: 5px 0
    }
}

.header-social {
    position: relative;
    width: auto;
    text-align: right;
    float: right;
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    align-self: stretch
}

.header-social ul {
    display: inline-block;
    list-style: none;
    margin: 0 -5px;
    padding: 0
}

.header-social ul li {
    display: block;
    float: left;
    margin: 2px 7px
}

.header-social i:hover {
    color: var(--primary-color)
}

@media only screen and (min-width: 992px) {
    .header-social {
        font-size: .9rem;
        padding: 5px 0
    }
}

.header-side {
    display: flex;
    align-items: center;
    margin-right: -10px
}

.header-search {
    display: flex
}

#search-mobile {
    display: block;
    line-height: 40px;
    background: 0 0;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    outline: 0;
    position: relative;
    padding: 0
}

.searchbox {
    display: none;
    position: relative;
    padding: 0;
    margin-left: 10px
}

.show-search {
    position: absolute;
    background-color: var(--primary-color);
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    z-index: 10;
    bottom: -65px;
    left: 0;
    right: 0;
    border-radius: 3px
}

.searchbox .icon-search {
    color: var(--primary-color);
    position: relative
}

.searchbox .icon-search:hover {
    background-color: var(--secondary-color);
    color: #fff
}

.searchbox form {
    position: relative;
    display: block;
    margin: 10px;
    padding: 0;
    width: 100%
}

.searchbox form input[type=search] {
    background-color: #fff;
    width: 100%;
    height: 34px;
    border: 0;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 34px;
    color: var(--primary-color);
    transition: all .3s ease-in-out;
    text-decoration: none;
    text-transform: none;
    font-style: normal;
    padding-right: 10px;
    padding-left: 30px;
    box-shadow: none;
    outline: 0
}

.searchbox.searchbox form button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    line-height: 28px;
    background: 0 0;
    border: none;
    cursor: pointer
}

button i.icon-search.s-icon {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 26px;
    font-size: 1rem;
    border-radius: 5px;
    transition: .3s;
    color: var(--primary-color)
}

button i.icon-search.s-icon:hover {
    color: var(--secondary-color)
}

i.icon-search.s-icon.icon-cancel {
    background-color: transparent;
    font-size: 1.1rem;
    position: relative
}

@media only screen and (min-width: 1200px) {
    #search-mobile {
        padding-left: 15px
    }

    .show-search {
        right: auto;
        left: 0;
        width: 350px;
        bottom: -50px
    }

    button i.icon-search.s-icon {
        border: none;
        font-size: 1.3rem
    }

    button i.icon-search.s-icon:hover {
        background-color: transparent
    }
}

.header-buttons i {
    font-size: 1rem;
    transition: .3s
}

.header-buttons i:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 1200px) {
    .header-buttons i {
        font-size: 1.3rem;
        margin: 0 5px;
        transition: .3s
    }

    .header-buttons .langLink i {
        margin: 0 5px 0 -3px
    }

    [dir=ltr] .header-buttons .langLink i {
        margin: 0 -3px 0 5px
    }
}

.langLink {
    flex-grow: 0
}

#footer {
    background-color: #fff;
    padding-top: 20px
}

.footer-headline {
    font-size: 1.1rem;
    font-weight: 400;
    position: relative;
    margin-bottom: 30px
}

.footer-headline::after {
    position: absolute;
    content: "";
    right: 0;
    left: 15px;
    bottom: -12px;
    height: 1px;
    background-color: var(--secondary-color)
}

.footer-logo img {
    height: 30px;
    width: auto;
    max-width: 90%;
    display: block;
    margin-bottom: 15px
}

.footer-about {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 15px
}

.footer-links {
    margin: 15px 0
}

.footer-links li {
    line-height: 36px;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    position: relative;
    display: flex
}

.footer-links li a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    #footer {
        padding-top: 60px
    }

    .footer-logo img {
        height: 40px
    }

    .footer-txt {
        padding-left: 20px
    }

    .footer-headline::after {
        width: 60px;
        height: 4px
    }
}

.footer-social {
    position: relative;
    width: auto;
    text-align: right;
    float: right;
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem
}

.footer-social ul {
    display: inline-block;
    list-style: none;
    margin: 0 -5px;
    padding: 0
}

.footer-social ul li {
    float: left;
    margin: 2px 5px;
    border: 1px solid var(--primary-color);
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border-radius: 50px;
    color: var(--primary-color);
    transition: .2s
}

.footer-social li:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .footer-social {
        font-size: 1rem;
        padding: 5px 0
    }
}

[dir=ltr] .footer-social {
    text-align: left;
    float: left
}

.get-in-touch-box {
    margin: 15px 0;
    position: relative
}

.get-in-touch-box li {
    list-style-type: none;
    line-height: 2.5rem
}

.get-in-touch-box i {
    color: var(--primary-color);
    margin-left: 5px;
    font-size: 1.2rem
}

[dir=ltr] .get-in-touch-box i {
    margin: 0 5px 0 0
}

.copyright {
    line-height: 32px;
    text-align: center;
    margin-top: 20px;
    font-size: 1rem;
    padding-bottom: 60px;
    background-color: #fff;
    border-top: 1px solid var(--primary-color)
}

.copyright a {
    font-weight: 400
}

.copyright a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 1200px) {
    .copyright {
        padding: 5px 0;
        margin: 20px 0
    }

    .copyright .left {
        text-align: left
    }

    .copyright .right {
        text-align: right
    }

    [dir=ltr] .copyright .left {
        text-align: right
    }

    [dir=ltr] .copyright .right {
        text-align: left
    }
}

.banner-data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.banner-search {
    width: 100%;
    margin-top: 15px;
    border-radius: 20px;
    padding: 15px;
    background-color: var(--background-color-200)
}

.banner-search form {
    display: flex;
    flex-direction: column
}

.banner-search .form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -5px
}

.input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 0 10px;
    background-color: #fff
}

.input-group:hover {
    border-color: var(--secondary-color)
}

.input-group i {
    color: var(--background-color-500);
    margin-left: 5px;
    font-size: .9rem
}

.banner-search .form-input {
    background-color: #fff;
    width: 100%;
    height: 50px;
    line-height: 48px;
    border-radius: 5px;
    font-size: .9rem;
    color: var(--background-color-500);
    transition: all .3s ease-in-out;
    text-decoration: none;
    text-transform: none;
    font-family: Somar, sans-serif;
    font-style: normal;
    outline: 0
}

.banner-search .form-input::placeholder {
    opacity: 1
}

.banner-search .search-submit {
    font-weight: 400;
    font-size: 1.1rem;
    background-color: #fff;
    color: var(--primary-color);
    height: 40px;
    line-height: 38px;
    padding: 0 25px;
    white-space: nowrap;
    border: 1px solid var(--primary-color);
    display: inline-block;
    cursor: pointer;
    margin: 10px 2px;
    font-family: Somar, sans-serif;
    border-radius: 5px;
    text-align: center;
    transition: .2s;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3)
}

.banner-search .search-submit:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 786px) {
    .banner-search {
        margin-top: 25px;
        padding: 25px
    }

    .banner-search .form-row {
        flex-wrap: nowrap
    }

    .input-group {
        margin: 10px 5px
    }

    .banner-search .search-submit {
        height: 50px;
        line-height: 38px
    }
}

@media only screen and (min-width: 992px) {
    .banner-title {
        font-size: 2.6rem;
        font-weight: 400
    }
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px
}

.jw_dropdown {
    position: relative;
    width: 100%;
    display: inline-block;
    padding: 8px
}

.jw_dropdown_button {
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 50px;
    line-height: 48px;
    padding-right: 10px;
    padding-left: 20px;
    font-size: .85rem;
    cursor: pointer;
    background-color: #fff;
    color: var(--background-color-500);
    width: 100%;
    text-align: right;
    display: flex;
    align-items: center;
    position: relative
}

.jw_dropdown_button:hover {
    border-color: var(--secondary-color)
}

.jw_dropdown_button i {
    color: var(--background-color-500);
    margin-left: 2px
}

[dir=ltr] .jw_dropdown_button i {
    margin-left: 0;
    margin-right: 2px
}

.jw_dropdown_button i.dropbtn-icon {
    font-size: .6rem;
    color: var(--background-color-500);
    position: absolute;
    left: 10px
}

[dir=ltr] .jw_dropdown_button i.dropbtn-icon {
    left: auto;
    right: 10px
}

.jw_dropdown_button.open {
    background-color: #eee
}

.jw_dropdown_options {
    background: #fff;
    position: absolute;
    top: 40px;
    right: 0;
    z-index: -1;
    padding: 15px;
    width: 100%;
    height: 0;
    opacity: 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: all .5s ease;
    overflow: hidden;
    font-size: 1rem
}

.jw_dropdown_options.open {
    height: auto;
    opacity: 1;
    transition: all .5 ease;
    max-height: 220px;
    overflow-y: auto;
    z-index: 999
}

.jw_dropdown_options::-webkit-scrollbar {
    width: 4px
}

.jw_dropdown_options::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 10px
}

.jw_dropdown_options::-webkit-scrollbar-thumb {
    background: rgba(141, 191, 106, .7);
    border-radius: 10px
}

.jw_dropdown_options input[type=checkbox] {
    margin: 0 7px
}

.jw_dropdown_options .col-md-12 {
    padding: 1px 10px !important
}

.jw_dropdown .jw_price-input {
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 90%;
    line-height: 40px;
    padding-right: 5px;
    margin-right: 5px
}

.jw_dropdown .jw_price-input::placeholder {
    opacity: .8
}

.jw_dropdown .jw_price-lable {
    margin: 5px;
    font-size: .8rem
}

.jw_dropdown-svg {
    width: 20px;
    height: 20px;
    color: var(--background-color-500);
    margin-left: 5px;
    line-height: 50px
}

[dir=ltr] .jw_dropdown-svg {
    margin-left: 0;
    margin-right: 5px
}

.jw_select-option {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.jw_select-option:hover {
    background-color: var(--background-color-200)
}

@media only screen and (min-width: 992px) {
    .jw_price_box {
        width: 300px
    }

    .jw_dropdown {
        width: 50%
    }

    .jw_dropdown.input-full-width {
        width: 100%
    }

    .jw_dropdown_button {
        font-size: .9rem
    }
}

.project-box {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    margin: 15px 0;
    border-radius: 15px
}

.project-box .project-img {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    border-radius: 3px
}

.project-box .project-img > img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    transition: .7s
}

.project-box:hover .project-img > img {
    transform: scale(1.1)
}

.project-box .project-data {
    width: 94%;
    margin-right: 3%;
    margin-left: 3%;
    margin-top: -150px;
    margin-bottom: 25px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .15), 0 4px 6px -4px rgb(0 0 0 / .15);
    border-radius: 10px
}

.project-box .project-title {
    font-size: 1.4rem;
    line-height: 3rem;
    margin-bottom: 5px
}

.project-box .project-price {
    font-weight: 400;
    font-size: 1.2rem;
    color: #9bb73d;
    margin-left: 5px
}

.project-box .project-type {
    font-weight: 400;
    font-size: .9rem;
    margin-left: 5px
}

.project-box .project-tag {
    margin: 5px 0;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 1rem;
    background-color: var(--secondary-color);
    display: inline-block;
    color: #fff;
    font-weight: 400
}

.project-box .project-location {
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 15px;
    margin-top: 5px
}

.project-box .fav-project {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 1.5rem;
    z-index: 1;
    cursor: pointer
}

[dir=ltr] .project-box .fav-project {
    left: auto;
    right: 15px
}

.project-box .fav-project i.icon-heart-empty:hover::before {
    content: "\e803"
}

.project-box .project-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

@media only screen and (min-width: 992px) {
    .project-box .project-type {
        font-size: 1.1rem
    }

    .project-box .project-tag {
        padding: 0 10px;
        font-size: .9rem
    }
}

.project-cta {
    display: flex;
    margin: 0 -3px
}

.project-cta a {
    border-radius: 50px;
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px 3px;
    font-size: .8rem;
    transition: .3s;
    background-color: var(--primary-color);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    z-index: 1;
    position: relative;
    padding: 0 15px;
    justify-content: center
}

.project-box .project-cta a {
    width: 100%
}

.project-cta a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

.project-cta i {
    font-size: .9rem;
    margin-left: 2px;
    margin-right: -5px
}

[dir=ltr] .project-cta i {
    margin-right: 2px;
    margin-left: -5px
}

.project-cta .cta-phone {
    background-color: var(--primary-color)
}

.project-cta .cta-wts {
    background-color: var(--secondary-color)
}

.project-cta .cta-zoom {
    background-color: var(--secondary-color02)
}

@media only screen and (min-width: 992px) {
    .project-cta a {
        height: 36px;
        line-height: 34px;
        font-size: .9rem
    }

    [dir=ltr] .project-cta a {
        font-size: .8rem
    }

    .project-cta i {
        font-size: 1.1rem;
        margin-left: 5px
    }

    [dir=ltr] .project-cta i {
        margin-right: 5px;
        margin-left: -5px
    }
}

.article-box {
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    margin: 15px 0;
    overflow: hidden;
    border-radius: 15px
}

.article-box::after, .article-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: var(--primary-color);
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 2
}

.article-box::after {
    right: 0;
    transform: translate(50%, -50%) rotate(45deg)
}

.article-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: .5s
}

.article-data {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
    padding: 15px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    transition: .5s;
    border-radius: 10px
}

.article-title {
    font-weight: 400;
    font-size: 1.2rem;
    transition: .5s
}

.article-btn {
    color: var(--secondary-color);
    font-weight: 400;
    margin-top: 15px;
    align-self: flex-end;
    transition: .5s
}

.article-box:hover .article-img img {
    transform: scale(1.1)
}

.article-box:hover .article-title {
    color: var(--secondary-color)
}

.article-box:hover .article-btn {
    color: var(--primary-color);
    transform: translateX(-5px)
}

.area-box {
    width: 100%;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    transition: .2s
}

.area-img {
    width: 100%
}

.area-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: .7s
}

.area-data {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: var(--primary-color);
    font-weight: 600;
    text-align: center;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 10px;
    font-size: 1rem;
    padding: 5px 15px;
    line-height: 30px;
    display: inline-block;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    transition: .2s
}

.area-data .area-p-no {
    font-size: .9rem
}

.area-box .cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1
}

.area-box:hover img {
    transform: scale(1.1);
    opacity: .7
}

.area-box:hover .area-data {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .area-data {
        white-space: nowrap;
        font-size: 1.2rem
    }
}

.zoom-popup {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    position: absolute;
    transition: .5s ease-in-out;
    left: 50%;
    z-index: 1;
    width: 900px;
    max-width: 90%;
    top: 50px;
    transform: translateX(-50%)
}

.zoom-title {
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 15px
}

.schedule-meeting form {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: space-between;
    background-color: #f1f3f7;
    border-radius: 10px
}

.schedule-meeting .form-inside-title {
    font-weight: 400;
    font-size: .9rem;
    margin-bottom: 5px;
    padding-right: 5px
}

.schedule-meeting .input-box {
    width: 98%;
    margin: 0 1%
}

.schedule-meeting .input-box label {
    font-size: .9rem;
    margin-bottom: 5px;
    font-weight: 400
}

.schedule-meeting .comment, .schedule-meeting .form-bg {
    width: 100%;
    padding: 0 15px;
    height: 40px;
    line-height: 38px;
    color: var(--primary-color);
    display: block;
    font-family: Somar;
    font-size: .85rem;
    margin-bottom: 15px;
    border: 1px solid silver;
    font-weight: 400;
    background-color: #fff;
    border-radius: 10px
}

.schedule-meeting .comment {
    height: 100px
}

.schedule-meeting .search-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-position: 2%;
    background-repeat: no-repeat;
    color: var(--primary-color)
}

[dir=ltr] .schedule-meeting .search-select {
    background-position: right 2%
}

.schedule-meeting .comment::placeholder, .schedule-meeting .form-bg::placeholder {
    opacity: .7
}

.schedule-meeting .submit {
    margin: 15px 0;
    background-color: var(--primary-color);
    line-height: 32px;
    padding: 0 20px 3px;
    color: #fff;
    font-size: 1rem;
    border: 0;
    transition: .5s;
    border-radius: 10px;
    font-family: Somar, sans-serif;
    align-self: flex-end
}

.schedule-meeting .submit:hover {
    cursor: pointer;
    background-color: var(--secondary-color)
}

.schedule-meeting .radio-box {
    display: flex;
    overflow-x: auto;
    width: 100%;
    list-style-type: none;
    padding-right: 0;
    margin-bottom: 15px
}

.schedule-meeting .radio-box [type=radio] {
    display: none
}

.schedule-meeting .radio-box label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 5px 10px;
    width: 100%;
    background-color: #fff;
    color: var(--primary-color);
    font-size: .9rem;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid #dadada;
    transition: .2s
}

.schedule-meeting .radio-box input:checked ~ label, .schedule-meeting .radio-box label:hover {
    background-color: var(--secondary-color02);
    border-color: var(--secondary-color02);
    color: var(--primary-color)
}

.schedule-meeting .radio-box li {
    margin: 0 5px;
    flex: 0 0 100px
}

@media only screen and (min-width: 992px) {
    .zoom-popup {
        top: 50%;
        transform: translate(-50%, -50%)
    }

    .schedule-meeting .input-box {
        width: 48%;
        margin: 0 1%
    }

    .schedule-meeting .search-select {
        width: 60%
    }

    .schedule-meeting .submit {
        margin-top: 50px;
        margin-bottom: 0
    }
}

.headSection {
    background: #fff;
    padding: 40px 0 0
}

.tab_target {
    display: none !important
}

.tab_target.current {
    display: block !important
}

.banner {
    padding: 20px 0
}

.banner-headline {
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center
}

.s-color {
    color: var(--secondary-color);
    margin-left: .6rem;
    display: inline-block
}

[dir=ltr] .s-color {
    margin-left: 0;
    margin-right: .6rem
}

.search-title {
    font-size: 1.2rem;
    margin-top: 5px;
    text-align: center
}

.banner-img {
    display: flex;
    justify-content: center;
    direction: rtl;
    text-align: right
}

.banner-img .banner-column {
    display: flex;
    flex-direction: column;
    max-height: 590px;
    margin: 0 2px
    
}

.banner-img .banner-column img {
    width: 100%;
    height: auto;
    margin: 2px 0;
    display: block;
    transition: .2s
}

.banner-img .banner-column .banner-img-style01 {
    transform: translateY(-7%)
}

.banner-img .banner-column .banner-img-style02 {
    transform: translate(50%, -25%)
}
.banner-img .banner-column .banner-img-style03 {
    transform: translate(13%, -25%)
}

.banner-img .banner-column .banner-img-style04 {
    transform: translate(-19%, -48%);
    width: 82%;
}
.banner-img .banner-column .banner-img-style05 {
    transform: translate(66%, -33%);
    width: 211%;

}
.banner-img .banner-column img:hover {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6))
}

@media only screen and (min-width: 992px) {
    .banner {
       padding-top: 60px;
        padding-bottom: 40px
    }

    .banner-headline {
        font-size: 2.2rem;
        text-align: inherit
    }

    .search-title {
        font-size: 1.4rem;
        margin-top: 15px;
        text-align: inherit
    }

    .banner-img {
        width: 63%;
        margin: auto
    }

    [dir=ltr] .banner-img {
        margin-right: 0;
        margin-left: 10%
    }
}

.featured-slider {
    width: 100%;
    padding-bottom: 40px;
    margin: 0
}

.featured-slider .slick-next i::before, .featured-slider .slick-prev i::before {
    line-height: normal
}

.featured-slider .slick-next, .featured-slider .slick-prev {
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    z-index: 1;
    font-size: 16px;
    width: 40px;
    height: 40px;
    text-align: center;
    padding: 0;
    transition: .5s;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 50px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-115%)
}

.featured-slider .slick-prev {
    transform: translateX(15%)
}

.featured-slider .slick-next:hover, .featured-slider .slick-prev:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 1200px) {
    .featured-slider {
        padding: 0;
        margin: auto
    }

    .featured-slider .slick-next, .featured-slider .slick-prev {
        top: 50%;
        left: -45px;
        border-radius: 20px;
        transform: translateY(-50%)
    }

    .featured-slider .slick-prev {
        left: auto;
        right: -45px
    }
}

ul.project-tabs {
    list-style: none;
    color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center
}

ul.project-tabs li {
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 2px 10px;
    cursor: pointer;
    margin: 5px;
    font-size: 1rem;
    border-radius: 5px
}

ul.project-tabs li.current, ul.project-tabs li:hover {
    background-color: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color)
}

@media only screen and (min-width: 786px) {
    ul.project-tabs li {
        padding: 2px 35px;
        font-size: 1.1rem;
        margin: 5px 10px
    }
}

.developers {
    padding-bottom: 20px;
    background-color: #fff
}

.developers .headline {
    margin-top: 20px;
    margin-bottom: 0
}

.developers hr {
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    opacity: .5
}

.all-developers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 0
}

.developer-img {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    transition: .2s;
    background-color: #fff;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .1);
    padding: 5px
}

.developer-img a {
    display: flex;
    align-items: center;
    justify-content: center
}

.developer-img img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    transition: .5s;
    display: block;
    border-radius: 10px
}

.developer-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 7px rgba(0, 0, 0, .2)
}

.all-developers .slick-next i::before, .all-developers .slick-prev i::before {
    line-height: normal
}

.all-developers .slick-next, .all-developers .slick-prev {
    position: absolute;
    background-color: transparent;
    cursor: pointer;
    z-index: 1;
    font-size: 12px;
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 0;
    top: auto;
    bottom: -15px;
    left: calc(50% + 4px);
    transition: .2s;
    color: var(--primary-color);
    border: none;
    border-radius: 20px
}

.all-developers .slick-next {
    left: calc(50% - 40px)
}

.all-developers .slick-next:hover, .all-developers .slick-prev:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .developer-img img {
        height: 120px
    }

    .all-developers .slick-next, .all-developers .slick-prev {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        left: -35px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%)
    }

    .all-developers .slick-prev {
        left: auto;
        right: -35px
    }
}

.recent-articles {
    position: relative
}

.recent-articles .left-bg {
    display: none
}

.recent-articles .right-bg {
    display: none
}

@media only screen and (min-width: 992px) {
    .recent-articles {
        padding-bottom: 150px
    }

    .recent-articles .left-bg {
        display: inline-block;
        position: absolute;
        top: 50px;
        left: 0;
        height: 150px;
        width: auto
    }

    .recent-articles .right-bg {
        display: inline-block;
        position: absolute;
        bottom: 50px;
        right: 0;
        height: 150px;
        width: auto
    }

    [dir=ltr] .recent-articles .left-bg {
        left: auto;
        right: 0
    }

    [dir=ltr] .recent-articles .right-bg {
        right: auto;
        left: 0
    }
}

.contact-us .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.contact-img {
    width: 100%;
    display: flex;
    justify-content: center
}

.contact-img img {
    display: block;
    width: 80%;
    max-width: 400px;
    height: auto
}

.contact-form {
    border-radius: 20px;
    padding: 25px;
    background-color: var(--background-color-200)
}

.contact-form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.contact-form .comment, .contact-form .form-bg {
    width: 100%;
    padding: 0 10px;
    height: 50px;
    line-height: 48px;
    color: var(--text-color);
    display: block;
    font-family: Somar, sans-serif;
    font-size: 1.1rem;
    border: 1px solid #c6c6c6;
    background-color: #fff;
    border-radius: 5px;
    margin: 10px 0
}

.contact-form .comment {
    width: 100%;
    height: 150px
}

.contact-form .comment::placeholder, .contact-form .form-bg::placeholder {
    opacity: .9
}

.contact-form .submit {
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #fff;
    color: var(--primary-color);
    height: 50px;
    line-height: 48px;
    padding: 0 25px;
    white-space: nowrap;
    border: 1px solid var(--primary-color);
    display: inline-block;
    cursor: pointer;
    margin: 10px 2px;
    font-family: Somar, sans-serif;
    border-radius: 5px;
    text-align: center;
    transition: .2s;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3)
}

.contact-form .submit:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .contact-form {
        width: 80%;
        margin-right: 20%
    }
}

.featured-area {
    background-color: #fff;
    padding: 30px 10px
}

.featured-area .headline {
    margin-bottom: 40px
}

.featured-area .row [class^=col] {
    padding: 0 15px
}

.area-img01 {
    width: 100%
}

.area-img01 img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: .7s
}

@media only screen and (min-width: 992px) {
    .featured-area {
        padding: 60px 80px
    }

    .area-img01 img {
        width: 100%;
        height: 430px
    }

    .area-data {
        white-space: nowrap;
        font-size: 1.2rem
    }
}

.banner-img .banner-column.first {
    flex: 0 0 59%
}

.banner-img .banner-column.second {
    flex: 0 0 41%
}

.project-cta {
    display: flex;
    margin: 0 -3px
}

.project-cta a {
    border-radius: 50px;
    display: flex;
    align-items: center;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 5px 3px;
    font-size: .8rem;
    transition: .3s;
    background-color: var(--primary-color);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    z-index: 1;
    position: relative;
    padding: 0 15px;
    justify-content: center
}

.project-box .project-cta a {
    width: 100%
}

.project-cta a:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color)
}

.project-cta i {
    font-size: .9rem;
    margin-left: 2px;
    margin-right: -5px
}

[dir=ltr] .project-cta i {
    margin-right: 2px;
    margin-left: -5px
}

.project-cta .cta-phone {
    background-color: var(--primary-color)
}

.project-cta .cta-wts {
    background-color: var(--secondary-color)
}

.project-cta .cta-zoom {
    background-color: var(--secondary-color02)
}

@media only screen and (min-width: 992px) {
    .project-cta a {
        height: 36px;
        line-height: 34px;
        font-size: .9rem
    }

    .project-cta i {
        font-size: 1.1rem;
        margin-left: 5px
    }

    [dir=ltr] .project-cta i {
        margin-right: 5px
    }
}

.breadcrumbs {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: .9rem;
    line-height: 1.6rem;
    flex-wrap: wrap;
    padding: 5px 0
}

.breadcrumbs__separator {
    margin: 0 10px;
    font-size: 1.4rem;
    color: var(--secondary-color)
}

.breadcrumbs a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .breadcrumbs {
        font-size: 1rem;
        margin-top: 15px
    }
}

.project-main {
    padding-bottom: 20px;
    position: relative
}

.project-main .row {
    display: flex;
    flex-wrap: wrap
}

@media only screen and (min-width: 992px) {
    .project-main {
        padding: 20px 0;
        margin-top: 15px
    }
}

.content-box {
    padding: 15px 5px;
    overflow: hidden;
    color: var(--text-color);
    font-size: 1.1rem
}

.content-box.no-padding {
    padding: 0
}

.post-content {
    margin: 15px 0
}

.content-box .main-headline img {
    height: 3rem
}

.content-box .main-headline {
    font-size: 1.6rem
}

.content-box > * {
    max-width: 100%
}

.content-box ul {
    padding-right: 25px
}

.content-box p {
    font-size: .95rem;
    font-weight: 100
}

.content-box li {
    padding: 5px
}

.content-box h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-top: 10px;
    position: relative;
    padding-right: 10px;
    border: 1px solid var(--background-color-300);
    border-radius: 5px;
    border-right: 3px solid var(--secondary-color);
    margin-right: -5px;
    background-color: var(--background-color)
}

[dir=ltr] .content-box h2 {
    border: 1px solid var(--background-color-300);
    border-left: 3px solid var(--secondary-color);
    padding-left: 10px
}

.content-box h3 {
    color: var(--secondary-color);
    font-size: 1.6rem
}

.content-box img {
    max-width: 100%;
    height: auto;
    margin: 15px 0
}

.content-box a {
    color: var(--secondary-color);
    text-decoration: underline
}

.content-box a:hover {
    color: var(--secondary-color);
    text-decoration: none
}

.project-cta a {
    text-decoration: none;
    color: #fff;
    flex: 1
}

@media only screen and (min-width: 992px) {
    .content-box h2 {
        font-size: 1.8rem;
        margin-top: 15px
    }
}

.project-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.project-main-title {
    width: 100%
}

.project-main-title h1 {
    font-size: 1.2rem;
    margin: 5px 0
}

@media only screen and (min-width: 992px) {
    .project-main-title h1 {
        font-size: 1.6rem
    }
}

.project-details {
    width: 100%;
    display: flex;
    padding: 5px 15px;
    margin-top: -15px;
    margin-right: -15px;
    margin-bottom: 5px;
    font-size: .9rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap
}

.p-details-box {
    margin: 5px 0;
    width: 50%;
    display: flex;
    align-items: center
}

.details-img {
    margin-left: 5px;
    text-align: center
}

[dir=ltr] .details-img {
    margin-left: 0;
    margin-right: 5px
}

.details-img i {
    font-size: 1.2rem;
    display: block;
    color: var(--secondary-color)s
}

.details-txt {
    font-size: 1rem;
    display: block
}

@media only screen and (min-width: 992px) {
    .project-details {
        padding: 5px 0;
        font-size: 1rem
    }

    .p-details-box {
        margin: 0 15px;
        width: auto
    }

    .details-txt {
        font-size: 1.1rem
    }
}

.project-banner {
    position: relative;
    margin-bottom: 25px
}

#project-slider {
    cursor: grab;
    border-radius: 15px;
    overflow: hidden;
    position: relative
}

#project-slider img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block
}

#project-slider::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: linear-gradient(transparent, #000);
    opacity: .8;
    height: 100px
}

.slider-nav {
    padding: 10px;
    max-height: 100px;
    position: absolute;
    bottom: 10px;
    right: 40px;
    left: 40px
}

.slider-nav .slick-track {
    display: flex
}

.slider-nav .item-slick {
    height: 70px;
    margin: 0 5px;
    cursor: pointer;
    object-fit: cover;
    flex-grow: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .7);
    border: 3px solid rgba(255, 255, 255, .4);
    transition: .3s
}

.slider-nav .item-slick.slick-current, .slider-nav .item-slick:hover {
    border: 3px solid var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    .slider-nav {
        max-height: 100px;
        bottom: 25px;
        right: 45px;
        left: 45px
    }

    .slider-nav .item-slick {
        height: 96px;
        margin: 0 10px
    }
}

#project-slider .slick-next, #project-slider .slick-prev {
    position: absolute;
    background-color: var(--primary-color);
    cursor: pointer;
    z-index: 1;
    font-size: 12px;
    width: 30px;
    height: 80px;
    text-align: center;
    padding: 0;
    transition: .3s;
    color: #fff;
    border: none;
    border-radius: 5px;
    bottom: 16px;
    left: 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2)
}

#project-slider .slick-next {
    left: auto;
    right: 15px
}

#project-slider .slick-next:hover, #project-slider .slick-prev:hover {
    background-color: var(--secondary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    #project-slider .slick-next, #project-slider .slick-prev {
        width: 36px;
        height: 100px;
        bottom: 16px
    }
}

.banner-tags {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    margin: 0 -5px
}

.banner-tags a {
    display: inline-block;
    border-radius: 10px;
    margin: 5px;
    font-weight: 400;
    line-height: 2.2rem;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
    transition: .2s;
    font-size: .9rem
}

.banner-tag01 {
    background-color: rgba(255, 255, 255, .8);
    padding: 0 20px
}

.banner-tag02 {
    background-color: var(--secondary-color02);
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    padding: 0 20px
}

.banner-tags a:hover {
    background-color: var(--primary-color);
    color: #fff
}

@media only screen and (min-width: 992px) {
    .banner-tags a {
        font-size: 1rem
    }
}

.map-popup {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    position: absolute;
    transition: .5s ease-in-out;
    left: 50%;
    z-index: 1;
    width: 900px;
    max-width: 90%;
    top: 50px;
    transform: translateX(-50%)
}

.popup-title {
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 15px
}

.map-popup iframe {
    width: 100%
}

@media only screen and (min-width: 992px) {
    .map-popup {
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

.table-box {
    margin-bottom: 25px;
    padding-right: 15px
}

table.infotable {
    border-collapse: collapse;
    width: 100%;
    color: var(--text-color)
}

table.infotable tr {
    border-bottom: 1px solid var(--background-color-200)
}

table.infotable th.ttitle {
    font-size: .8rem;
    padding-left: 0;
    color: var(--primary-color);
    position: relative;
    width: 20%
}

table.infotable th.ttitle::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: var(--secondary-color02);
    position: absolute;
    right: -5px;
    top: 55%;
    transform: translateY(-50%)
}

table.infotable th.ttitle::before {
    content: "";
    width: 5px;
    bottom: -60%;
    position: absolute;
    right: 0;
    top: 50%;
    border-right: 1px dashed
}

table.infotable tr:last-of-type th.ttitle::before {
    border: none
}

table.infotable td, table.infotable th {
    margin: 0;
    padding: 7px 10px;
    text-align: right;
    font-size: .9rem;
    font-weight: 400
}

[dir=ltr] table.infotable td, [dir=ltr] table.infotable th {
    text-align: left
}

table.infotable a {
    text-decoration: underline;
    color: var(--text-color)
}

table.infotable a:hover {
    color: var(--secondary-color)
}

@media only screen and (min-width: 992px) {
    table.infotable th.ttitle {
        font-size: .9rem
    }

    table.infotable td {
        font-size: .95rem;
        padding: 7px 5px;
        font-weight: 100
    }

    table.infotable th.ttitle {
        font-size: 1rem;
        padding: 7px 25px
    }
}

[dir=ltr] table.infotable th.ttitle::after {
    right: auto;
    left: -5px
}

[dir=ltr] table.infotable th.ttitle::before {
    width: 1px;
    right: auto;
    left: -2px;
    border-right: 1px dashed
}

.project-facilities {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 15px
}

.facility-box {
    display: flex;
    align-items: center;
    font-size: .9rem;
    width: 50%;
    padding: 5px
}

.facility-img {
    display: contents
}

.facility-img img {
    height: 20px;
    width: 20px;
    display: block;
    margin: 0 0 5px 5px;
    object-fit: contain
}

[dir=ltr] .facility-img img {
    margin: 0 5px 5px 0
}

@media only screen and (min-width: 992px) {
    .project-facilities {
        padding: 15px
    }

    .facility-box {
        width: 33.3%;
        font-size: 1rem
    }

    .facility-img img {
        height: 30px;
        width: 30px;
        margin: 0 0 10px 10px
    }

    [dir=ltr] .facility-img img {
        margin: 0 10px 10px 0
    }
}

.project-main .schedule-meeting form {
    background-color: var(--primary-color);
    color: #fff
}

.project-main .schedule-meeting form .submit {
    background-color: var(--secondary-color);
    font-weight: 400
}

.project-main .schedule-meeting form .submit:hover {
    background-color: var(--secondary-color02)
}

.project-form {
    border-radius: 20px;
    margin-bottom: 15px;
    padding: 0 10px
}

.project-form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.project-form .comment, .project-form .form-bg {
    width: 100%;
    padding-right: 10px;
    height: 40px;
    line-height: 38px;
    color: var(--text-color);
    display: block;
    font-family: Somar, sans-serif;
    font-size: 1rem;
    border: 1px solid var(--background-color-200);
    background-color: var(--background-color-100);
    border-radius: 5px;
    margin: 10px 0
}

[dir=ltr] .project-form .comment, [dir=ltr] .project-form .form-bg {
    padding-left: 10px
}

.project-form .comment {
    width: 100%;
    height: 120px
}

.project-form .comment::placeholder, .project-form .form-bg::placeholder {
    opacity: .7
}

.project-form .submit {
    font-weight: 600;
    font-size: 1.1rem;
    background-color: #fff;
    color: var(--primary-color);
    height: 40px;
    line-height: 38px;
    padding: 0 25px;
    white-space: nowrap;
    border: 1px solid var(--primary-color);
    display: inline-block;
    cursor: pointer;
    margin: 10px 2px;
    font-family: Somar, sans-serif;
    border-radius: 5px;
    text-align: center;
    transition: .2s;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3)
}

.project-form .submit:hover {
    background-color: var(--primary-color);
    color: #fff
}

.content-box .project-form {
    background-color: var(--primary-color);
    padding: 25px
}

.content-box .project-form .submit {
    width: 150px;
    align-self: flex-end
}

.content-box .project-form .submit:hover {
    background-color: var(--secondary-color)
}

.sidebar-box {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 15px;
    color: var(--text-color);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1)
}

.sidebar-box .project-cta a {
    width: 100%
}

.sidebar-title {
    font-size: 1.6rem;
    text-align: center
}

@media only screen and (min-width: 992px) {
    .sidebar-box {
        padding: 15px
    }

    .sticky {
        position: sticky;
        top: 80px;
        margin-bottom: 25px
    }
}

.main-price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #fff
}

.main-price.hide-pc {
    border-radius: 15px;
    border: 1px solid var(--secondary-color);
    margin-bottom: 15px;
    padding: 15px
}

.main-price .main-price-box {
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--secondary-color)
}

.price-unit {
    font-size: 1rem;
    font-weight: 400
}

.main-last-update {
    background-color: var(--background-color-100);
    border-radius: 10px;
    padding: 10px;
    margin: 10px 5px
}

@media only screen and (min-width: 992px) {
    .main-price.hide-pc {
        display: none
    }
}

.side-details {
    display: flex;
    margin: 10px 0
}

.side-details .side-details-box {
    background-color: #fff;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font-size: .9rem;
    font-weight: 400;
    color: var(--secondary-color);
    justify-content: center;
    padding: 10px;
    text-align: center;
    margin: 5px;
    width: 100%
}

.side-details .big-detail {
    font-size: 1.8rem;
    font-weight: 600;
    color: #233f5a
}

.price-last-update {
    font-weight: 400;
    text-align: center
}

.author-box {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);
    border-radius: 15px
}

.author-img {
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
    width: 100px;
    height: 100px
}

.author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0
}

.author-name {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 10px;
    color: var(--primary-color)
}

a.author-name {
    color: var(--primary-color);
    text-decoration: none
}

.author-name:hover {
    color: var(--secondary-color)
}

.author-data {
    display: flex;
    flex-direction: column;
    width: 100%
}

.author-contacts ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0 -4px;
    justify-content: center
}

.author-contacts ul li {
    margin: 4px;
    color: var(--primary-color);
    padding: 0
}

.author-contacts ul li a:hover {
    color: var(--secondary-color)
}

.author-txt {
    font-size: .9rem;
    color: var(--primary-color);
    opacity: .8
}

@media only screen and (min-width: 992px) {
    .author-box {
        flex-wrap: nowrap;
        align-items: center;
        text-align: inherit
    }

    .author-img {
        margin-left: 25px
    }

    [dir=ltr] .author-img {
        margin: 0 25px 0 0
    }

    .author-name {
        font-size: 1.1rem;
        margin: 0
    }

    .author-contacts ul {
        justify-content: flex-start
    }
}

.gallery {
    margin-bottom: 25px
}

.unit-gallery {
    width: calc(100% + 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px
}

.unit-gallery * {
    transition: .5s
}

.gallery-half {
    width: 100%;
    padding: 0 7px;
    display: flex
}

.gallery-quarter {
    width: 50%;
    display: flex;
    flex-grow: 1
}

.unit-gallery-img, .unit-gallery-img-big {
    border-radius: 15px;
    width: 100%;
    overflow: hidden;
    position: relative
}

.unit-gallery-img {
    width: 50%;
    margin: 14px 7px
}

.unit-gallery-img img, .unit-gallery-img-big img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block
}

.unit-gallery-img img {
    height: 80px
}

@media only screen and (min-width: 992px) {
    .gallery {
        margin-top: 15px
    }

    .unit-gallery {
        flex-wrap: nowrap
    }

    .gallery-half {
        width: 50%;
        flex-grow: 3;
        padding: 0 10px
    }

    .gallery-quarter {
        width: 25%;
        flex-wrap: wrap;
        padding: 0 10px
    }

    .unit-gallery-img {
        width: 100%;
        margin: 20px 10px
    }

    .unit-gallery-img img {
        height: 200px
    }

    .unit-gallery-img-big {
        margin: 20px 10px
    }

    .unit-gallery-img-big img {
        height: 420px
    }

    .unit-gallery-img, .unit-gallery-img-big {
        margin: 10px 0
    }
}

@media only screen and (min-width: 992px) {
    .resize-form .project-form {
        width: 80%
    }
}

.lwptoc {
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    display: block;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
    overflow: hidden
}

.lwptoc_header {
    background-color: #fff;
    line-height: 34px;
    width: 100%;
    display: block;
    transition: .5s;
    color: var(--primary-color);
    padding: 5px 10px;
    cursor: pointer;
    transition: .5s
}

.lwptoc_header.active {
    background-color: var(--primary-color);
    color: #fff;
    transition: .5s
}

.lwptoc_items {
    padding: 0;
    height: 0;
    visibility: hidden;
    transition: .5s
}

.lwptoc_items.active {
    padding: 15px;
    height: auto;
    visibility: visible;
    transition: .5s
}

.lwptoc_items ul {
    padding: 10px 25px
}

.tax-search .jw_dropdown {
    width: 33%
}

.tax-search .input-group, .tax-search .search-submit {
    margin: 9px;
    height: 50px;
    flex: 0 0 calc(33% - 18px);
    overflow: hidden
}

.posts-search {
    padding: 10px
}

.posts-search .search-submit {
    flex: 0 0 calc(26% - 4px);
    overflow: hidden;
    padding: 0
}

.posts-search .search-filters {
    margin: 5px;
    justify-content: space-between
}

.posts-search .input-group {
    flex: 0 0 calc(74% - 4px);
    margin: 0;
    height: 50px;
    margin: 10px 2px;
    overflow: hidden
}

@media only screen and (max-width: 760px) {
    .tax-search .jw_dropdown {
        width: 50%
    }

    .tax-search .input-group, .tax-search .search-submit {
        flex: 0 0 calc(50% - 18px)
    }

    .posts-search .input-group {
        height: 40px
    }
}

.post-main-img {
    width: 100%;
    margin: 0 0 15px
}

.post-main-img img {
    width: 100%;
    height: auto;
    border-radius: 15px
}

.devBox a {
    flex-direction: column
}

.devBox b {
    font-size: 1.4rem
}

.devBox p {
    color: var(--secondary-color)
}

.boxHead {
    display: flex;
    justify-content: stretch
}

.zlink {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 7px;
    background: #f1f3f7;
    border-radius: 7px;
    margin: 5px
}

.zlink.active {
    background-color: var(--primary-color);
    color: #fff
}

.zbox {
    display: none
}

.zbox.active {
    display: block
}

.proData {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    margin: 10px 0
}

.proData .point {
    background: var(--background-color-200);
    padding: 0 5px;
    border-radius: 5px;
    font-size: .86rem;
    margin: 0 2px
}