@layer template-important, vendor, mui, template, cms, template-theme, overrides;
/* src/components/play4you/styles/style.scoped.css */
@layer template {
/* The play4you "arrow" WordPress theme: its stylesheets and the inline style blocks that carry
 * the brand colours and typography, with asset url()s on /host/play4you. */

/* ===== wp-content/themes/arrow/assets/css/fontAwesome.min.css?ver=7.0.2.css ===== */
/*!
 * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa, .fab, .fad, .fal, .far, .fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left, .fab.fa-pull-left, .fal.fa-pull-left, .far.fa-pull-left, .fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right, .fab.fa-pull-right, .fal.fa-pull-right, .far.fa-pull-right, .fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical, .fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-flip-both, .fa-flip-horizontal, .fa-flip-vertical, .fa-rotate-90, .fa-rotate-180, .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x, .fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\f952"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\f907"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\f913"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\f955"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\f91a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\f956"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\f91e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\f957"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\f941"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\f949"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active, .sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:auto;src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.eot);src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.eot%3F) format("embedded-opentype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.woff2) format("woff2"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.woff) format("woff"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.ttf) format("truetype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-brands-400.svg) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.eot);src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.eot%3F) format("embedded-opentype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.woff2) format("woff2"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.woff) format("woff"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.ttf) format("truetype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-regular-400.svg) format("svg")}.fab, .far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.eot);src:url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.eot%3F) format("embedded-opentype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.woff2) format("woff2"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.woff) format("woff"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.ttf) format("truetype"),url(/host/play4you/wp-content/themes/arrow/assets/webfonts/fa-solid-900.svg) format("svg")}.fa, .far, .fas{font-family:"Font Awesome 5 Free"}.fa, .fas{font-weight:900}
/* ===== wp-content/themes/arrow/assets/css/ttstyles.css?ver=7.0.2.css ===== */
body {
    color: #555;
    margin: 0;
    padding: 0;
    font-family: Nunito;
}
nav > div ul ul {
    z-index: 9;
}
nav > div ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.tag-sticky-2 .post-bx .post-inf {
    background-color: #fff;
    position: relative;
}
.tag-sticky-2 .post-bx .post-inf:before {
    background-color: #122136;
    content: "Sticky";
    color: #fff !important;
    position: absolute;
    right: 0;
    font-family: Nunito;
    padding: 4px 20px;
    top: 0;
    font-size: 15px;
}
.tt.post-bx.lst .post-thmb {
    width: 100%;
    text-align: center;
}
.tt.post-bx.lst,
.tt.post-bx.lst > * {
    display: block;
}
.post-bx.lst .post-thmb > a {
    float: none;
    width: 100%;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.post-bx.lst .post-inf {
    padding: 30px;
}
.pagination > li {
    float: none;
    vertical-align: middle;
}
.pagination > li.elipses {
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    color: #9f9f9f;
    padding: 0 10px;
}
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100% !important;
}
.bootstrap-select > button {
    color: #666 !important;
    font-size: 15px;
}
table {
    margin-bottom: 20px;
}
.wp-block-calendar {
    margin-top: 30px;
}
.calendar_wrap {
    width: 100%;
}
.calendar_wrap > table,
table#wp-calendar {
    width: 100%;
    background-color: #fafafa;
    text-align: center;
}
.calendar_wrap > table thead,
.wp-block-calendar table#wp-calendar th,
table#wp-calendar thead {
    background-color: #333;
    color: #fff;
}
.calendar_wrap > table thead th,
table#wp-calendar thead th {
    padding: 10px;
    text-align: center;
	font-family:Nunito;
}
.calendar_wrap > table caption,
table#wp-calendar caption {
    caption-side: top;
    text-align: center;
    background-color: #122136;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
	font-family:Nunito;
}
.calendar_wrap > table tbody td,
.calendar_wrap > table tfoot td,
table#wp-calendar tbody td,
table#wp-calendar tfoot td {
    padding: 10px 5px;
    font-size: 14px;
    border: 1px solid #f3f3f3;
	font-family:Nunito;
}
.wp-calendar-nav > span a:hover,
.wp-calendar-nav > span a:focus {
    color: #202020;
}
.wp-block-calendar table#wp-calendar tbody a,
.wp-block-calendar table#wp-calendar tfoot a {
    text-decoration: none;
}
.widget > ul ul {
    list-style: none;
}
.widget > div > ul li,
.widget > ul li {
    position: relative;
    padding-left: 15px;
    font-family: 'Nunito';
    font-weight: 600;
}
.widget > div > ul li:before,
.widget > ul li:before {
}
.widget > div > ul,
.widget > div > ul ul,
.widget > ul ul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
    width: 100%;
}
.footer-data-inr {
    margin-bottom: -50px;
}
.footer-data-inr .widget-box {
    margin-bottom: 50px;
}
.widget > h5,
.widget > h6 {
    margin-bottom: 20px;
}
.widget > div > ul li span.rss-date,
.widget > ul li span.rss-date {
    font-style: italic;
}
.tagcloud > a,
.wp-block-tag-cloud > a {
    font-size: 15px !important;
    color: #fff !important;
    padding: 10px 20px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    float: left;
    margin: 5px 5px 0 0;
    font-family: Nunito;
}
.wp-block-tag-cloud > a {
    line-height: initial;
    float: none;
}
.textwidget > p br + strong {
    margin-top: 20px;
    display: block;
    margin-bottom: -10px;
}
.aligncenter {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    clear: both;
}
.alignnone {
    display: block;
    margin: 20px auto;
    max-width: 100%;
}
.alignleft {
    float: left;
    margin: 0px 0px 20px 0;
    max-width: 100%;
}
.alignright {
    float: right;
    margin: 20px 0 20px 20px;
    max-width: 100%;
}
.pagination > li,
.wp-block-button .wp-block-button__link,
.wp-block-cover p.wp-block-cover-text,
ol li,
.elementor-text-editor p:not(:first-child),
ul li,
figcaption {
    font-family: Nunito;
}
.wp-block-button {
    margin-top: 20px;
    margin-bottom: 20px;
}
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-cover p.wp-block-cover-tex {
    color: #fff;
}
.blocks-gallery-grid .blocks-gallery-image,
.blocks-gallery-grid .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
    line-height: 23px;
}
.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    padding: 40px 50px;
}
.blog-detail-desc p.has-large-font-size,
.event-detail-desc > p[style="font-size:46px"],
.has-large-font-size {
    line-height: initial;
}
.event-detail-desc > h2 + h3,
.event-detail-desc > h3 + h4 {
    margin-top: 0;
}
form.wp-block-search {
    position: relative;
    width: 100%;
}
form.wp-block-search input {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ddd;
    font-size: 14px;
    padding: 10px 24px;
    color: #999;
    font-family: Nunito;
    height: 43px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
form.wp-block-search input {
    padding: 10px 15px;
}
form.wp-block-search button {
    position: absolute;
    background-color: transparent;
    font-size: 13px;
    right: 0;
    height: 43px;
    bottom: 0;
    padding: 0 20px;
    color: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.blog-detail-inf {
    text-align: center;
}
.blog-detail-inf > img {
    width: auto;
}
.blog-detail-inf-inr {
    text-align: initial;
}
table {
    width: 100%;
}
table td,
table th {
    font-family: Nunito;
    padding: 5px 10px;
    border: 1px solid #ddd;
}
code {
    padding: 3px 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 20px;
    background-color: #fafafa;
    color: #333;
}
br + code {
    display: block;
}
br + code + br + code {
    display: inline-block;
}
pre {
    padding: 5px;
    background-color: #fafafa;
}
.wp-block-group.has-background {
    padding: 20px;
    margin: 30px 0;
}
.page-links {
    margin-top: 30px;
    clear: both;
}
.page-links > span.page-links-title {
    background-color: transparent;
    margin-right: 10px;
}
.page-links > a,
.page-links > span:not(.page-links-title) {
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    font-family: Nunito;
    display: inline-block;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-left: 10px;
    font-weight: 700;
}
.page-links > a:focus,
.page-links > a:hover,
.page-links > span:not(.page-links-title) {
    color: #fff !important;
}
.post-password-form input:not([type="submit"]) {
    padding: 10px 20px;
    background-color: #e7e7e7;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #999;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    font-family: Nunito;
    margin-left: 15px;
}
.post-password-form input:not([type="password"]) {
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-family: Nunito;
    padding: 5px 25px;
    color: #fff;
}
.wp-block-cover p.wp-block-cover-text {
    color: #fff;
    line-height: 1.6;
}
.cnt-frm h3 + h4 {
    margin-bottom: 8px;
    color: #222;
}
.gallery-item {
    padding: 0 5px;
}
.breadcrumb > li,
.pg-tp-inr h1,
.post-inf > h4 {
    word-wrap: normal;
    word-break: break-word;
    line-height: 40px;
}
.blog-detail-inf + .blog-detail-desc {
    margin-top: 0px;
}
.row > .page {
    padding: 0 15px;
}
.woocommerce-js:not(.single) .page-content,
.woocommerce-page .page-content {
    display: inline-block;
    width: 100%;
}
.page-content {
    display: inline-block;
    width: 100%;
}
span.edit-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}
span.edit-link > a {
    color: #fff !important;
    display: inline-block;
    background-color: #333;
    font-family: Nunito;
    padding: 5px 13px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 5px;
}
.return-to-shop,
.return-to-shop a.button.wc-backward {
    margin-bottom: 0 !important;
}
.event-detail-desc > h2 + h3 {
    font-size: 36px;
}
.event-detail-desc > p + figure.wp-block-gallery {
    margin-top: 25px;
}
.block-editor-block-list__block[data-type="core/paragraph"] p {
    line-height: 30px;
}
.event-detail-desc > p + div,
.event-detail-desc > p + ol,
.event-detail-desc > p + ul,
.wp-caption a + p.wp-caption-text {
    margin-top: 15px;
}
.wp-caption-text {
    padding-top: 8px;
}
.blog-detail-desc h2 {
    margin-top: 30px;
}
.blog-detail-desc h1 + h2 {
    margin-top: 0;
}
dt + dd {
    margin-top: 5px;
}
section.related.products {
    margin-bottom: -40px;
}
.cmt-inf > h2 {
    margin-top: 30px;
}
.cmt-inf > h1 + h2 {
    margin-top: 0;
}
.is-dark-theme p a {
    color: inherit;
    text-decoration: none;
}
.is-dark-theme p {
    color: #fff;
}
.screen-reader-text {
    display: none;
}
li.blocks-gallery-item figure {
    justify-content: center !important;
}
.wp-block-image figcaption {
    line-height: 28px;
    margin-top: 10px;
    color: #888;
    font-size: 14px;
}
.blog-detail-desc div + pre {
    margin-top: 15px;
}
.search-results-page .pagination-wrap {
    float: left;
    width: 100%;
    margin: 30px 0;
}
.rspn-hdr .rsnp-mnu ul li {
    color: #fff;
    list-style: none;
}
.pst-shr-tgs .tag-clouds,
.pst-shr-tgs .tag-clouds > a {
    color: #8d8d8d;
}
.page > p:last-of-type img {
    clear: right;
}
.blog-detail-desc > p + figure.wp-block-image > img {
    margin-top: 20px;
}
.blog-detail-desc > p + figure.wp-block-image.alignnone > img {
    margin-top: 0;
}
.blog-sec.index-control {
    width: 100%;
    margin-left: 0;
}
.wp-block-column blockquote.wp-block-quote {
    margin-top: 0 !important;
}
.wp-block-column blockquote.wp-block-quote cite,
blockquote cite {
    font-size: 13px !important;
    width: 100%;
    display: block;
    color: #fff;
}
blockquote.wp-block-quote.has-text-align-right em a {
    color: #fff;
    text-decoration: underline;
}
.event-detail-desc > p + figure.wp-block-pullquote.has-background {
    margin-top: 25px;
}
figure.wp-block-image + h1 {
    margin-top: 0.67rem;
    margin-bottom: 0.67rem;
}
figure.wp-block-image + h1 + h2 {
    margin-top: 0.83rem;
    margin-bottom: 0.83rem;
}
figure.wp-block-image + h1 + h2 + h3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
figure.wp-block-image + h1 + h2 + h3 + h4 {
    margin-top: 1.33rem;
    margin-bottom: 1.33rem;
}
figure.wp-block-image + h1 + h2 + h3 + h4 + h5 {
    margin-top: 1.67rem;
    margin-bottom: 1.67rem;
}
figure.wp-block-image + h1 + h2 + h3 + h4 + h5 + h6 {
    margin-top: 2.33rem;
    margin-bottom: 2.33rem;
}
.wp-block-gallery figcaption.blocks-gallery-caption {
    width: 100%;
    text-align: center;
}
.wp-block-gallery + blockquote.wp-block-quote {
    margin-bottom: 30px !important;
}
.event-detail-desc > p + figure.wp-block-video {
    margin-top: 25px;
}
.blog-detail-desc > p:first-child + pre {
    padding: 25px;
}
.tt-posts .post-img2,
.tt-posts .post-info2 {
    max-width: 100%;
}

/* .home.blog header.style1 .logo + nav,
.single  */
header.style1 .logo + nav {
    padding-left: 4.375rem;
}
/* .home.blog nav > div > ul,
.single  */
nav > div > ul {
    flex-wrap: wrap;
}
/* .home.blog nav > div > ul > li,
.single  */
nav > div > ul > li {
    line-height: 2.1rem;
}
/* .home.blog nav > div > ul ul,
.single  */
nav > div > ul ul {
    padding-left: 0;
    list-style: none;
}
/*.tt-posts.tag-sticky-2 {*/
/*    background-color: #f9f9f9;*/
/*    padding: 1.875rem;*/
/*}*/
/*.tt-posts + .tt-posts {*/
/*    padding-top: 50px;*/
/*    border-top: 1px solid #ebebeb;*/
/*}*/
.widget ul,
.widget2 ul {
    padding-left: 0;
    list-style: none;
}
.widget ul ul,
.widget2 ul ul {
    padding-left: 1.1rem;
}
.tagcloud {
    display: inline-block;
    width: 100%;
}
.tagcloud > a,
.wp-block-tag-cloud > a {
    background-color: #222;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.widget2 ul:not(.insta-list) li.recentcomments > span.comment-author-link > a {
    padding-left: 12px !important;
}
.widget2 ul:not(.insta-list) li.recentcomments > span.comment-author-link > a:before {
    top: -7px;
}
.widget2 .srch-frm,
footer .widget .srch-frm {
    position: relative;
    width: 100%;
}
.widget2 .srch-frm input,
footer .widget .srch-frm input,
.widget2 select,
footer .widget select,
.post-detail-info select {
    width: 100%;
    background-color: #f9f9f9;
    color: #333;
    font-size: 14px;
    height: 3.16rem;
    padding: 10px 1rem;
}
.widget2 select,
footer .widget select,
.post-detail-info select {padding: 10px 15px;}
.widget2 .srch-frm button,
.widget .srch-frm button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 1rem;
    background-color: #0a993c;
    width: 2.5rem !important;
    padding: 0;
}
.widget a:hover {
    color: #FFB545;
}
.widget .srch-frm button i:hover {
	color:#000;
}
/* .widget2 > form button{
	width:auto !important;
} */
footer .widget select,
footer .widget .srch-frm input {
    background-color: #444;
    color: #fff;
}
footer .widget .srch-frm input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
footer .widget .srch-frm input::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
footer .widget .srch-frm input:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
footer .widget .srch-frm input:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
footer .calendar_wrap > table,
footer table#wp-calendar {
    background-color: #444;
}
footer .calendar_wrap > table tbody td,
footer .calendar_wrap > table tfoot td,
footer table#wp-calendar tbody td,
footer table#wp-calendar tfoot td {
    border-color: #333;
    color: #fff;
}
footer .calendar_wrap > table thead th,
footer table#wp-calendar thead th {
    border-color: #555;
}
.wp-calendar-nav > span {
    color: #ddd;
}
.widget ul:not(.cont-info-list2) li + li {
    margin-top: 10px;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.post-detail-info p.wp-block-cover-text a {
    color: #fff;
}
.wp-block-image figcaption {
    color: #666;
}
.wp-block-pullquote,
.wp-block-quote {
    border: 0 !important;
}
.wp-block-pullquote a,
.wp-block-quote a {
    color: #007fac;
    text-decoration: underline;
}
.has-large-font-size + p {
    line-height: 1.3;
}
.wp-block-latest-comments .avatar + *,
.wp-block-latest-comments__comment-avatar + * {
    width: calc(100% - 60px);
    float: left;
}
.wp-block-latest-comments .avatar + * *,
.wp-block-latest-comments__comment-avatar + * * {
    margin-left: 0 !important;
}
.wp-block-media-text {
    margin-bottom: 1.25rem;
}
.page-links > a,
.page-links > span:not(.page-links-title),
.post-password-form input:not([type="submit"]),
.post-password-form input:not([type="password"]) {
    -webkit-border-radius: 0;
    border-radius: 0;
}
.post-detail-info ul:not(.post-meta2) ul,
.post-detail-info ol:not(.post-meta2) ol,
.post-detail-info ul:not(.post-meta2) ol,
.post-detail-info ol:not(.post-meta2) ul {
    margin: 0;
}
.post-detail-img > img {
    width: auto !important;
}
.comment + .comment-respond {
    margin: 2.5rem 0 10px;
    display: inline-block;
}
.post-password-form input:not([type="submit"]) {
    background-color: #e3e3e3;
    color: #333;
    font-family: 'Nunito';
}
.post-password-form input:not([type="password"]) {
    font-family: Nunito;
    font-weight: 700;
    background-color: #222;
}
.post-info2 > h3 {
    word-wrap: break-word;
}
.cnt-frm {
    display: inline-block;
    width: 100%;
}
p + .cnt-frm,
.comments-thread + .cnt-frm,
.comments + .cnt-frm {
    margin-top: 3rem;
}
.page-links > a:focus,
.page-links > a:hover,
.page-links > span:not(.page-links-title) {
    color: #fff !important;
    background: #202020;
}
.page-links > a {
    border: 1px solid #121a37;
}
.wp-block-archives li a:hover,
.wp-block-latest-posts li a:hover {
    color: #122136;
}
.wp-block-archives li {
    list-style: none;
} 
.tagcloud > a,
 
.wp-block-tag-cloud > a {
    background-color: #121a37;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.tagcloud > a:hover,
.wp-block-tag-cloud > a:hover {
    background-color: #122136;
}
.widget2 ul li.recentcomments > span.comment-author-link > a:hover{
	color: #122136;
}
.sidebar_wrapper .widget2 ul li.recentcomments > span.comment-author-link > a {
    padding-left: 30px !important;
}

.wp-block-image + .detail-share {
    clear: both;
}
.wp-block-gallery.alignfull {margin-bottom: 30px;}
.wp-block-archives > select, .wp-block-categories > select {
  background-color: #f8f8f9;
  width: 100%;
  color: #888;
  padding: 10px;
  font-size: 1rem;
}
.post-detail > p + *:not(h1) {
    margin-bottom: 2rem;
}
.tt-posts .post-img2 {
  background-color: #f8f8f9;
  text-align: center;
}
.tt-posts .post-img2 > img,
.post-detail > img {
  width: auto !important;
}
.sidebar_wrapper .widget2 select,
.sidebar_wrapper .widget2 .srch-frm input,
.sidebar_wrapper .calendar_wrap > table,
.sidebar_wrapper table#wp-calendar,
.comment code,
.comment pre {
  background-color: #fff;
}
.widget ul ul,
.widget2 ul ul {
  margin-top: 4px;
}
.calendar_wrap > table tbody td#today a,
table#wp-calendar tbody td#today a {color: #fff;}

.single .gallery .gallery-item {overflow: initial;}
.single .gallery + h2 {margin-top: 1.875rem;}
.page-title-inner h2.mb-0 {
  word-break: break-all;
}
.no-comments {
    margin-top: 50px;
}
footer .widget ul li > a:before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
}
.topbar-links {flex-wrap: wrap;}
.topbar-links ul.children {display: none;}
.tt-block h2 {
    font-size: 1.75rem;
}
.tt-block blockquote > p {
    font-size: 1.5rem;
    line-height: 2.3rem;
}
.page-links {
    margin-top: 30px;
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 60px !important;
}
header .topbar-links > li {
    font-weight: 300;
}
.page_item_has_children ul.children {
    width: 260px;
}

footer .widget li {
    font-size: 0.9rem !Important;
}
footer .textwidget p{
	color:#bcbcbc;
}
footer .wp-calendar-nav > span a:hover, footer .wp-calendar-nav > span a:focus{
	color:#fff;
}
footer .widget nav.wp-calendar-nav{
	padding-left:0;
}

.topbar ul.sub-menu {
    display: none;
}
.widget.widget_recent_comments a {
    color: #b2b2b2;
    text-decoration: underline;
}
.widget.widget_recent_comments span a:hover, .widget.widget_recent_comments li > a:hover{
    color: #122136;
    text-decoration: underline;
}
.editted .post-box.w-100.text-center {
    background: #f8f8f9;
}
.editted .post-info > h3 {
    font-size: 1.15rem;
    line-height: 1.875rem;
    font-weight: 500;
    padding: 10px 25px 0px 25px;
}
.editted .post-info-bottom > span {
    text-align: center !important;
    margin: 0 auto;
	font-size:0.8rem;
}
.editted .post-info-bottom{
	background:#fcfcfc;
}
.editted .post-info-bottom > span, .editted .post-meta > li {
    font-size: 0.8rem;
    color: #777;
}
.editted .post-meta > li:last-child {
    border-left: 1px solid #d7d7d7;
    padding: 0px 15px;
}
.editted .post-meta > li:not(:first-child) {
    margin-left: 1rem;
}
.editted .cato{
	position:absolute;
}
.editted .cato {
    position: absolute;
    top: 20px;
    background: #122136;
    border-radius: 5px 0 5px 0;
    padding: 2px 10px;
    font-size: 0.8rem;
    color: #fff;
    left: -15px;
    overflow: visible;
}
.editted  .post-img img {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.editted .post-info-bottom {
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
}

.rspn-hdr .rspn-mdbr{
	display:none;
}

.tt-posts .post-box {margin-bottom: 1.875rem;}
.tt-posts.tag-sticky-2 .post-box::before {
  content: "Sticky Post";
  color: #fff;
  -webkit-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  top: 0;
  left: 42px;
  padding: 3px 12px;
  font-size: 14px;
}
.tt-posts .post-info > h3 + p {
    margin-top: .75rem;
    overflow-wrap: break-word;
}
.post-detail h2 {
    font-size: 2.2rem !important;
}
blockquote > p {
    font-size: 1.4rem !Important;
    line-height: 2.3rem !important;
}
th a {
    color: #122136;
	font-weight:500;
}
th a:hover {
    color: #000;
	font-weight:500;
}
@media (max-width: 600px) {
.logged-in .rspn-hdr {
    margin-top: 46px;
}
}
@media (max-width: 1080px) {
.tt-posts.tag-sticky-2 .post-box::before {
    content: "Sticky Post";
    color: #fff;
    -webkit-border-radius: 0 3px 0 0;
    border-radius: 0 3px 0 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    top: -10px;
    left: 15px;
    padding: 3px 12px;
    font-size: 14px;
}
}

@media (min-width: 570px) and (max-width: 710px) {
.post-meta li:last-child {
    display:none !important;
}
}
@media (min-width: 200px) and (max-width: 340px) {
.post-meta li:last-child {
    display:none !important;
}
}
.comments-thread .comment-detail h4.mb-0 {
    font-size: 1.4rem;
    font-weight: 700;
}
.wp-block-calendar span.wp-calendar-nav-prev {
    float: left;
}
.wp-block-calendar span.wp-calendar-nav-next {
    float: right;
}
.wp-block-calendar nav {
    padding-left: 0rem;
	margin-bottom:25px;
}
.widget select, .woocommerce-input-wrapper select.country_select, .wp-block-categories-dropdown select, aside .widget_categories select, aside .textwidget form select, aside .widget_archive select, .wp-block-archives-dropdown select, #em-booking select {

  /* make arrow and background */

  background:
    linear-gradient(45deg, transparent 50%, #122136 50%),
    linear-gradient(135deg, #122136 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 26px) calc(1em + 4px),
    calc(100% - 22px) calc(1em + 4px),
    100% 0px;
  background-size:
    5px 5px,
    5px 5px,
    3.5em 3.5em;
  background-repeat: no-repeat;

  /* styling and reset */
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  border-radius: 5px;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}

select#cat, .textwidget form select, .widget_archive select, .widget_categories select{
	 /* make arrow and background */

  background:
    linear-gradient(45deg, transparent 50%, #122136 50%),
    linear-gradient(135deg, #122136 50%, transparent 50%),
    linear-gradient(to right, #fff, #fff);
  background-position:
    calc(100% - 26px) calc(1em + 0px),
    calc(100% - 22px) calc(1em + 0px),
    100% 0px;
  background-size:
    5px 5px,
    5px 5px,
    3.5em 3.5em;
  background-repeat: no-repeat;

  /* styling and reset */
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  border-radius: 5px;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}

.wp-block-categories-dropdown select {
    border: 1px solid;
}
.wp-block-categories-dropdown select {
    border: 1px solid #d1d1d1;
    padding: 15px 15px;
}
.wp-block-latest-comments__comment-date {
    display: block;
    font-size: .75em;
    width: 100%;
}
a.wp-block-latest-comments__comment-link {
    width: 100%;
    font-size: 1.2rem;
    padding: 5px 0px 5px 0px;
}
.wp-block-latest-comments__comment-meta a:hover{
	color:#02bbce;
}
footer .widget span.wp-calendar-nav-next {
    float: right;
}
a.wp-block-latest-comments__comment-author {
    padding-right: 3px;
}
article footer.wp-block-latest-comments__comment-meta a {
    text-decoration: underline;
}
ul.wp-block-latest-posts__list li {
    margin-bottom: 15px;
    position: relative;
	padding-left:15px;
}
.wp-block-archives-list li{
	margin-bottom:10px;
}
.wp-block-archives-list li a, .wp-block-latest-posts.has-dates li a {
	position:relative;
}
.wp-block-archives-list li > a:before, .wp-block-latest-posts.has-dates li > a:before {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: -20px;
    top: 0;
}
.wp-block-archives-list {
	position:relative;
}

aside #calendar_wrap nav.wp-calendar-nav {
    padding-left: 0;
}
select#cat, .textwidget form select, .widget_archive select, .widget_categories select{
    padding: 0px 20px;
    font-family: 'Nunito';
    width: 100%;
    overflow: hidden;
    padding: 5px 10px;
    font-weight: 600;
	border:1px solid #ccc;
}
aside #calendar_wrap .wp-calendar-nav-next {
    float: right;
}
.wp-block-archives-dropdown select {
    border: 1px solid #d9d9d9;
    padding: 15px 15px;
}
.widget_calendar td#today {
    color: #fff;
}
.wp-block-cover.has-background-dim.alignleft{
	margin-top:0px;
}

.wp-block-quote cite {
    line-height: 1;
    vertical-align: middle;
    color: #fff;
    display: block;
    width: 100%;
}
.wp-block-quote.is-large p, .wp-block-quote.is-style-large p, blockquote > p, .wp-block-pullquote p, .wp-block-quote p{
	color:#fff;
}
.post-detail .wp-block-quote{
	margin-bottom:2rem;
}
.block-quote.twitter-tweet{
	margin:0px;
}
#gallery-1 {
    margin: 5px auto 5px !important;
}
.editted .post-info > h3 {
    overflow: hidden;
}

.post-detail-inner {
    margin-bottom: 80px;
}

footer .widget-title3:after, .nesletter_widget {
    background: #23BDD1;
}
.widget-box.v3 ul li.recentcomments a:before{
	content:none !important;
}
.widget-box.v3 ul li.recentcomments{
	display:block !important;
}
.widget-box.v3 ul li.recentcomments{
	color:#BB9457;
}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a {
    padding-left: 1rem;
    color: #626262;
}
.pagination li.page-item a.page-link.active{
	background:#BB9457;
	color:#fff;
}
.widget_calendar td#today, .wp-calendar-nav > span {
    color: #23BDD1;
}
span.rss-date {
    font-size: 12px;
    margin: 0 0 0 auto;
    padding-right: 22px;
}
.widget_rss .rssSummary {
    color: #959595;
    font-size: 16px;
    line-height: 1.4;
    font-weight: normal;
    padding: 0 0 15px 0;
}
.widget_search form{
	position:relative;
}
.widget_search input {
    height: 4.25rem;
    border: 2px solid #dadada;
    background-color: var(--color4);
    width: 100%;
    -webkit-border-radius: inherit;
    border-radius: inherit;
    font-size: .9375rem;
    color: #999;
    padding: 10px 4.6875rem 10px 1.875rem;
    font-family: Nunito;
}
.widget_search button {
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    font-size: 1.0625rem;
    color: #999;
    width: 4.6875rem;
	position:absolute;
}
.textwidget p strong {
    color: #898989;
}
.tagcloud > a:hover, .wp-block-tag-cloud > a:hover {
    color: #FFB545 !important;
}
cite em {
    color: #fff;
}
.wp-block-pullquote cite {
    color: #fff;
    width: 100%;
    display: block;
}
.gallery-item dt.gallery-icon:before, .gallery-item dt.gallery-icon:hover:before{
	content:none;
}
.wp-calendar-table td#today {
    color: #23BDD1;
}
.comment-respond textarea#comment {
    border: 1px solid #ccc;
    width: 100%;
    padding: 20px;
    max-height: 200px;
}
.comment-respond p.form-submit input {
    color: #fff;
}

.widget_categories ul.children, .widget_nav_menu .sub-menu {
    width: 100%;
    padding: 0px 0px 0px 0;
    margin: 0px 0px 0 15px !important;
}

.widget_categories ul.children li a, .widget_nav_menu .sub-menu li a{
	color:#aaaaaa;
}
ul {
    padding-left: 0;
}
.single-post .post-detail ul li ul, .single-post .post-detail ol li ul {
    margin-top: 5px !important;
	margin-bottom: 5px !important;
}
ol.has-avatars.has-dates.has-excerpts.wp-block-latest-comments {
    padding-left: 0;
}
a.wp-block-latest-comments__comment-link {
    color: #02BBCE;
}
.comment-reply h3.position-relative {
    font-size: 26px;
}
.wp-block-gallery li.blocks-gallery-item {
    border: 1px solid rgb(204, 204, 204, 0.46);
    padding: 10px;
}
.blocks-gallery-grid, .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.logged-in main {
    margin-top: 30px;
}

/* ===== wp-content/themes/arrow/style.css?ver=7.0.2.css ===== */
/*
Theme Name: Arrow
Theme URI: https://nautm.com/demo/arrow
Author: Nauthemes
Author URI: https://themeforest.net/user/nauthemes
Description: Arrow | Archery Club & Institution WordPress Theme
Version: 1.0.2
License URI: http://themeforest.net/licenses
License: GNU General Public License v2 or later
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: arrow
*/
/*** ======= // TABLE OF CONTENT // ============================
01- Google Fonts
02- General Variables
03- General Styling
    03.1- Paddings
    03.2- Margins
    03.3- Overlap
    03.4- Default Colors
    03.5- Gradient Colors
    03.6- Background Shape
    03.7- Z Index
    03.8- Container
    03.9- Wide Sec
    03.10- Column Gap
    03.11- Fonts Typography
    03.12- Parallax Background
    03.13- Background Layer
    03.14- Opacity
    03.15- Iframe
    03.16- Width
    03.17- Cross Browser Compatibility
    03.18- Border Radius
    03.19- Particles
    03.20- Animations
    03.21- Slick Arrow
    03.22- Slick Dots
    03.23- Social Media
04- Page Loader Style
05- Header Styles
    05.1- Dropdown
    05.2- Header Search
    05.3- Header Style 1
    05.4- Header Style 2
    05.5- Header Style 3
06- Sticky Header
07- Responsive Header
    07.1- Responsive Menu
08- Theme Button
09- Featured Area Style 1
10- Find Therapist Style 1
11- Sec Title Style 2
    11.1- Ver 2
    11.2- Ver 3
12- Services Style 1
13- Sec Title Style 1
    13.1- Ver 2
14- Services Style 2
    14.1- Ver 2
15- Quote & Facts Style
16- Facts Style 1
17- Request Consultation Style
18- Team Style 1
19- Get In Time & Method Apply Style
20- Online Portal Style
21- Products Style
22- Testimonials & Stories Style
23- Blog Style 1
24- Sponsors List Style
25- Footer Style 1
26- Bottom Bar Style 1
27- Featured Area Style 2
28- Special Style 1
    28.1- Ver 2
    28.2- Ver 3
29- About Style 2
    29.1- Ver 3
30- Live Video Session Style
31- Facts Style 2
32- Services Style 3
33- Find Therapist Style 2
34- Stories Style 1
35- Blog Style 2
36- Get Time & Request Free Consultation Style
37- Footer Style 2
38- Bottom Bar Style 2
39- Featured Area Style 3
40- Services Style 4
41- Enroll Now Style
42- Banners Style
43- About Style 3
44- Procedure Style
45- Courses Style
46- Video & Impacts Style
47- Client Reviews Style
48- Side Title Style
49- Blog Style 3
50- Footer Style 3
51- Bottom Bar Style 3
52- Page Title Style
53- Pagination Style
54- Gallery Style
    54.1- Ver 2
    54.2- Ver 3
55- Appointment Style
56- Contact Style
57- 404 Error Style
58- Search Found Style
59- Sidebar Style
60- Post Detail Style
    60.1- Blog Detail Style
    60.2- Author Box Style
    60.3- Comments Style
    60.4- Comment Reply Style
    60.5- Course Detail Style
61- Team Detail Style
62- Product Detail Style
63- Input Checkbox Styling

===================================================== ***/

/*===== General Variables =====*/
body {
  --color1: #333333;
  --color2: #353535;
  --color3: #222222;
  --color4: #f7faff;
  --color5: #07BEB8;
  --color6: #E0E0D6;
  --color7: #000814;
  --color8: #102325;
  --color9: #000c0e;
  --color10: #02262a;
  --color11: #c0a964;
  --color12: #020521;
  --color13: #e9eff8;
  --color14: #5961a4;
  --color15: #333c8f;
  --color16: #122136;
  --transition: all 0.2s cubic-bezier(0.19, 0.68, 0.49, 1.21);
  --transition2: all .3s linear;
  --curve3: 3px;
  --curve5: 5px;
  --curve10: 10px;
  --curve20: 1.25rem;
}
.bg-color1{background-color:var(--color1);}
.bg-color2{background-color:var(--color2);}
.bg-color3{background-color:var(--color3);}
.bg-color4{background-color:var(--color4);}
.bg-color5{background-color:var(--color5);}
.bg-color6{background-color:var(--color6);}
.bg-color7{background-color:var(--color7);}
.bg-color8{background-color:var(--color8);}
.bg-color9{background-color:var(--color9);}
.bg-color10{background-color:var(--color10);}
.bg-color11{background-color:var(--color11);}
.bg-color12{background-color:var(--color12);}
.bg-color13{background-color:var(--color13);}
.bg-color14{background-color:var(--color14);}
.bg-color15{background-color:var(--color15);}
.text-color1{color:var(--color1);}
.text-color2{color:var(--color2);}
.text-color3{color:var(--color3);}
.text-color4{color:var(--color4);}
.text-color5{color:var(--color5);}
.text-color6{color:var(--color6);}
.text-color7{color:var(--color7);}
.text-color8{color:var(--color8);}
.text-color9{color:var(--color9);}
.text-color10{color:var(--color10);}
.text-color11{color:var(--color11);}
.text-color12{color:var(--color12);}
.text-color13{color:var(--color13);}
.text-color14{color:var(--color14);}
.text-color15{color:var(--color15);}

strong {font-weight: 600;}

/*===== General Styling =====*/
body {overflow-x: hidden;}
body {
  margin: 0;
  font-family: Arimo;
  position: relative;
  width: 100%;
  max-width: 100%;
  color: var(--color2);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Nunito;
  color: var(--color1);
  font-weight: 900;
}
p {
  font-family: Arimo;
  color: var(--color2);
  line-height: 1.875rem;
  font-size: 1.0625rem;
}
ul li,
ol li {
  font-family: Nunito;
  color: var(--color2);
  line-height: 1.875rem;
  font-size: 1.0625rem;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus,
ins {
  text-decoration:none;
  outline:none;
}
input,
textarea,
select,
button {border: 0;}
button,
input[type="submit"],
.fileContainer,
input[type="file"] {cursor: pointer;}
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
.form-wrp fieldset p a:focus,
.page-link:focus,
.btn.focus,
.btn:focus,
.bootstrap-select .dropdown-toggle:focus {
  border-color: transparent;
  outline: none !important;
  -webkit-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}
textarea {resize: none;}

section section,
footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 100%;
  position:relative;
  width:100%;
}
section {
    width: 100%;
}
section + .elementor {width: 100%;}

/*=== Paddings ===*/
.pt-10 {padding-top: 0.625rem;}
.pb-10 {padding-bottom: 0.625rem;}
.pt-20 {padding-top: 1.25rem;}
.pb-20 {padding-bottom: 1.25rem;}
.pt-30 {padding-top: 1.875rem;}
.pb-30 {padding-bottom: 1.875rem;}
.pt-40 {padding-top: 2.5rem;}
.pb-40 {padding-bottom: 2.5rem;}
.pt-50 {padding-top: 3.125rem;}
.pb-50 {padding-bottom: 3.125rem;}
.pt-55 {padding-top: 3.4375rem;}
.pb-55 {padding-bottom: 3.4375rem;}
.pt-60 {padding-top: 3.75rem;}
.pb-60 {padding-bottom: 3.75rem;}
.pt-65 {padding-top: 4.0625rem;}
.pb-65 {padding-bottom: 4.0625rem;}
.pt-70 {padding-top: 4.375rem;}
.pb-70 {padding-bottom: 4.375rem;}
.px-70 {padding: 0 4.375rem;}
.pt-75 {padding-top: 4.6875rem;}
.pb-75 {padding-bottom: 4.6875rem;}
.pt-80 {padding-top: 5rem;}
.pb-80 {padding-bottom: 5rem;}
.pt-85 {padding-top: 5.3125rem;}
.pb-85 {padding-bottom: 5.3125rem;}
.pt-90 {padding-top: 5.625rem;}
.pb-90 {padding-bottom: 5.625rem;}
.pt-100 {padding-top: 6.25rem;}
.pb-100 {padding-bottom: 6.25rem;}
.pt-110 {padding-top: 6.875rem;}
.pb-110 {padding-bottom: 6.875rem;}
.pt-120 {padding-top: 7.5rem;}
.pb-120 {padding-bottom: 7.5rem;}
.pt-130 {padding-top: 8.125rem;}
.pb-130 {padding-bottom: 8.125rem;}
.pt-135 {padding-top: 8.4375rem;}
.pb-135 {padding-bottom: 8.4375rem;}
.pt-140 {padding-top: 8.75rem;}
.pb-140 {padding-bottom: 8.75rem;}
.pt-150 {padding-top: 9.375rem;}
.pb-150 {padding-bottom: 9.375rem;}
.pt-155 {padding-top: 9.6875rem;}
.pb-155 {padding-bottom: 9.6875rem;}
.pt-160 {padding-top: 10rem;}
.pb-160 {padding-bottom: 10rem;}
.pt-165 {padding-top: 10.3125rem;}
.pb-165 {padding-bottom: 10.3125rem;}
.pt-170 {padding-top: 10.625rem;}
.pb-170 {padding-bottom: 10.625rem;}
.pt-180 {padding-top: 11.25rem;}
.pb-180 {padding-bottom: 11.25rem;}
.pt-190 {padding-top: 11.875rem;}
.pb-190 {padding-bottom: 11.875rem;}
.pt-195 {padding-top: 12.1875rem;}
.pb-195 {padding-bottom: 12.1875rem;}
.pt-200 {padding-top: 12.5rem;}
.pb-200 {padding-bottom: 12.5rem;}
.pt-210 {padding-top: 13.125rem;}
.pb-210 {padding-bottom: 13.125rem;}
.pt-220 {padding-top: 13.75rem;}
.pb-220 {padding-bottom: 13.75rem;}
.pt-235 {padding-top: 14.6875rem;}
.pb-235 {padding-bottom: 14.6875rem;}
.pt-240 {padding-top: 15rem;}
.pb-240 {padding-bottom: 15rem;}
.pt-250 {padding-top: 15.625rem;}
.pb-250 {padding-bottom: 15.625rem;}
.pt-260 {padding-top: 16.25rem;}
.pb-260 {padding-bottom: 16.25rem;}
.pt-280 {padding-top: 17.5rem;}
.pb-280 {padding-bottom: 17.5rem;}
.pt-325 {padding-top: 20.3125rem;}
.pb-325 {padding-bottom: 20.3125rem;}
.pt-345 {padding-top: 21.5625rem;}
.pb-345 {padding-bottom: 21.5625rem;}

/*=== Margins ===*/
.mt-05 {margin-top: 5px;}
.mb-05 {margin-bottom: 5px;}
.mt-10 {margin-top: 0.625rem;}
.mb-10 {margin-bottom: 0.625rem;}
.mt-15 {margin-top: 0.9375rem;}
.mb-15 {margin-bottom: 0.9375rem;}
.mt-20 {margin-top: 1.25rem;}
.mb-20 {margin-bottom: 1.25rem;}
.mt-25 {margin-top: 1.5625rem;}
.mb-25 {margin-bottom: 1.5625rem;}
.mt-30 {margin-top: 1.875rem;}
.mb-30 {margin-bottom: 1.875rem;}
.mt-35 {margin-top: 2.1875rem;}
.mb-35 {margin-bottom: 2.1875rem;}
.mt-40 {margin-top: 2.5rem;}
.mb-40 {margin-bottom: 2.5rem;}
.mt-45 {margin-top: 2.8125rem;}
.mb-45 {margin-bottom: 2.8125rem;}
.mt-50 {margin-top: 3.125rem;}
.mb-50 {margin-bottom: 3.125rem;}
.mt-55 {margin-top: 3.4375rem;}
.mb-55 {margin-bottom: 3.4375rem;}
.mt-60 {margin-top: 3.75rem;}
.mb-60 {margin-bottom: 3.75rem;}
.mt-65 {margin-top: 4.0625rem;}
.mb-65 {margin-bottom: 4.0625rem;}
.mt-70 {margin-top: 4.375rem;}
.mb-70 {margin-bottom: 4.375rem;}
.mt-80 {margin-top: 5rem;}
.mb-80 {margin-bottom: 5rem;}
.mt-90 {margin-top: 5.625rem;}
.mb-90 {margin-bottom: 5.625rem;}
.mt-100 {margin-top: 6.25rem;}
.mb-100 {margin-bottom: 6.25rem;}
.mt-110 {margin-top: 6.875rem;}
.mb-110 {margin-bottom: 6.875rem;}
.mt-120 {margin-top: 7.5rem;}
.mb-120 {margin-bottom: 7.5rem;}

/*=== Overlap ===*/
.overlap35,
.overlap45,
.overlap65,
.overlap85,
.overlap110,
.overlap120,
.overlap140,
.overlap155,
.overlap210,
.overlap245,
.overlap340,
.overlap-35,
.overlap-45,
.overlap-60,
.overlap-65,
.overlap-85,
.overlap-90,
.overlap-105,
.overlap-110,
.overlap-115,
.overlap-120,
.overlap-145,
.overlap-210,
.overlap-150,
.overlap-340 {
  position: relative;
  z-index: 1;
}
.overlap-35 {margin-bottom: -2.1875rem;}
.overlap-45 {margin-bottom: -2.8125rem;}
.overlap-60 {margin-bottom: -3.75rem;}
.overlap-65 {margin-bottom: -4.0625rem;}
.overlap-85 {margin-bottom: -5.3125rem;}
.overlap-90 {margin-bottom: -5.625rem;}
.overlap-105 {margin-bottom: -6.5625rem;}
.overlap-110 {margin-bottom: -6.875rem;}
.overlap-115 {margin-bottom: -7.1875rem;}
.overlap-120 {margin-bottom: -7.5rem;}
.overlap-140 {margin-bottom: -8.75rem;}
.overlap-150 {margin-bottom: -9.375rem;}
.overlap-210 {margin-bottom: -13.125rem;}
.overlap-340 {margin-bottom: -21.25rem;}
.overlap35 {margin-top: -2.1875rem;}
.overlap45 {margin-top: -2.8125rem;}
.overlap65 {margin-top: -4.0625rem;}
.overlap85 {margin-top: -5.3125rem;}
.overlap110 {margin-top: -6.875rem;}
.overlap120 {margin-top: -7.5rem;}
.overlap140 {margin-top: -8.75rem;}
.overlap155 {margin-top: -9.6875rem;}
.overlap210 {margin-top: -13.125rem;}
.overlap245 {margin-top: -15.3125rem;}
.overlap340 {margin-top: -21.25rem;}

/*=== Default Colors ===*/
.bg-black {background-color: #000;}
.bg-white {background-color: #fff;}

/*=== Gradient Colors ===*/
.grad-bg1 {
  background: -moz-linear-gradient(top, rgba(247,250,255,1) 0%, rgba(247,250,255,1) 45%, rgba(247,250,255,0.85) 90%, rgba(247,250,255,0) 100%);
  background: -webkit-linear-gradient(top, rgba(247,250,255,1) 0%,rgba(247,250,255,1) 45%,rgba(247,250,255,0.85) 90%,rgba(247,250,255,0) 100%);
  background: linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(247,250,255,1) 45%,rgba(247,250,255,0.85) 90%,rgba(247,250,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7faff', endColorstr='#00f7faff',GradientType=0 );
}

.grad-bg2:before {
  background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(255,255,255,1)));
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );  
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: .003;
}

/*=== Background Shape ===*/
.lft-btm-shp {
  left: 0;
  bottom: 0;
}
.rgt-btm-shp {
  right: 0;
  bottom: 0;
}
.lft-tp-shp {
  left: 0;
  top: 0;
}
.rgt-tp-shp {
  right: 0;
  top: 0;
}

/*=== Z Index ===*/
.z1 {z-index: 1;}
.z2 {z-index: 2;}
.z3 {z-index: 3;}
.z4 {z-index: 4;}
.z5 {z-index: 5;}
.z-1 {z-index: -1;}
.z-2 {z-index: -2;}
.z-3 {z-index: -3;}
.z-4 {z-index: -4;}
.z-5 {z-index: -5;}

/*=== Container ===*/
.container {
  padding: 0;
  max-width: 73.125rem;
}

/*=== Wide Sec ===*/
.wide-sec,
.wide-sec2 {
  position: relative;
  z-index: 1;
}
.wide-sec {
  min-width: calc(100% + 19.6875rem);
  margin-left: -9.84375rem;
}
.wide-sec2 {
  min-width: calc(100% + 11.25rem);
  margin-left: -5.625rem;
}
.wide-sec3 {
  min-width: calc(100% + 6.25rem);
  margin-left: -3.125rem;
}

/*=== Column Gap ===*/
.mrg {margin: 0;}
.mrg div[class^="col"] {padding: 0;}
.mrg .row:not(.mrg) div[class^="col"] {padding: 0 .9375rem;}
.mrg2 {margin: 0 -1px;}
.mrg2 div[class^="col"] {padding: 0 1px;}
.mrg5 {margin: 0 -0.15625rem;}
.mrg5 div[class^="col"] {padding: 0 0.15625rem;}
.mrg6 {margin: 0 -0.1875rem;}
.mrg6 div[class^="col"] {padding: 0 0.1875rem;}
.mrg15 {margin: 0 -0.46875rem;}
.mrg15 div[class^="col"] {padding: 0 0.46875rem;}
.mrg20 {margin: 0 -0.625rem;}
.mrg20 div[class^="col"] {padding: 0 0.625rem;}
.mrg30 {margin: 0 -0.9375rem;}
.mrg30 div[class^="col"] {padding: 0 0.9375rem;}
.mrg10 {margin: 0 -0.3125rem;}
.mrg10 div[class^="col"] {padding: 0 0.3125rem;}
.mrg40 {margin: 0 -1.25rem;}
.mrg40 div[class^="col"] {padding: 0 1.25rem;}
.mrg45 {margin: 0 -1.40625rem;}
.mrg45 div[class^="col"] {padding: 0 1.40625rem;}
.mrg50 {margin: 0 -1.5625rem;}
.mrg50 div[class^="col"] {padding: 0 1.5625rem;}
.mrg60 {margin: 0 -1.875rem;}
.mrg60 div[class^="col"] {padding: 0 1.875rem;}
.mrg70 {margin: 0 -2.1875rem;}
.mrg70 div[class^="col"] {padding: 0 2.1875rem;}

.slick-slide:focus {outline: 0;}
.slick-slide div[class^="col"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/*=== Fonts Typography ===*/
.font-weight-hairline {font-weight: 100 !important;}
.font-weight-thin {font-weight: 200 !important;}
.font-weight-medium {font-weight: 500 !important;}
.font-weight-semibold {font-weight: 600 !important;}
.font-weight-extrabold {font-weight: 800 !important;}
.font-weight-black {font-weight: 900 !important;}
.font-style-italic {font-style: italic;}
.font-style-normal {font-style: normal;}
.letter-spacing-initial {letter-spacing: initial !important;}
.text-transform-initial {text-transform: initial !important;}

/*=== Parallax Background ===*/
.fixed-bg,
.parallax-bg {
  background-position: center;
  height:100%;
  width:100%;
  margin:0;
  position:absolute;
  left:0;
  top:0;
  z-index:-2;
}
.fixed-bg {
  background-attachment: scroll;
  background-size:cover;
}
.parallax-bg {
  background-attachment: fixed;
  background-size:contain;
}
.back-post-cntrbtm-norpet {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.back-post-cntrbtm {background-position: center bottom;}
.back-post-lftcntr {background-position: left center;}
.fixed-bg.patern-bg,
.parallax-bg.patern-bg {background-size: initial;}
.fixed-bg.bg-norepeate {
  background-size: initial;
  background-repeat: no-repeat;
}
.back-blend-soft-light {background-blend-mode: soft-light;}
.back-blend-difference {background-blend-mode: difference;}
.back-blend-screen {background-blend-mode: screen;}
.back-blend-multiply {background-blend-mode: multiply;}
.back-blend-lighten {background-blend-mode: lighten;}
.back-blend-subtract {background-blend-mode: subtract;}

/*=== Background Layer ===*/
.black-layer:before,
.white-layer:before,
.gray-layer:before,
.dark-layer:before,
.dark-layer2:before,
.blue-layer:before,
.blue-layer2:before,
.blue-layer3:before,
.thm-layer:before,
.scndry-layer:before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.black-layer:before {background-color: #000000;}
.white-layer:before {background-color:#ffffff;}
.gray-layer:before {background-color: var(--color6);}
.dark-layer:before {background-color: var(--color9);}
.dark-layer2:before {background-color: var(--color7);}
.blue-layer:before {background-color: var(--color5);}
.blue-layer2:before {background-color: var(--color12);}
.blue-layer3:before {background-color: var(--color16);}

/*=== Opacity ===*/
.opc1:before {opacity: .1;}
.opc15:before {opacity: .15;}
.opc2:before {opacity: .2;}
.opc25:before {opacity: .25;}
.opc3:before {opacity: .3;}
.opc35:before {opacity: .35;}
.opc4:before {opacity: .4;}
.opc45:before {opacity: .45;}
.opc5:before {opacity: .5;}
.opc55:before {opacity: .55;}
.opc6:before {opacity: .6;}
.opc65:before {opacity: .65;}
.opc7:before {opacity: .7;}
.opc75:before {opacity: .75;}
.opc8:before {opacity: .8;}
.opc85:before {opacity: .85;}
.opc87:before {opacity: .87;}
.opc9:before {opacity: .9;}
.opc93:before {opacity: .93;}
.opc95:before {opacity: .95;}
.opc97:before {opacity: .97;}
.opc98:before {opacity: .98;}
.opc99:before {opacity: .99;}

/*=== Iframe ===*/
iframe {
  border: 0;
  width: 100%;
}

/*=== Image ===*/
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/*=== Width ===*/
.wdth5 {width: 5%;}
.wdth10 {width: 10%;}
.wdth15 {width: 15%;}
.wdth20 {width: 20%;}
.wdth25 {width: 25%;}
.wdth30 {width: 30%;}
.wdth35 {width: 35%;}
.wdth40 {width: 40%;}
.wdth45 {width: 45%;}
.wdth50 {width: 50%;}
.wdth55 {width: 55%;}
.wdth60 {width: 60%;}
.wdth65 {width: 65%;}
.wdth70 {width: 70%;}
.wdth75 {width: 75%;}
.wdth80 {width: 80%;}
.wdth85 {width: 85%;}
.wdth90 {width: 90%;}
.wdth95 {width: 95%;}
.wdth100 {width: 100%;}
.wow {visibility: hidden;}

/*=== Cross Browser Compatibility ===*/
i,
a,
img,
input,
button,
textarea,
:before,
:after,
label,
span,
nav ul li,
.testi-nav-item,
.special-box,
.procedure-wrap > div.row > div,
.special-box-inner > *,
a.page-link,
.rsnp-mnu,
.header-search,
.sticky-menu,
.proced-box,
.minicart-dropdown
{
  -webkit-transition: var(--transition2);
  -ms-transition: var(--transition2);
  -o-transition: var(--transition2);
  transition: var(--transition2);
}

nav ul ul,
.social-links2,
.gallery-info
{
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}

a i,
button i {
  -webkit-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

/*=== Border Radius ===*/
.brd-rd20
{
  -webkit-border-radius: var(--curve20);
  border-radius: var(--curve20);
}

.brd-rd10
{
  -webkit-border-radius:var(--curve10);
  border-radius: var(--curve10);
}

.brd-rd5
{
  -webkit-border-radius: var(--curve5);
  border-radius: var(--curve5);
}

.brd-rd3
{
  -webkit-border-radius: var(--curve3);
  border-radius: var(--curve3);
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {width: 100%;}
.dropdown-menu {
  border: 0;
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.15);
  -ms-box-shadow: 0 0 10px rgba(0,0,0,.15);
  -o-box-shadow: 0 0 10px rgba(0,0,0,.15);
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  padding: 0;
}
.bootstrap-select .dropdown-menu li {line-height: initial;}
.bootstrap-select .dropdown-menu li:nth-child(2n) {background-color: #f5f5f5;}
.bootstrap-select .dropdown-menu li a {padding: 6px 1.5rem;}
.bootstrap-select .dropdown-menu li a.dropdown-item.active,
.bootstrap-select .dropdown-menu li a.dropdown-item:active,
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {color: #fff !important;}

/*=== Particles ===*/
.particles-js,
.particles-js2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*=== Animations ===*/

/*=== Pulse Animation ===*/
.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4.0625rem;
  margin-left: -4.0625rem;
  background-color: inherit;
  -webkit-animation: pluse 2s linear infinite;
  -ms-animation: pluse 2s linear infinite;
  -o-animation: pluse 2s linear infinite;
  animation: pluse 2s linear infinite;
  width: 8.125rem;
  height: 8.125rem;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  opacity: 0;
  z-index: -2;
}
.spinner:after {
  -webkit-animation: pluse 2s linear 2.3s infinite;
  -ms-animation: pluse 2s linear 2.3s infinite;
  -o-animation: pluse 2s linear 2.3s infinite;
  animation: pluse 2s linear 2.3s infinite;
  -webkit-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-webkit-keyframes pluse {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

@-ms-keyframes pluse {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

@-o-keyframes pluse {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pluse {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

/*=== Zoom Animation ===*/
.zoom-anim {
  -webkit-animation: zoom 3s linear infinite;
  -ms-animation: zoom 3s linear infinite;
  -o-animation: zoom 3s linear infinite;
  animation: zoom 3s linear infinite;
}
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-ms-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-o-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

/*=== Slick Arrow ===*/
.slick-slider > button.slick-arrow {
  height: 3.75rem;
  width: 3.75rem;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.25rem;
  position: absolute;
  z-index: 1;
}
.slick-slider:not(.feat-caro) > button.slick-arrow {
  background-color: #044552;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slick-slider.feat-caro > button.slick-arrow {
  color: #444;
  bottom: 4.375rem;
  font-size: 1.3rem;
}
.slick-slider.feat-caro > button.slick-prev {right: 7.5rem;}
.slick-slider.feat-caro > button.slick-next {right: 11.375rem;}
.slick-slider > button.slick-arrow:hover,
.slick-slider > button.slick-arrow:focus {color: #fff;}
.slick-slider:not(.feat-caro) > button.slick-prev {left: -5rem;}
.slick-slider:not(.feat-caro) > button.slick-next {right: -5rem;}

/*=== Slick Dots ===*/
.slick-slider ul.slick-dots {
  display: flex;
  margin: 0;
  list-style: none;
  justify-content: center;
  padding: 0;
}
.slick-slider.feat-caro ul.slick-dots {
  position: absolute;
  bottom: 1.875rem;
  left: 0;
  right: 0;
}
.slick-slider ul.slick-dots > li {
  line-height: 1;
  margin: 0 2.5px;
}
.slick-slider ul.slick-dots > li button {
  color: transparent;
  padding: 0;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #e4e4e4;
  height: .75rem;
  width: .75rem;
  font-size: 0;
}

/*=== Social Media ===*/
.facebook,
.facebook-hvr:hover,
.facebook-hvr:focus,
.widget-box.v2 .social-links3 > a.facebook-hvr:hover,
.widget-box.v2 .social-links3 > a.facebook-hvr:focus,
.prod-detail-meta .social-links5 > a.facebook-hvr:hover,
.prod-detail-meta .social-links5 > a.facebook-hvr:focus {
  background-color: #3b5999;
  border-color: #3b5999;
}
.twitter,
.twitter-hvr:hover,
.twitter-hvr:focus,
.widget-box.v2 .social-links3 > a.twitter-hvr:hover,
.widget-box.v2 .social-links3 > a.twitter-hvr:focus,
.prod-detail-meta .social-links5 > a.twitter-hvr:hover,
.prod-detail-meta .social-links5 > a.twitter-hvr:focus {
  background-color: #55acee;
  border-color: #55acee;
}
.google,
.google-hvr:hover,
.google-hvr:focus,
.widget-box.v2 .social-links3 > a.google-hvr:hover,
.widget-box.v2 .social-links3 > a.google-hvr:focus,
.prod-detail-meta .social-links5 > a.google-hvr:hover,
.prod-detail-meta .social-links5 > a.google-hvr:focus {
  background-color: #dd4b39;
  border-color: #dd4b39;
}
.pinterest,
.pinterest-hvr:hover,
.pinterest-hvr:focus,
.widget-box.v2 .social-links3 > a.pinterest-hvr:hover,
.widget-box.v2 .social-links3 > a.pinterest-hvr:focus,
.prod-detail-meta .social-links5 > a.pinterest-hvr:hover,
.prod-detail-meta .social-links5 > a.pinterest-hvr:focus {
  background-color: #bd081c;
  border-color: #bd081c;
}
.linkedin,
.linkedin-hvr:hover,
.linkedin-hvr:focus,
.widget-box.v2 .social-links3 > a.linkedin-hvr:hover,
.widget-box.v2 .social-links3 > a.linkedin-hvr:focus,
.prod-detail-meta .social-links5 > a.linkedin-hvr:hover,
.prod-detail-meta .social-links5 > a.linkedin-hvr:focus {
  background-color: #0077B5;
  border-color: #0077B5;
}
.youtube,
.youtube-hvr:hover,
.youtube-hvr:focus,
.widget-box.v2 .social-links3 > a.youtube-hvr:hover,
.widget-box.v2 .social-links3 > a.youtube-hvr:focus,
.prod-detail-meta .social-links5 > a.youtube-hvr:hover,
.prod-detail-meta .social-links5 > a.youtube-hvr:focus {
  background-color: #cd201f;
  border-color: #cd201f;
}
.instagram,
.instagram-hvr:hover,
.instagram-hvr:focus,
.widget-box.v2 .social-links3 > a.instagram-hvr:hover,
.widget-box.v2 .social-links3 > a.instagram-hvr:focus,
.prod-detail-meta .social-links5 > a.instagram-hvr:hover,
.prod-detail-meta .social-links5 > a.instagram-hvr:focus {
  background-color: #e4405f;
  border-color: #e4405f;
}
.vimeo,
.vimeo-hvr:hover,
.vimeo-hvr:focus,
.widget-box.v2 .social-links3 > a.vimeo-hvr:hover,
.widget-box.v2 .social-links3 > a.vimeo-hvr:focus,
.prod-detail-meta .social-links5 > a.vimeo-hvr:hover,
.prod-detail-meta .social-links5 > a.vimeo-hvr:focus {
  background-color: #8cbe0b;
  border-color: #8cbe0b;
}
.skype,
.skype-hvr:hover,
.skype-hvr:focus,
.widget-box.v2 .social-links3 > a.skype-hvr:hover,
.widget-box.v2 .social-links3 > a.skype-hvr:focus,
.prod-detail-meta .social-links5 > a.skype-hvr:hover,
.prod-detail-meta .social-links5 > a.skype-hvr:focus {
  background-color: #00AFF0;
  border-color: #00AFF0;
}
.rss,
.rss-hvr:hover,
.rss-hvr:focus,
.widget-box.v2 .social-links3 > a.rss-hvr:hover,
.widget-box.v2 .social-links3 > a.rss-hvr:focus,
.prod-detail-meta .social-links5 > a.rss-hvr:hover,
.prod-detail-meta .social-links5 > a.rss-hvr:focus {
  background-color: #f26522;
  border-color: #f26522;
}
.facebook-clr,
.facebook:hover,
.facebook:focus {color: #3b5999;}
.twitter-clr,
.twitter:hover,
.twitter:focus {color: #55acee;}
.google-clr,
.google:hover,
.google:focus {color: #dd4b39;}
.pinterest-clr,
.pinterest:hover,
.pinterest:focus {color: #bd081c;}
.linkedin-clr,
.linkedin:hover,
.linkedin:focus {color: #0077B5;}
.youtube-clr,
.youtube:hover,
.youtube:focus {color: #cd201f;}
.instagram-clr,
.instagram:hover,
.instagram:focus {color: #e4405f;}
.vimeo-clr,
.vimeo:hover,
.vimeo:focus {color: #8cbe0b;}
.skype-clr,
.skype:hover,
.skype:focus {color: #00AFF0;}
.rss-clr,
.rss:hover,
.rss:focus {color: #f26522;}

/*===== Theme Style =====*/

/*=== Page Loader Style ===*/
#preloader {
  position: fixed;
  top: 0;
  z-index: 99999;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: #fff;
}
.preloader-inner {
  height: 9.375rem;
  line-height: 9.375rem;
  width: 9.375rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  -o-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
}
.preloader-inner:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid;
  -webkit-animation: rotate 5s infinite linear;
  -ms-animation: rotate 5s infinite linear;
  -o-animation: rotate 5s infinite linear;
  animation: rotate 5s infinite linear;
	border-color:#bb9457;
}
.preloader-icon {
  display: inline-block;
  font-size: 3.75rem;
  -webkit-animation: zoom2 3s infinite linear;
  -ms-animation: zoom2 3s infinite linear;
  -o-animation: zoom2 3s infinite linear;
  animation: zoom2 3s infinite linear;
}

@-webkit-keyframes zoom2 {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes zoom2 {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  25% {
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  75% {
    -webkit-transform: rotateY(270deg);
    -ms-transform: rotateY(270deg);
    -o-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes rotate{
  0% {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  25% {
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  75% {
    -webkit-transform: rotateY(270deg);
    -ms-transform: rotateY(270deg);
    -o-transform: rotateY(270deg);
    transform: rotateY(270deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

/*===== Header Styles =====*/
header {
  position: relative;
  width: 100%;
  z-index: 9999;
}
.top-links > li,
.social-links > span,
.topbar-inner > p {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family:Nunito;
}
.topbar-inner > p {font-family: Nunito;}
.top-links > li:not(:first-child):before {
  content: "";
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 8.5px;
  width: 2px;
  height: 13px;
  opacity: .8;
}
.top-links > li:not(:first-child) {
  padding-left: 1.125rem;
  margin-left: 1rem;
}
.social-links > span {font-family: Nunito;}
.social-links > a {
  font-size: 1rem;
  color: #fff;
}
.social-links > a:not(:first-child) {
    margin-left: 1.7rem;
}
.topbar-right > a.search-btn {
  height: 3.125rem;
  width: 3.125rem;
  text-align: center;
  line-height: 3.125rem;
  font-size: 1rem;
  color: #fff;
  background-color: rgba(0,0,0,.1);
  margin:0 0 0 20px;
}
.topbar-right > a.search-btn:hover,
.topbar-right > a.search-btn:focus {color: var(--color1);}
.scndry-bg .topbar-right > a.search-btn:hover,
.scndry-bg .topbar-right > a.search-btn:focus {color: #fff;}
.topbar-right > div + a {margin-left: 2.1875rem;}
.logo-contact-inner {padding: 1.15625rem 0;}
.header-contact-info > li {
  position: relative;
  padding-left: 2.8125rem;
  font-weight: 800;
  color: #555;
  line-height: initial;
}
.header-contact-info > li:not(:first-child) {margin-left: 3.75rem;}
.header-contact-info > li > i {
  font-size: 1.875rem;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.header-contact-info > li a {
  font-weight: 700;
}
.header-contact-info > li span {
    font-size: .9375rem;
    font-weight: 600;
    padding: 0 0 4px 0;
}
.header-contact-info > li strong {
  font-weight: 700;
  color: var(--color1);
}
.header-contact-info + .header-cart {margin-left: 2.8125rem;}
.header-cart > span.cart-btn {
  line-height: 3.375rem;
  height: 3.375rem;
  width: 3.375rem;
  cursor: pointer;
  color: #3c3c3c;
  font-size: 1.25rem;
  background-color: #f6f6f6;
}
.header-cart > span.cart-btn:hover,
.header-cart > span.cart-btn:focus {color: #fff;}
.header-cart > span.cart-btn > span {
  top: -1px;
  right: -8px;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  font-family: Arimo;
  line-height: 1.125rem;
  height: 1.125rem;
  width: 1.125rem;
}
nav > div ul li {
  position: relative;
  font-size: .9375rem;
  font-weight: 600;
}
nav ul li a {display: block;}
nav > div > ul > li {
  line-height: 4.0625rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
}
nav > div > ul > li:not(:first-child):before {
  content: "";
  width: 1px;
  height: 11px;
  position: absolute;
  background-color: #d0cfcf;
  left: 0;
  top: 1.6875rem;
}
nav > div > ul > li > a {padding: 0 1.2rem;}
nav > div > ul > li.menu-item-has-children > a {padding-right: 2.3125rem;}
nav > div > ul li.menu-item-has-children > a:before {
  content: "\f107";
  position: absolute;
  right: 1.375rem;
  top: 0;
  line-height: inherit;
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
}

/*=== Dropdown ===*/
nav ul ul {
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1;
  width: 14.625rem;
  -webkit-box-shadow: 0 0 1.25rem rgba(0,0,0,.05);
  -ms-box-shadow: 0 0 1.25rem rgba(0,0,0,.05);
  -o-box-shadow: 0 0 1.25rem rgba(0,0,0,.05);
  box-shadow: 0 0 1.25rem rgba(0,0,0,.05);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
}
nav ul ul ul {
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  -o-transform-origin: left;
  transform-origin: left;
}
nav ul ul li {
  width: 100%;
  text-transform: initial;
}
nav ul ul li a {padding: 8px 1.5625rem;}
nav ul ul li + li {border-top: 1px solid #ececec;}
/* nav ul ul li:hover > a, 
nav ul ul li.active > a {background-color: #f8f8f8;} */
nav ul ul ul {
  left: 100%;
  top: 0;
}
nav ul ul li.menu-item-has-children > a:before {
  content: "\f054";
  top: 8px;
  right: 1.25rem;
  font-size: 13px;
}
nav ul ul li.menu-item-has-children > a {padding-right: 2.1875rem;}
nav ul li.menu-item-has-children:hover > ul {
  -webkit-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}
nav ul ul li.menu-item-has-children:hover > ul {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

/*=== Header Cart ===*/
.header-cart:hover > .minicart-dropdown {
  opacity: 1;
  visibility: visible;
}
.minicart-dropdown {
  position: absolute;
  right: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  width: 18.125rem;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
}
.minicart-dropdown > ul {
  display: block;
  max-height: 15.625rem;
  overflow-y: auto;
}
.minicart-dropdown > ul li {width: 100%;}
.minicart-item {
  align-items: center;
  position: relative;
  line-height: initial;
}
.minicart-item > a {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  max-width: 4.375rem;
  display: block;
  overflow: hidden;
}
.minicart-item > a + .minicart-info {
  flex: 0 0 calc(100% - 4.375rem);
  max-width: calc(100% - 4.375rem);
  padding-left: 1rem;
}
.minicart-info {padding-right: 1.125rem;}
.minicart-info > h6 {font-weight: 700;}
.minicart-dropdown > ul li:not(:first-child) {
  margin-top: 1.25rem;
  border-top: 0;
}
.minicart-info .price {
  font-size: 14px;
  margin-top: 5px;
  display: inline-block;
  font-family: Nunito;
  font-weight: 600;
}
.btns-total {
  border-top: 1px solid #e2e2e2;
  margin-top: 1.25rem;
  padding-top: .9375rem;
}
.btns-total > span {
  color: var(--color1);
  display: block;
  font-size: 1rem;
}
.btns-total > span span {
  display: inline-block;
  margin-left: 5px;
  font-size: inherit;
}
header.style1 .btns-wrap2 > a.thm-btn {
  padding: 9px 8px 8px;
  line-height: initial;
  font-size: 12px;
  width: calc(50% - 30px);
  margin-top: .9375rem;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.btns-total .btns-wrap2 {justify-content: space-between;}
.mini-cart:hover .minicart-dropdown {
  opacity: 1;
  visibility: visible;
}
.mini-cart > a span {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--color7);
  color: var(--color8);
  font-size: 12px;
  line-height: .9375rem;
  width: .9375rem;
  height: .9375rem;
  position: absolute;
  text-align: center;
  top: -3px;
  left: -7px;
}
.minicart-info a.remove-cart {
  position: absolute;
  font-size: 14px;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*=== Header Search ===*/
.header-search {
  top: 0;
  left: 0;
  right: 0;
  bottom: 80%;
  z-index: 9999;
  background-color: rgba(0,0,0,.97);
  padding: 10%;
  opacity: 0;
  visibility: hidden;
}
.header-search.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
.search-close-btn {
  right: 1.255rem;
  top: 1.25rem;
  color: var(--color1);
  font-weight: 700;
  cursor: pointer;
  height: 4rem;
  line-height: 4rem;
  width: 4rem;
  text-align: center;
  font-size: 1.3rem;
  background-color: var(--color4);
}

.search-close-btn:hover,
.search-close-btn:focus,
.header-search > form button:hover,
.header-search > form button:focus {color: #fff;}

/*=== Header Style 1 ===*/
header.style1 nav {margin-bottom: -2.03125rem;}
header.style1 nav > div {line-height: 0.8;}
header.style1 nav ul li:hover > a,
header.style1 nav ul li.active > a,
header.style1 nav ul li > a:focus {color: var(--color3);}
header.style1 nav > div > ul > li:first-child > a {
  -webkit-border-radius: 0px 0 0 0px;
  border-radius: 0px 0 0 0px;
}
header.style1 nav > div > ul > li {color: #fff;}
header.style1 nav > div > ul ul {
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
header.style1 nav > div > ul ul li:first-child > a {
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
header.style1 nav > div > ul ul li:last-child > a {
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
header.style1 nav ul li:hover:before,
header.style1 nav ul li.active:before,
header.style1 nav ul li:hover + li:before,
header.style1 nav ul li.active + li:before {opacity: 0;}
header.style1 .thm-btn {
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  margin-bottom: -2.2px;
  padding: 1.34375rem 2.1875rem;
}
header.style1 .thm-btn:before,
header.style1 .thm-btn:after {background-color: #000;}

/*=== Header Style 2 ===*/
header.style2 .topbar-inner,
header.style2 .logo-contact-menu-inner {padding-left: 16.5625rem;}
header.style2 .logo.v2 {
  margin-left: -16.5625rem;
  margin-top: -3.125rem;
  margin-bottom: -.9375rem;
}
.logo.v2:before,
.logo.v2:after {
  content: "";
  position: absolute;
  left: 0;
  right:0;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  -ms-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.logo.v2:before {
  height: 2.1875rem;
  bottom: -2.15rem;
  background-color: inherit;
  right: -0.5px;
}
.logo.v2:after {
  height: 12px;
  bottom: -1.6875rem;
  -webkit-transform: rotate(11deg);
  -ms-transform: rotate(11deg);
  -o-transform: rotate(11deg);
  transform: rotate(11deg);
  right: -1px;
  left: -5px;
}
.logo.v2 a {padding: 1.55rem 1.5rem;}
header.style2 .container {max-width: 96.875rem;}
header.style2 nav > div > ul > li > a {padding: 0;}
header.style2 nav > div > ul > li:not(:first-child):before {display: none;}
header.style2 nav > div > ul > li {
  color: var(--color3);
  font-family: Nunito;
  line-height: 5.3125rem;
}
header.style2 nav > div > ul > li:not(:first-child) {margin-left: 2.1875rem;}
header.style2 nav > div > ul > li.menu-item-has-children > a {padding-right: .9375rem;}
header.style2 nav > div > ul > li.menu-item-has-children > a:before {right: 0;}
.header-contact {
  font-family: Nunito;
  font-size: 1.0625rem;
  padding-left: 2.8125rem;
  font-weight: 600;
  line-height: 1.96875rem;
}
.header-contact > i {
  font-size: 1.875rem;
  line-height: 1;
  left: 0;
  top: 0;
}
.header-contact + a {margin-left: 4.375rem;}

/*=== Header Style 3 ===*/
.top-noti {padding: 9px 0;}
.scndry-bg p,
.thm-bg p {color: #fff;}
.top-noti p {
  font-size: 14px;
  font-family: Nunito;
  font-weight: 500;
  letter-spacing: .2px;
  margin:0px;
}
.top-noti p a {
  font-weight: 700;
  color: inherit;
}
header.style3 .topbar-inner,
header.style3 .logo-menu-inner {padding-left: 15.9375rem;}
.topbar .header-contact {
  font-size: .9375rem;
  line-height: 1.375rem;
  padding-left: 2.1875rem;
}
.bg-color11 .header-contact,
.bg-color11 .topbar-right > a.search-btn:hover,
.bg-color11 .topbar-right > a.search-btn:focus {color: #fff;}
.topbar .header-contact > i {font-size: 1.375rem;}
.topbar-right > ul + div {margin-left: 3.25rem;}
header.style3 .logo.v2 {
  margin-left: -15.9375rem;
  margin-top: -4.8rem;
  margin-bottom: -.9375rem;
}
header.style3 nav > div > ul > li {
  line-height: 5.625rem;
  font-size: 1.0625rem;
  text-transform: initial;
  color: var(--color1);
}
header.style3 nav > div > ul > li > a {padding: 0; font-family:'Saira';}
header.style3 nav > div > ul > li:not(:first-child) {margin-left: 3.125rem;}
header.style3 nav > div > ul > li:before {display: none;}
header.style3 nav > div > ul > li.menu-item-has-children > a {padding-right: .9375rem;}
header.style3 nav > div > ul > li.menu-item-has-children > a:before {right: 0;}
header.style3 nav > div > ul > li > a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.4375rem;
  height: 3px;
  width: 0;
  background-color: #000;
}
header.style3 nav > div > ul > li:hover > a:after,
header.style3 nav > div > ul > li.active > a:after,
header.style3 nav > div > ul > li > a:focus:after {
  opacity: 1;
  width: 1.75rem;
}

/*===== Sticky Header =====*/
.sticky-menu {
  position: fixed;
  top: -5rem;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 9999;
  -webkit-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  -ms-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  -o-box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  box-shadow: 0 0 1.25rem rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
}
.sticky-menu nav > div > ul > li {line-height: 5rem;}
.sticky-menu nav > div > ul > li::before {
  top: 50%;
  margin-top: -5.5px;
}
.sticky-menu nav > div > ul > li:hover > a,
.sticky-menu nav > div > ul > li.active > a,
.sticky-menu nav > div > ul > li > a:focus {color: #fff;}
.sticky-menu nav ul li:hover:before,
.sticky-menu nav ul li.active:before,
.sticky-menu nav ul li:hover + li::before,
.sticky-menu nav ul li.active + li::before {opacity: 0;}
.sticky-menu.v2 nav > div > ul > li:hover > a,
.sticky-menu.v2 nav > div > ul > li.active > a,
.sticky-menu.v2 nav > div > ul > li > a:focus {background-color: transparent;}
.sticky-menu.v2 nav > div > ul > li:hover:before,
.sticky-menu.v2 nav > div > ul > li.active:before,
.sticky-menu.v2 nav ul li:hover + li::before,
.sticky-menu.v2 nav ul li.active + li::before {opacity: 1;}

/*===== Responsive Header =====*/
.rspn-hdr {
  display: none;
  width: 100%;
  position: relative;
  z-index: 999;
}
.rspn-mdbr {
  background-color: #252a2c;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.rspn-scil {display: inline-flex;}
.rspn-scil > a {
  background-color: rgba(255,255,255,.05);
  height: 2.5rem;
  width: 2rem;
  line-height: 2.5rem;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.rspn-scil > a:not(:first-child) {margin-left: 1px;}
.rspn-srch {
  height: 2.5rem;
  position: relative;
  flex: 0 0 calc(100% - 8.1875rem);
  max-width: calc(100% - 8.1875rem);
}
.rspn-srch > input {
  background-color: transparent;
  color: #fff;
  font-size: 13px;
  height: 100%;
  padding: 0 1.875rem 0 8%;
  width: 100%;
}
.rspn-srch > button {
  background-color: transparent;
  color: #999;
  font-size: 13px;
  height: 100%;
  position: absolute;
  right: 0;
}
.lg-mn {
  padding: 1.125rem 5rem 1.125rem .9375rem;
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.rspn-cnt {display: inline-block;}
.rspn-cnt > span {
  color: #777;
  display: inline-block;
  margin: 5px .5rem;
}
.rspn-cnt > span i {margin-right: .5rem;}
.rspn-mnu-btn {
  background-color: var(--color1);
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  right: 1.25rem;
  text-align: center;
  top: 50%;
  width: 2.5rem;
  margin-top: -1.25rem;
}

/*=== Responsive Menu ===*/
.rsnp-mnu {
  background-color: #0c0c0c;
  bottom: 0;
  opacity: 0;
  padding: 5.3125rem 2.5rem 3.125rem;
  position: fixed;
  right: -21.875rem;
  top: 0;
  visibility: hidden;
  z-index: 99999;
  max-width: 21.875rem;
  width: 100%;
}
.rsnp-mnu.slidein {
  opacity: 1;
  right: 0;
  visibility: visible;
}
.rspn-mnu-cls {
  background-color: #303030;
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  height: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  right: .75rem;
  text-align: center;
  top: .75rem;
  width: 2.5rem;
}
.rsnp-mnu > ul {
  display: inline-block;
  list-style: outside none none;
  margin-bottom: 0;
  padding-left: 0;
  overflow-y: auto !important;
  width: 100% !important;
}
.rsnp-mnu > ul > li {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  width: 100%;
}
.rsnp-mnu > ul > li a {
  color: inherit;
  display: block;
}
.rsnp-mnu > ul > li:not(:first-child) {margin-top: 1.25rem;}
.rsnp-mnu > ul ul {
  display: none;
  margin-bottom: 0;
  padding-left: 1.25rem;
  opacity: 1;
  position: static;
  visibility: visible;
}
.rsnp-mnu ul li.menu-item-has-children.active > a {margin-bottom: 15px;}
.rsnp-mnu > ul li.menu-item-has-children > a::before {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 0;
  top: 0;
  color: inherit;
  font-weight: 900;
}
.rsnp-mnu > ul ul > li {
  color: #a4a4a4;
  font-size: 1rem;
  position: relative;
  text-transform: initial;
  width: 100%;
  font-weight: 400;
}
.rsnp-mnu > ul ul > li:not(:first-child) {margin-top: .75rem;}

/*===== Theme Button =====*/
.thm-btn {
  font-size: .9375rem;
  color: #000;
  font-weight: 600;
  font-family: Nunito;
  text-transform: uppercase;
  padding: 1.09375rem 1.8125rem;
  line-height: initial;
  text-align: center;
  z-index: 1;
}
.thm-btn.v2 {color: #fff;}
.thm-btn i {
  font-size: 1rem;
  margin-right: 10px;
}
.thm-btn:before,
.thm-btn:after {
  content: "";
  top: 0;
  bottom: 0;
  width: 20%;
  opacity: 0;
  background-color: #000;
  position: absolute;
  z-index: -1;
}
.thm-btn:before {left: 0;}
.thm-btn:after {right: 0;}
.thm-btn:hover:before,
.thm-btn:hover:after,
.thm-btn:focus:before,
.thm-btn:focus:after {
  opacity: 1;
  width: 100%;
}
.thm-btn:hover,
.thm-btn:focus,
.thm-btn.bg-black {color: #fff;}
.thm-layer .thm-btn.scndry-bg:before,
.thm-layer .thm-btn.scndry-bg:after,
.scndry-layer .thm-btn.thm-bg:before,
.scndry-layer .thm-btn.thm-bg:after,
.thm-bg .thm-btn.scndry-bg:before,
.thm-bg .thm-btn.scndry-bg:after,
.scndry-bg .thm-btn.thm-bg:before,
.scndry-bg .thm-btn.thm-bg:after {background-color: #000;}

/*===== Featured Area Style 1 =====*/
.feat-item {max-height: 43.4375rem;}
.feat-img:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
}
.feat-img {
  min-height: 43.4375rem;
  max-height: 43.4375rem;
  background-size: cover;
  background-position: center;
  z-index: 1;
  -webkit-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
}
.slick-active .feat-img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.feat-cap-wrap {
  max-width: 73.125rem;
  left: 50%;
  bottom: 6.1875rem;
  z-index: 1;
  padding-right: 4.375rem;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.feat-cap {max-width: 35rem;}
.feat-cap > i {
  font-size: 5.3125rem;
  line-height: 1;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.feat-cap > i + span {margin-top: 1.25rem;}
.feat-cap > span {
  font-size: 1.375rem;
  font-weight: 500;
  font-family: Nunito;
}
.feat-cap > span + h2 {margin-top: 8px;}
.feat-cap > h2 {
  font-size: 2.875rem;
  line-height: 3.75rem;
  color: #fff;
  font-weight: 700;
}
.feat-cap > h2 + p {margin-top: 1.25rem;}
.feat-cap > p {
  font-size: 1.125rem;
  color: #f3f3f3;
}

/*===== Find Therapist Style 1 =====*/
.find-therapist-form-wrap {
  padding: 3.375rem 3.125rem 2.75rem;
  -webkit-box-shadow: 0 3px 1rem rgba(0,0,0,.1);
  -ms-box-shadow: 0 3px 1rem rgba(0,0,0,.1);
  -o-box-shadow: 0 3px 1rem rgba(0,0,0,.1);
  box-shadow: 0 3px 1rem rgba(0,0,0,.1);
}
.title-wrap {
  padding-bottom: 1.25rem;
  margin-bottom: 1.875rem;
}
.line-shape1:before {
  background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-shape1.png);
  width: 4.375rem;
}
.title-wrap:before {
  content: "";
  height: 16px;
  position: absolute;
  background-size: contain;
  background-position: center;
  bottom: 0;
  left: 50%;
  margin-left: -2.1875rem;
	background-repeat:no-repeat;
}
.title-wrap > span {
  font-size: 1.125rem;
  font-family: Nunito;
  color: var(--color3);
  font-weight: 600;
}
.title-wrap > span + h2 {margin-top: 3px;}
.title-wrap > h2 {
  font-size: 2.25rem;
  color: var(--color3);
  font-weight: 800;
}
.find-therapist-form-wrap form input:not([type="submit"]) {
  width: 100%;
  margin-bottom: 5px;
  height: 3.875rem;
  font-size: 1rem;
  color: #6f6f6f;
  font-family: Nunito;
  font-weight: 600;
  padding: 1rem 2.5rem;
}
.find-therapist-form-wrap form button {
  width: 100%;
  padding: 1.25rem 2.1875rem;
}
.find-therapist-cap {padding-left: 1.75rem;}
.find-therapist-cap > p {
  font-family: Nunito;
  font-weight: 600;
  color: var(--color3);
  font-size: 1.125rem;
  border-bottom: 1px solid #e7e7e7;
  padding: 2.5rem 0 1.5625rem;
}
.find-therapist-cap > p span {margin-left: 7px;}
.find-therapist-cap > p span i {
  border: 1px solid #e2e2e2;
  height: 2.625rem;
  width: 2.625rem;
  display: inline-block;
  text-align: center;
  padding: 4px;
  margin-right: 6px;
}

/*===== Sec Title Style 2 =====*/
.sec-title2-inner {max-width: 60%;}
.sec-title2-inner > span {
  text-transform: uppercase;
  border-bottom: 1px solid;
  font-family: Nunito;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 1px;
}
.sec-title2-inner > span + h2 {margin-top: 1.4375rem;}
.sec-title2-inner > h2 {
    font-size: 2.5rem;
    line-height: 3.15rem;
}
.sec-title2-inner > h2 + p {margin-top: 10px;}
.sec-title2-inner > p {
  font-size: 1.1875rem;
  line-height: 2.25rem;
}
.blue-layer .sec-title2-inner > h2,
.blue-layer .sec-title2-inner > p,
.blue-layer2 .sec-title2-inner > h2,
.blue-layer2 .sec-title2-inner > p,
.blue-layer3 .sec-title2-inner > h2,
.blue-layer3 .sec-title2-inner > p {color: #fff;}

/*=== Ver 2 ===*/
.sec-title2.v2 .sec-title2-inner > h2 {
  font-weight: 800;
  font-size: 2.8125rem;
}
.sec-title2.v2 .sec-title2-inner > p {
    font-size: 1.05rem;
    line-height: 1.7rem;
}

/*=== Ver 3 ===*/
.sec-title2.v3 .sec-title2-inner > span {
  font-size: 1.125rem;
  font-weight: 800;
}
.sec-title2.v3 .sec-title2-inner > span + h2 {margin-top: 0;}
.sec-title2.v3 .sec-title2-inner > h2 {font-size: 2.8125rem;}
.sec-title2.v3 .sec-title2-inner > h2 + p {margin-top: 3px;}
.sec-title2.v3 .sec-title2-inner > p {
    font-size: 1.05rem;
    line-height: 1.6rem;
    color: #555;
}

/*===== Services Style 1 =====*/
.sec-title2 + .serv-wrap {margin-top: 4.6875rem;}
.serv-wrap {margin-bottom: -2.5rem;}
.serv-box {margin-bottom: 2.5rem;}
.serv-box > i {
  font-size: 4.375rem;
  line-height: 1;
}
.serv-box:hover > i {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.serv-box > i + .serv-box-inner {
  flex: 0 0 calc(100% - 4.375rem);
  max-width: calc(100% - 4.375rem);
  padding-left: 1.5625rem;
}
.serv-box-inner {padding-bottom: 1.125rem;}
.serv-box-inner:before,
.serv-box-inner:after {
  content: "";
  width: 3.125rem;
  position: absolute;
  bottom: 0;
  background-color: #000;
}
.serv-box:hover .serv-box-inner:before {width: 1.6875rem;}
.serv-box-inner > h4 {font-size: 1.625rem;}
.serv-box-inner > h4 + p {margin-top: 2px;}
.serv-box-inner > p {font-size: 1.125rem;}
.serv-box-inner:before {height: 4px;}
.serv-box-inner:after {
  width: 0;
  height: 2px;
  bottom: 1px;
}
.serv-box:hover .serv-box-inner:after {width: 4.375rem;}

/*===== Sec Title Style 1 =====*/
.sec-title {margin-bottom: 3.125rem;}
.sec-title-with-btns .sec-title-inner {
  flex: 0 0 55%;
  max-width: 55%;
}
.sec-title-inner > span {
  font-size: 1.125rem;
  font-weight: 600;
  font-family: Nunito;
}
.sub-shap {padding-left: 1.3125rem;}
.sub-shap:before,
.sub-shap:after {
  content: "";
  position: absolute;
}
.sub-shap:before {
  width: 3.5rem;
  background-size: contain;
  background-position: center;
  height: 15px;
  left: 0;
  top: 5.5px;
}
.sub-shap:after {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  left: 0rem;
  top: 8.5px;
}
.black-shp:before {background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape1.png);}
/*.thm-shp:before {background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape2.png);}*/
.scndry-shp:before {background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape4.png);}
/*.thm-shp.v2:before {background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape3.png);}*/
.sec-title-inner > span + h2 {margin-top: 8px;}
.sec-title-inner > h3 {
  font-size: 2.25rem;
  font-weight: 800;
}
.sec-title-inner > h2 {
  font-size: 2.875rem;
  font-weight: 800;
}
.sec-title-inner > h2 + p {margin-top: 8px;}
.sec-title-inner > p {
  font-size: 1.05rem;
  color: #4f4f4f;
  line-height: 1.6rem;
  max-width: 90%;
  display: inline-block;
}
.scndry-layer .sec-title-inner > h2,
.blue-layer3 .sec-title-inner > h2 {color: #fff;}
.scndry-layer .sec-title-inner > p,
.blue-layer3 .sec-title-inner > p {color: #b8b7b7;}
.text-center .sec-title-inner {max-width: 60%;}
.text-center .sec-title-inner > p {
    font-size: 1.05rem;
    line-height: 1.5rem;
    max-width: 100%;
}

/*=== Ver 2 ===*/
.sec-title.v2 {
  margin-top: -10px;
  margin-bottom: 2.5rem;
}
.top-noti a{
  border-bottom: 1px solid;
  font-family: Nunito;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.top-noti i {
  margin-left: 12px;
  vertical-align: middle;
  display: inline-block;
}
.sec-title-btns > a + a {margin-left: 2.1875rem;}
.thm-bg .top-noti a:hover,
.thm-bg .top-noti a:focus {color: #000;}
.scndry-bg .top-noti a {color: var(--color3);}

/*===== Services Style 2 =====*/
.serv-wrap2 {
    margin-bottom: -1.875rem;
    margin-top: -1.4rem;
}
.serv-box2 {margin-bottom: 1.875rem;}
.serv-box2:hover .serv-img2 > img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.serv-img2:before {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: var(--color5);
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-border-radius: inherit;
  border-radius: inherit;
}
.serv-box2:hover .serv-img2:before {opacity: .7;}
.serv-img2 > a {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(.5);
  -ms-transform: translate(-50%, -50%) scale(.5);
  -o-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
  color: #fff;
  z-index: 1;
  font-size: 1.875rem;
  opacity: 0;
  line-height: 1;
  margin-top: -3.125rem;
}
.serv-box2:hover .serv-img2 > a {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.serv-info2 {
  bottom: 1.5625rem;
  z-index: 1;
  left: 0;
}
.serv-box2 .serv-info2 {
  max-width: 18.125rem;
  width: 100%;
}
.serv-info2 > h3 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}
.serv-info2 > h3 a {
  display: block;
  background-color: #c0a964;
  padding: 1.59375rem 2.1875rem;
  position: relative;
}
.serv-info2 > h3 a:hover,
.serv-info2 > h3 a:focus {color: #fff;}
.serv-info2 > h3 a:before {
  content: "";
  width: 1.25rem;
  top: 0;
  bottom: 0;
  right: -1.20rem;
  position: absolute;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  -ms-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-color: #000;
}

/*=== Ver 2 ===*/
.serv-box2.v2 {padding-bottom: 2.3125rem;}
.serv-box2.v2:before {background-color: #000;}
.serv-box2.v2 .serv-img2:before {background-color: #000;}
.serv-box2.v2:hover .serv-img2:before {opacity: .3;}
.serv-box2.v2 .serv-img2 > a {margin-top: -1.09375rem;}
.serv-box2.v2 .serv-info2 {
  bottom: 0;
  max-width: 16.5625rem;
}
.serv-box2.v2 .serv-info2 > h3 a {
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/*===== Quote & Facts Style =====*/
.quote-box-wrap {padding-right: 1.625rem;}
.quote-box {
  right: 1.625rem;
  max-width: 16.875rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
.quote-box-inner {
  padding: 1.5625rem 3.4375rem 1.875rem;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.quote-box-inner > i {
  width: 3.9375rem;
  height: 4.1875rem;
  line-height: 4.1875rem;
  text-align: center;
  left: -1.96875rem;
  font-size: 1.875rem;
  color: #fff;
  top: 1.875rem;
}
.quote-box-inner > p {
  font-size: 1rem;
  line-height: 1.625rem;
  color: #fff;
}
.quote-box-info {
  z-index: 1;
  padding: 1.375rem 2.5rem 2.6875rem 3.4375rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  -ms-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.quote-box-info:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: #000;
  opacity: .1;
}
.quote-box-info > h3 {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 700;
}
.quote-box-info > h3 + span {margin-top: 4px;}
.quote-box-info > span {
  font-family: Nunito;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

/*===== Facts Style 1 =====*/
.fact-box {
  align-items: flex-start;
  margin-top: 3.125rem;
}
.fact-box > i {
  font-size: 5.625rem;
  line-height: 1;
}
.fact-box:hover > i {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.fact-box > i + .fact-box-inner {
  flex: 0 0 calc(100% - 5.625rem);
  max-width: calc(100% - 5.625rem);
  padding-left: 2.1875rem;
}
.fact-box-inner > span {
  font-family: Nunito;
  font-weight: 700;
  line-height: 1;
  font-size: 2.8125rem;
}
.fact-box-inner > span i {font-style: normal;}
.fact-box-inner > span + h4 {margin-top: 7px;}
.fact-box-inner > h4 {
  font-size: 1.5625rem;
  font-weight: 700;
}
.fact-box-inner > h4 + p {
    margin-top: 2px;
}
.fact-box-inner > p {
  font-size: .9375rem;
  line-height: 1.3;
}
.blue-layer .fact-box-inner > h4,
.blue-layer .fact-box-inner > p,
.thm-bg .fact-box > i,
.thm-bg .fact-box-inner > span,
.thm-bg .fact-box-inner > h4,
.thm-bg .fact-box-inner > p {color: #fff;}

/*===== Request Consultation Style =====*/
.request-consult-wrap {
  min-width: calc(100% + 21.875rem);
  margin-left: -11.875rem;
}
.request-consult-title {
  flex: 0 0 22.5rem;
  max-width: 22.5rem;
}
.request-consult-title  h3 {
  color: var(--color3);
  font-size: 2.25rem;
}
.request-consult-title + .request-consult-form {
  flex: 0 0 calc(100% - 22.5rem);
  max-width: calc(100% - 22.5rem);
  padding-left: 2.5rem;
}
.request-consult-form  p {color: #555;}
.request-consult-form  form {margin: 0 -5px;}
.request-consult-form div.field-box {
  flex: 1 0 0;
  max-width: 23.25%;
  float:left;
}
.request-consult-form form div {padding: 5px;}
.request-consult-form  form div.btn-box {
  flex: 0 0 12.8125rem;
  max-width: 12.8125rem;
  float: left;
}
.request-consult-form  form div.btn-box button {
  width: 100%;
  height: 3.875rem;
}
.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7 textarea {
  height: 3.875rem;
  font-size: 14px;
  color: #9b9b9b;
  font-family: Nunito;
  font-weight: 600;
  padding: 10px 1.875rem;
  width: 100%;
}
.request-consult-form p form {margin-top: 10px;}

/*===== Team Style 1 =====*/
.team-wrap {margin-bottom: -1.875rem;}
.team-box {margin-bottom: 1.875rem;}
.team-img:before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.team-box:hover .team-img:before {opacity: .4;}
.team-box:hover .team-img > img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.social-links2 {
  top: 80%;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 14.375rem;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  margin-top: -2.0625rem;
}
.social-links2 > a {
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  background-color: #fff;
  display: inline-block;
  font-size: 14px;
  color: var(--color5);
  margin: 0 1px;
  border: 0 solid transparent;
}
.social-links2 > a:hover,
.social-links2 > a:focus {
  color: #fff;
  border-color: #fff;
  margin: 0 3px;
  height: 3.375rem;
  width: 3.375rem;
  border-width: 3px;
}
.team-box:hover .social-links2 {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.team-info {
  max-width: calc(100% - 1.875rem);
  padding: 1.625rem 1.25rem;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  margin-top: -4.0625rem;
}
.team-info > h3 {
  font-size: 1.375rem;
  color: #fff;
  font-weight: 700;
}
.team-info > h3 + span {margin-top: 6px;}
.team-info > span {
  font-family: Nunito;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
}
.team-info:before {
  content: "";
  top: 0;
  bottom: 0;
  right: -.9375rem;
  width: .9375rem;
  position: absolute;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  -ms-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.view-more > p {
  font-size: 1.125rem;
  font-weight: 600;
  font-family: Nunito;
  color: var(--color3);
}
.scndry-layer .view-more > p,
.blue-layer3 .view-more > p,
.scndry-layer .view-more > p a:hover,
.scndry-layer .view-more > p a:focus,
.blue-layer3 .view-more > p a:hover,
.blue-layer3 .view-more > p a:focus {color: #fff;}
.view-more > p a {font-weight: 700; text-decoration:underline;}
.scndry-layer .view-more > p a:hover,
.scndry-layer .view-more > p a:focus,
.blue-layer3 .view-more > p a:hover,
.blue-layer3 .view-more > p a:focus {border-color: #fff;}

/*===== Get In Time & Method Apply Style =====*/
.get-time-wrap,
.method-apply-wrap {min-height: 47.5rem;}
.get-time-wrap .sec-title-inner > span,
.method-apply-wrap .sec-title-inner > span {font-weight: 800;}
.get-time-inner {max-width: 35.625rem;}
.method-apply-inner {max-width: 44.875rem;}
.get-time-wrap .sec-title-inner > h2 {max-width: 75%;}
.get-time-wrap .sec-title-inner > h2 span,
.method-apply-wrap .sec-title-inner > h2 span {font-weight: 600;}
.bg-color5 .sec-title-inner > h2,
.bg-color5 .sec-title-inner > p {color: #fff;}
.get-time-wrap .sec-title-inner > p,
.method-apply-wrap .sec-title-inner > p {line-height: 1.6rem;}
.method-apply-wrap .sec-title-inner > h2 {max-width: 70%;}
.method-apply-wrap .sec-title-inner > p {max-width: 80%;}
.get-time-wrap .sec-title,
.method-apply-wrap .sec-title {margin-bottom: 1.875rem;}
.get-time-box {
    padding: .9375rem 0;
}
.get-time-box.bg-white {
  -webkit-box-shadow: 0 0 5.625rem rgba(0,0,0,.08);
  -ms-box-shadow: 0 0 5.625rem rgba(0,0,0,.08);
  -o-box-shadow: 0 0 5.625rem rgba(0,0,0,.08);
  box-shadow: 0 0 5.625rem rgba(0,0,0,.08);
}
.get-time-box > span:first-child {
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
}
.get-time-box > span {
  background-color: #fff;
  font-size: 1.0625rem;
  color: #141414;
  font-family: Nunito;
  font-weight: 700;
  padding: 0.984375rem 3.3125rem;
}
.get-time-box.bg-white > span {background-color: var(--color6);}
.get-time-box > span:last-child {
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.get-time-box > span:not(:first-child) {margin-top: 10px;}
.get-time-box > span i {
  font-style: normal;
  flex: 0 0 40%;
  max-width: 40%;
}
.get-time-box + a {
  margin-top: 1.25rem;
  margin-bottom: -6px;
}
.sec-title + .methods-wrap {margin-top: 10px;}
.methods-wrap {margin-bottom: -2.8125rem;}
.method-box {margin-bottom: 2.8125rem;}
.method-box > i {
  width: 2.875rem;
  height: 2.875rem;
  line-height: 2.875rem;
  color: #fff;
  font-size: 1.875rem;
}
.method-box > i + .method-box-inner {
  flex: 0 0 calc(100% - 2.875rem);
  max-width: calc(100% - 2.875rem);
  padding-left: .9375rem;
}
.method-box-inner > h4 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.875rem;
}
.method-box-inner > p {
  color: #555;
  font-size: 1rem;
}

/*===== Online Portal Style =====*/
.online-portal-video > a {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 2.1875rem;
  color: #fff;
  height: 5.125rem;
  line-height: 5.125rem;
  width: 5.125rem;
}
.online-portal-video > a:hover,
.online-portal-video > a:focus {color: #fff;}
.online-portal-desc {padding: 0 2.5rem;}
.online-portal-desc > h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.5rem;
}
.online-portal-desc > h2 + p {margin-top: 7px;}
.online-portal-desc > p {font-size: 1.125rem;}
.thm-layer .online-portal-desc > h2,
.thm-layer .online-portal-desc > p {color: #fff;}
.online-portal-wrap a.thm-btn {
  width: 100%;
  padding: 1.09375rem 1.875rem;
  margin-bottom: -6px;
}

/*===== Products Style =====*/
.prod-wrap {margin-bottom: -2.8125rem;}
.prod-box {margin-bottom: 2.8125rem;}
.prod-img:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 1;
}
.prod-box:hover .prod-img:before {opacity: .5;}
.prod-box:hover .prod-img > img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.prod-img > a {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(.5);
  -ms-transform: translate(-50%, -50%) scale(.5);
  -o-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
  height: 3.5rem;
  width: 3.5rem;
  color: #fff;
  border: 3px solid #fff;
  line-height: 3.125rem;
  font-size: 1.25rem;
  opacity: 0;
  visibility: hidden;
}
.prod-img > a.scndry-bg:hover,
.prod-img > a.scndry-bg:focus {color: #fff;}
.prod-img > a.thm-bg:hover,
.prod-img > a.thm-bg:focus {color: #000;}
.prod-img + .prod-info {padding-top: 1.875rem;}
.prod-info > span {
  font-size: 1rem;
  font-family: Nunito;
}
.prod-info > span.price {
  top: -1.3125rem;
  right: 1.25rem;
  font-weight: 700;
  color: #000;
  border: 5px solid #fbfbfb;
  -webkit-border-top-left-radius: 10rem !important;
  border-top-left-radius: 10rem !important;
  -webkit-box-shadow: 0 8px 3.125rem rgba(0, 0, 0, .05);
  -ms-box-shadow: 0 8px 3.125rem rgba(0, 0, 0, .05);
  -o-box-shadow: 0 8px 3.125rem rgba(0, 0, 0, .05);
  box-shadow: 0 8px 3.125rem rgba(0, 0, 0, .05);
  line-height: 1;
  padding: 8px 1rem;
}
.prod-info > h3 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 700;
}
.prod-info > h3 + span {margin-top: 2px;}
.prod-info > span:not(.price) {font-weight: 800;}
.prod-box:hover .prod-img > a {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}
.prod-info > span.price small {font-size: 75%;}

/*===== Testimonials & Stories Style =====*/
.testi-wrap,
.storie-wrap {min-height: 39.375rem;}
.testi-wrap {
  min-width: calc(100% + 3.125rem);
  padding: 3.75rem 5rem 3.75rem 4rem;
}
.testi-nav-caro {
  min-height: 30rem;
  max-width: 8.125rem;
  right: -4.0625rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
}
.testi-nav-item {
  margin: 1.40625rem 0 1.40625rem 1.25rem;
  cursor: pointer;
}
.slick-current.slick-active.slick-center .testi-nav-item {margin-left: 0;}
.testi-nav-item > img {
  border: 9px solid;
  -webkit-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -ms-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -o-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
}
.testi-inner {
  max-width: 38.4375rem;
  margin-left: -1.25rem;
}
.testi-list-caro.slick-slider > button.slick-arrow {
  background-color: transparent;
  width: auto;
  padding: 0;
  height: initial;
  font-size: 2.5rem;
}
.testi-list-caro.slick-slider > button.slick-prev {left: -5rem;}
.testi-list-caro.slick-slider > button.slick-next {right: -5rem;}
.testi-list-caro.slick-slider > button.slick-arrow:hover,
.testi-list-caro.slick-slider > button.slick-arrow:focus {background-color: transparent !important;}
.testi-item-wrap {padding-left: 2.8125rem;}
.testi-item-box {
  background-color: #fff;
  padding: 1.6875rem 3.75rem 2.3125rem 5rem;
}
.testi-img {
  left: -2.8125rem;
  line-height: 1;
  -webkit-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -ms-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -o-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  top: 2.8125rem;
}
.testi-img > i {
  background-color: #fff;
  font-size: 1.125rem;
  height: 2.375rem;
  width: 2.375rem;
  position: absolute;
  line-height: 2.375rem;
  top: 50%;
  right: -1.1875rem;
  margin-top: -1.1875rem;
}
.testi-item-top {
  border-bottom: 1px dashed rgba(199,199,199,.4);
  padding-bottom: .9375rem;
}
.testi-item-info > h4 {
  font-size: 1.625rem;
  font-weight: 800;
}
.testi-item-info > span {
  font-family: Nunito;
  font-weight: 700;
  font-size: .9375rem;
}
.rate {font-size: 1rem;}
.testi-item-box > p {
  font-size: 1rem;
  line-height: 1.75rem;
  margin-top: 1.0625rem;
}
.storie-wrap {
  max-width: calc(100% - 3.125rem);
  margin-left: 3.125rem;
  background-size: cover;
  background-position: center;
  z-index: 1;
  -webkit-border-radius: 10% 100% 0 10% / 60% 0 100% 50%;
  border-radius: 10% 100% 0 10% / 60% 0 100% 50%;
}
.storie-wrap:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
}
.storie-inner {max-width: 28.125rem;}
.storie-inner > i {
  font-size: 4.125rem;
  line-height: 1;
  color: #fff;
}
.storie-inner > i + h2 {margin-top: 2.1875rem;}
.storie-inner > h2 {
  color: #fff;
  font-size: 2.5rem;
  line-height: 3.125rem;
  font-weight: 700;
}
.storie-inner > h2 + p {margin-top: 12px;}
.storie-inner > p {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.storie-inner > p + a {margin-top: 2.6875rem;}
.storie-inner > a {font-size: 1.125rem;}

/*===== Blog Style 1 =====*/
.news-wrap {margin-bottom: -1.875rem;}
.news-box {margin-bottom: 1.875rem;}
.news-box-inner {
  /*margin-top: 1.75rem;*/
  padding: 2.625rem 2.5rem 2.375rem;
	z-index:99;
}
.news-box-inner > span {
  top: -1.75rem;
  left: 2.5rem;
  border: 5px solid #fbfbfb;
  -webkit-box-shadow: 0 0 2.5rem rgba(0,0,0,0.03);
  -ms-box-shadow: 0 0 2.5rem rgba(0,0,0,0.03);
  -o-box-shadow: 0 0 2.5rem rgba(0,0,0,0.03);
  box-shadow: 0 0 2.5rem rgba(0,0,0,0.03);
}
.news-box-inner > h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.875rem;
}
.news-box-inner > h3 + ul {margin-top: 13px;}
ul.meta > li {
  position: relative;
  font-family: Nunito;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
}
ul.meta > li:not(:first-child) {
  padding-left: 1.3125rem;
  margin-left: 1.25rem;
}
ul.meta > li:not(:first-child):before {
  content: "";
  height: 11px;
  width: 1px;
  background-color: #afafaf;
  position: absolute;
  left: 0;
  top: 5.75px;
}
ul.meta > li:not(.thm-clr):not(.scndry-clr) {color: #999;}
ul.meta + p {margin-top: 14px;}
.news-box-inner > p {
  line-height: 1.75rem;
  font-family: Nunito;
  font-weight: 600;
}

/*===== Sponsors List Style =====*/
.spnsr-list {
  margin: 2.5px 0;
  padding: 0 3.75rem;
}
.spnsr-list > li {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 .9375rem;
}
.spnsr-box > a:hover,
.spnsr-box > a:focus {opacity: .35;}

/*===== Footer Style 1 =====*/
.footer-data {margin-bottom: -3.75rem;}
.widget-box {margin-bottom: 3.75rem;}
.widget-title {
  font-size: 1.5rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1.25rem;
}
.widget-title2 {
  font-size: 1.625rem;
  padding-left: 2.1875rem;
  margin-bottom: 1.875rem;
  font-weight: 700;
}
.widget-title2 > i {
  left: 0;
  top: 2.3px;
  font-weight: 400;
  font-size: 1.375rem;
}
.bg-color7 .widget-title,
.dark-layer .widget-title,
.dark-layer2 .widget-title,
.bg-color7 .widget-title2,
.dark-layer .widget-title2,
.dark-layer2 .widget-title2,
.bg-color7 .widget-box > h3,
.dark-layer .widget-box > h3,
.dark-layer2 .widget-box > h3,
.bg-color7 .social-links3 > h3,
.dark-layer .social-links3 > h3,
.dark-layer2 .social-links3 > h3,
.bg-color7 .widget-box > p,
.dark-layer .widget-box > p,
.dark-layer2 .widget-box > p,
.dark-layer2 .bottom-bar p {color: #fff;}
.widget-title:before,
.widget-title:after {
  content: "";
  left: 0;
  position: absolute;
}
.widget-title:before {
  bottom: 0;
  height: 3px;
  width: 2.3125rem;
}
.widget-title:after {
  bottom: 1px;
  height: 1px;
  width: 6.25rem;
}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) {
  display: flex;
  flex-wrap: wrap;
  margin-top: -7px;
}
.widget-box > p {margin-top: -7px;}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 7px;
}
.widget-box.v2 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {font-size: 1rem;}
.col-lg-4 .widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 1.25rem;
}
.widget-box ul.contact-info-list li {
  font-size: 1rem;
  font-weight: 500;
}
.col-lg-4 .widget-box ul.contact-info-list li {max-width: 80%;}
.bg-color7 .widget-box ul > li,
.dark-layer .widget-box ul > li,
.dark-layer2 .widget-box ul > li {color: #d7d7d7;}
.widget-box ul.contact-info-list li:not(:first-child) {
    margin-top: 0.75rem;
}
.widget-box ul.contact-info-list li span {
  display: inline-block;
  max-width: 6.875rem;
  width: 100%;
}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a {
  position: relative;
  display: block;
  padding-left: 1.875rem;
}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a:before {
  content: "\f116";
  font-family: Flaticon;
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  font-size: 13px;
}
.bg-color7 .widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a:before {color: #b9b9b9;}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a:hover:before,
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a:focus:before {color: inherit;}
.widget-box > h3 {
  padding-left: 4.6875rem;
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 700;
  max-width: 90%;
}
.widget-box > h3 i {
  left: 0;
  top: 0;
  font-size: 3.3125rem;
  line-height: 1;
}
.widget-box > h3 + form {margin-top: 1.5625rem;}
form.newsletter-form input {
  width: 100%;
  height: 4.0rem;
  font-size: 1rem;
  color: #fff;
  font-family: Nunito;
  font-weight: 300;
  background-color: #044552;
  padding: 10px 4.375rem 10px 1.875rem;
}
form.newsletter-form button {
  height: 4.375rem;
  position: absolute;
  right: 1.875rem;
  top: 0;
  background-color: transparent;
  color: #fff;
  font-size: 1.25rem;
  padding: 0;
}
.widget-box .social-links3 {margin-top: 1.59375rem;}
.social-links3 > h3 {
    font-size: 1.0rem;
    font-weight: 500;
    margin-right: 1.5625rem;
}
.social-links3 > a {
  display: inline-block;
  font-size: 14px;
  line-height: 3rem;
  width: 3rem;
  height: 3rem;
  text-align: center;
  background-color: rgba(0,0,0,.5);
  color: #fff;
}
.social-links3 > a:not(:first-of-type) {margin-left: 5px;}
.ftr-gal-list {margin: 0 -10px;}
.ftr-gal-list > li {
  padding: 0 10px;
  flex: 0 0 20%;
  max-width: 20%;
}
.ftr-gal-list > li a {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  display: block;
  position: relative;
}
.ftr-gal-list > li a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
}
.ftr-gal-list > li a:hover:before,
.ftr-gal-list > li a:focus:before {opacity: .5;}
.ftr-gal-list > li a:hover img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}

/*===== Bottom Bar Style 1 =====*/
.bottom-bar {
    padding: 1.0rem 0;
    border-top: 1px solid transparent;
}
.copyright-links > p {
  font-family: Nunito;
  font-size: .9375rem;
  font-weight: 700;
}
.bg-color8 .copyright-links > p {color: #fff;}
.copyright-links > p + ul {margin-top: 4px;}
ul.bottom-links > li {
  position: relative;
  color: #999;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
ul.bottom-links > li:not(:first-child) {
  padding-left: 1.625rem;
  margin-left: 1.5625rem;
}
ul.bottom-links > li:not(:first-child):before {
  content: "";
  width: 1px;
  left: 0;
  position: absolute;
  top: 4px;
  height: 13px;
  background-color: #999;
}

/*===== Featured Area Style 2 =====*/
.feat-caro2.slick-slider > button.slick-arrow {
  color: #fff;
  margin-top: 0;
}
.feat-caro2.slick-slider > button.slick-prev {
  left: auto;
  right: 3.75rem;
}
.feat-caro2.slick-slider > button.slick-next {
  left: 3.75rem;
  right: auto;
}
.feat-item2 {max-height: 44.375rem;}
.feat-item2 .feat-img {
  max-height: 44.375rem;
  min-height: 44.375rem;
}
.feat-cap2-wrap {
  max-width: 73.125rem;
  left: 50%;
  top: 60%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: -4.375rem;
}
.feat-cap2 {max-width: 70%;}
.feat-cap2 > span:not(.feat-cap-time) {
  font-size: 1.375rem;
  font-weight: 500;
  font-family: Nunito;
  padding-bottom: 12px;
}
.feat-cap2 > span:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3.25rem;
  height: 3px;
  margin-left: -1.625rem;
}
.feat-cap2 > h2 {
  font-size: 3.125rem;
  font-weight: 700;
  color: #fff;
  line-height: 4.5rem;
}
.feat-cap2 > h2 + p {margin-top: 10px;}
.feat-cap2 > p {
  font-size: 1.125rem;
  line-height: 1.875rem;
  color: #f3f3f3;
  display: inline-block;
  max-width: 80%;
}
.feat-cap2 > p + span {margin-top: 1.4375rem;}
.feat-cap2 > span.feat-cap-time {
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  font-family: Nunito;
}
.feat-cap2 > span.feat-cap-time span {
  font-weight: 500;
  margin-right: 5px;
}
.feat-cap2 > span + a {margin-top: 2.625rem;}

/*===== Special Style 1 =====*/
.special-wrap > div.row > div {position: relative;}
.special-wrap > div.row > div:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 0;
  height: 6.25rem;
  border-left: 1px dashed rgba(255,255,255,.5);
  width: 1px;
  top: 50%;
  z-index: 2;
  margin-top: -3.125rem;
}
.special-wrap > div.row > div:not(:first-child)::before {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
  top: 50%;
  margin-left: -8px;
  left: 0;
  margin-top: -3.5rem;
}
.special-wrap {
  -webkit-box-shadow: 0 0 1.5rem rgba(0, 0, 0, .05);
  -ms-box-shadow: 0 0 1.5rem rgba(0, 0, 0, .05);
  -o-box-shadow: 0 0 1.5rem rgba(0, 0, 0, .05);
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, .05);
}
.special-box {padding: 4.0625rem 4.0625rem 3.125rem;}
.special-box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 95%;
  left: 47.5%;
  right: 47.5%;
  z-index: -1;
  opacity: 0;
}
.special-box:hover:after {
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
  -ms-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
  -o-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
  transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
}
.special-box > i {
  font-size: 4.0625rem;
  color: #fff;
  line-height: 1;
}
.special-box:hover > i {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.special-box > i + .special-box-inner {
  flex: 0 0 calc(100% - 4.0625rem);
  max-width: calc(100% - 4.0625rem);
  padding-left: 1.5625rem;
}
.special-box-inner > h4 {
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.8rem;
  max-width: 80%;
  display: inline-block;
}
.special-box-inner > h4 + p {margin-top: 6px;}
.special-box-inner > p {
  font-size: 1.1rem;
  font-family: Nunito;
  color: #fff;
}
.special-box.thm-bg:hover > i {color: var(--color5);}
.special-box.thm-bg:hover .special-box-inner > h4 {color: var(--color3);}
.special-box.thm-bg:hover .special-box-inner > p {color: #555;}

/*=== Ver 2 ===*/
.special-box.v2 {
  justify-content: center;
  padding: 4.375rem 24% 4.6875rem;
}
.special-box.v2 > i {line-height: 1;}
.special-box.v2 > i + .special-box-inner {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 1.5625rem 0 0;
}
.special-box.v2 .special-box-inner > h4 {
  font-size: 1.875rem;
  line-height: 2.5rem;
}
.special-box.v2 .special-box-inner > h4 + p {margin-top: 8px;}

/*=== Ver 3 ===*/
.special-box.v3 > i {font-size: 4.375rem;}
.special-box.v3 > i + .special-box-inner {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 1.375rem 0 0;
}
.special-box.v3 {padding: 4.6875rem 20% 5.3125rem;}
.special-box.v3 .special-box-inner > h4 {font-size: 1.875rem;}
.special-box.v3 .special-box-inner > p {line-height: 1.75rem;}
.special-box.v3 .special-box-inner > h4 + p {margin-top: 14px;}

/*===== About Style 2 =====*/
.about-wrap2 {margin-top: -3.125rem;}
.about-desc {margin-top: 5rem;}
.about-gal {
  margin-top: 3.125rem;
  margin-bottom: -1.25rem;
}
.about-gal-img {margin-bottom: 1.25rem;}
.about-gal-img > a:not(.about-play-btn) {display: block;}
.about-gal-img > a:not(.about-play-btn):before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  background-color: #000;
}
.about-gal-img > a:not(.about-play-btn):hover:before,
.about-gal-img > a:not(.about-play-btn):focus:before {opacity: .5;}
.about-gal-img:hover img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.about-gal-img > a.about-play-btn {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  font-size: 5rem;
  line-height: 1;
}
.about-gal-img > a.about-play-btn:hover,
.about-gal-img > a.about-play-btn:focus {color: var(--color5);}
.about-gal-img > a.about-play-btn:before,
.about-gal-img > a.about-play-btn:after {background-color: #fff;}
.about-desc > span:not(.about-time) {
  border-bottom: 1px solid;
  font-size: 1rem;
  font-family: Nunito;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1;
}
.about-desc > span:not(.about-time) + h2 {margin-top: 1.25rem;}
.about-desc > h2 {
    font-size: 2.425rem;
    line-height: 2.9rem;
    font-weight: 400;
}
.about-desc > h2 + strong {margin-top: 1.25rem;}
.about-desc > strong {
  font-size: 1.125rem;
  line-height: 1.875rem;
  color: var(--color3);
  font-weight: 700;
  display: inline-block;
  width: 100%;
  font-family:Arimo;
}
.about-desc > strong + p {margin-top: 12px;}
.about-desc > p {
  font-size: 1.125rem;
  max-width: 95%;
}
.about-desc > p + p {margin-top: 1.25rem;}
.about-desc > p + span {margin-top: 2.2rem;}
.about-desc > span.about-time {
  color: var(--color3);
  font-size: 1rem;
  font-family: Nunito;
  font-weight: 700;
}
.about-desc > span.about-time span {
  display: inline-block;
  margin-right: 3px;
}
.about-desc > span.about-time span i {
  font-size: 1.875rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.about-desc > h2 strong {font-weight: 800;}
.about-desc > h2 span {font-weight: 400;}
.about-desc > p + a.thm-btn {margin-top: 2.5rem;}

/*=== Ver 3 ===*/
.about-desc.v3 {margin-top: 0;}
.about-desc.v3 > span {letter-spacing: initial;}
.about-desc.v3 > span:not(.about-time) + h2 {margin-top: 1rem;}
.about-desc.v3 > h2 {font-size: 2.5rem;}
.about-desc.v3 > h2 + p {margin-top: .9375rem;}
.about-video-box > a {
  font-size: 6.6875rem;
  line-height: 1;
  z-index: 1;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*===== Live Video Session Style =====*/
.live-video-wrap {padding: 0 3.125rem;}
.live-video-inner {padding-top: 1.4375rem;}
.live-video-inner > span {
  top: 0;
  left: 50%;
  color: #fff;
  text-transform: uppercase;
  font-family: Nunito;
  font-size: 1rem;
  font-weight: 800;
  -webkit-border-top-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
  padding: 10px 1.875rem;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  min-width: 15.3125rem;
}
.live-video-img:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--color7);
  opacity: .3;
}
.live-video-img > a {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  font-size: 6.25rem;
  line-height: 1;
}
.live-video-img > a:before,
.live-video-img > a:after {background-color: #fff;}
.live-video-img > a:hover,
.live-video-img > a:focus {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  -ms-transform: translate(-50%, -50%) scale(1.1);
  -o-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
}

/*===== Facts Style 2 =====*/
.facts-list {margin: 0 -4.375rem;}
.facts-list > li {
  padding: 0 4.375rem;
  flex: 0 0 33.33334%;
  max-width: 33.33334%;
}
.facts-list > li:not(:first-child) .fact-box:before,
.facts-list > li:not(:first-child) .fact-box:after {
  content: "";
  position: absolute;
}
.facts-list > li:not(:first-child) .fact-box:before {
  height: 1rem;
  width: 1rem;
  background-color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: -4.875rem;
  top: 0;
}
.facts-list > li:not(:first-child) .fact-box:after {
  height: 6.25rem;
  width: 1px;
  border-left: 1px dashed #fff;
  left: -4.40625rem;
  top: 0;
}

/*===== Services Style 3 =====*/
.sec-title + .serv-wrap3 {margin-top: -5px;}
.serv-box3 {
  min-height: 14.0625rem;
  padding: 1.875rem;
}
.serv-box3:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 90%;
  z-index: -1;
  opacity: 0;
}
.serv-box3:hover:before {
  bottom: 0;
  opacity: 1;
}
.serv-wrap3 > div.row > div:not(:first-child) .serv-box3 {border-left: 1px dashed #808080;}
.serv-wrap3 > div.row > div:nth-child(6) .serv-box3 {border-right: 1px dashed #808080;}
.serv-wrap3 > div.row > div:not(:last-child):not(:nth-last-child(2)) .serv-box3 {border-bottom: 1px dashed #808080;}
.serv-info3 > i {
  font-size: 4.5rem;
  line-height: 1;
}
.serv-info3 > i + h3 {margin-top: 1rem;}
.serv-info3 > i.flaticon-schizophrenia,
.serv-info3 > i.flaticon-puzzle,
.serv-box3:hover .serv-info3 > i {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.serv-info3 > h3 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.scndry-layer .serv-info3 > h3,
.blue-layer3 .serv-info3 > h3 {color: #fff;}
.serv-box3:hover .serv-info3 > h3 {color: #333;}
.serv-info3 > h3 a:hover,
.serv-info3 > h3 a:focus {color: #fff;}
.blue-layer3 .serv-box3:hover .serv-info3 > i {color: var(--color16);}

/*===== Find Therapist Style 2 =====*/
.find-thera-cap {
    padding: 2.5rem 6.875rem 3.0rem 6.875rem;
}
.find-thera-cap > a {
  z-index: 1;
  height: 7.375rem;
  line-height: 7.375rem;
  width: 7.375rem;
  color: #000;
  background-color: #fff;
  font-size: 1.625rem;
  left: -3.6875rem;
  top: 50%;
  margin-top: -3.6875rem;
}
.find-thera-cap > a:hover,
.find-thera-cap > a:focus {color: #fff;}
.find-thera-cap-inner > h2 {
  font-size: 1.875rem;
  line-height: 2.8125rem;
  font-weight: 700;
}
.thm-bg .find-thera-cap-inner > h2 {color: #fff;}
.find-thera-cap-inner > h2 + .btns-group {margin-top: 1.875rem;}
.btns-group > a + a {margin-left: 2.8125rem;}
.find-thera-cap .thm-btn {
  padding-left: 3.625rem;
  padding-right: 3.625rem;
}

/*===== Stories Style 1 =====*/
.storie-wrap2 {margin-bottom: -1.875rem;}
.storie-box {margin-bottom: 1.875rem;}
.storie-img > a {display: block;}
.storie-img > a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 1;
}
.storie-box:hover .storie-img > a:before {opacity: .5;}
.storie-box:hover .storie-img img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.storie-img > span {
  top: 1.25rem;
  left: 1.25rem;
  color: #fff;
  font-size: 1rem;
  -webkit-border-top-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
  padding: 9px 1.875rem;
}
.storie-info {
    padding: 2.2rem 1.875rem 2.1875rem;
}
.storie-info > h3 {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.875rem;
}
.storie-info > h3 + span {margin-top: 3px;}
.storie-info > span {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 14px;
  font-family: Nunito;
}

/*===== Blog Style 2 =====*/
.news-wrap2 > div.row > div:first-child,
.news-wrap2 > div.row > div:nth-child(4),
.news-wrap2 > div.row > div:nth-child(7) {padding-right: 1.5625rem;}
.news-wrap2 > div.row > div:nth-child(2),
.news-wrap2 > div.row > div:nth-child(5),
.news-wrap2 > div.row > div:nth-child(8) {padding: 0 1.25rem;}
.news-wrap2 > div.row > div:last-child,
.news-wrap2 > div.row > div:nth-child(3),
.news-wrap2 > div.row > div:nth-child(9) {padding-left: 1.5625rem;}
.news-wrap2 {margin-bottom: -1.875rem;}
.news-box2 {margin-bottom: 1.875rem;}
.news-img2 > a {display: block;}
.news-img2 > a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0;
}
.news-box2:hover .news-img2 > a:before {opacity: .5;}
.news-box2:hover .news-img2 img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.news-img2 + .news-info2 {
  -webkit-border-radius: 0;
  border-radius: 0;
  margin-top: 0;
}
.news-info2 {
  margin-top: 1.875rem;
  padding: 2.3125rem 2.5rem 2.5rem 2.1875rem;
}
.news-info2 > img.authr-img {
    border: 5px solid #fff;
    left: 1.8125rem;
    top: -1.8rem;
}
.news-info2 > h3 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 700;
}
.news-info2 > h3 + ul {margin-top: 1.3125rem;}

/*===== Get Time & Request Free Consultation Style =====*/
.get-time-request-wrap {margin-left: -16.25rem;}
.request-consult-wrap2 {
  max-width: calc(100% - 4.375rem);
  padding: 3.75rem 4.0625rem 3.75rem;
}
.request-consult-title2 > h3 {
  font-size: 2.25rem;
  line-height: 2.8125rem;
  font-weight: 800;
}
.scndry-layer .request-consult-title2 > h3,
.scndry-layer .request-consult-title2 > p,
.blue-layer3 .request-consult-title2 > h3,
.blue-layer3 .request-consult-title2 > p {color: #fff;}
.request-consult-title2 > h3 + p {margin-top: 5px; margin-bottom:15px;}
.request-consult-title2 + form {margin-top: 10px;}
.request-consult-wrap2 .field-box,
.request-consult-wrap2 .btn-box {margin-top: 10px;}
.request-consult-wrap2 form .thm-btn {
  padding: 1.25rem 2.8125rem;
  width: 100%;
}
.get-time-request-wrap .get-time-wrap .sec-title {margin-top: 10px;}
.get-time-request-wrap .sec-title-inner > h2 {
  font-weight: 800;
  max-width: 80%;
}
.get-time-request-wrap .get-time-wrap {min-height: initial;}
.get-time-request-wrap .get-time-wrap .get-time-inner {max-width: 100%;}

/*===== Footer Style 2 =====*/
.widget-box.v2 .social-links3 {margin-top: 2.84375rem;}
.widget-box.v2 .social-links3 > a {background-color: rgba(255,255,255,.05);}
.working-hours > span:not(:first-child) {margin-top: 1.5625rem;}
.working-hours > span {
  font-size: 1.125rem;
  font-family: Nunito;
  font-weight: 700;
}
.working-hours > span i {
  font-style: normal;
  font-size: 1rem;
  margin-top: 3px;
}
.dark-layer .working-hours > span {color: #d7d7d7;}
.dark-layer .working-hours > span i {color: #fff;}
.widget-box > p + form {margin-top: 1.25rem;}
.widget-box.v2 > form input {padding: 10px 3.7rem 10px 1.5625rem;}
.widget-box.v2 > form button {right: 1.5625rem;}
.widget-box.v2 > p {font-size: 1rem;}

/*===== Bottom Bar Style 2 =====*/
.bottom-bar.v2 {padding: 0 0 2.1875rem;}
.logo.v2 + .copyright-links {
  flex: 0 0 calc(100% - 10.625rem);
  max-width: calc(100% - 10.625rem);
  padding-left: 8.125rem;
}
.bottom-bar.v2 .logo.v2 {margin-top: -10.9375rem;}
.bottom-bar.v2 .copyright-links > p {
  font-size: 1.125rem;
  color: var(--color3);
}
.bottom-bar.v2 .copyright-links {padding-top: 1.9375rem;}
.bottom-bar.v2 ul.bottom-links > li {
  font-size: 1.125rem;
  color: var(--color3);
  font-weight: 700;
}
.bottom-bar.v2 ul.bottom-links > li:not(:first-child):before {
  background-color: var(--color3);
  height: 1.125rem;
  top: 4.5px;
}
.bottom-bar.v2 ul.bottom-links > li:not(:first-child) {
  margin-left: 12px;
  padding-left: 13px;
}

/*===== Featured Area Style 3 =====*/
.feat-img-caro {max-height: 43.4375rem;}
.feat-img-caro .feat-img {
  min-height: 43.4375rem;
  max-height: 43.4375rem;
}
.feat-cap3-wrap {
  max-width: 73.125rem;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.feat-cap3 {max-width: 40.9375rem;}
.feat-cap3 > span {
  font-size: 1.375rem;
  font-family: Nunito;
  font-weight: 500;
}
.feat-cap3 > span + h2 {margin-top: 10px;}
.feat-cap3 > h2 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3.25rem;
  color: #fff;
  max-width: 90%;
}
.feat-cap3 > h2 + p {margin-top: 12px;}
.feat-cap3 > p {
  font-size: 1.125rem;
  color: #fff;
}
.feat-cap3 > p + .feat-serv-wrap {margin-top: 6px;}
.feat-serv-wrap {
  min-width: calc(100% + 2.25rem);
}
.feat-serv-box {margin-top: 1.875rem;}
.feat-serv-box > i {
  line-height: 1;
  font-size: 4.375rem;
}
.feat-serv-box > i.flaticon-schizophrenia {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.feat-serv-box > i + h3 {margin-top: 13px;}
.feat-serv-box > h3 {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
}

/*===== Services Style 4 =====*/

.serv-box4 {
    margin-bottom: 3.4rem;
}
.serv-box4-inner > p {
    max-width: 80%;
    line-height: 1.5rem;
    margin-top: 10px;
}
/*===== Enroll Now Style =====*/
.enroll-wrap {
  padding-left: 4rem;
  padding-right: 4rem;
}
.enroll-inner {max-width: 70%;}
.enroll-inner > h3 {
  font-size: 1.5rem;
  letter-spacing: 8px;
  font-weight: 800;
}
.enroll-inner > h3 + span {margin-top: 4px;}
.enroll-inner > span {
  font-size: 1.25rem;
  font-family: Nunito;
  font-weight: 700;
}
.enroll-inner > span + p {
    margin-top: 1rem;
    width: 90%;
    text-align: center;
    margin: 15px auto;
}
.enroll-inner > p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.enroll-inner > p + a {margin-top: 2.5rem;}
.scndry-bg .enroll-inner > h3 {color: #fff;}
.enroll-inner > p span {font-size: 1.5rem;}
.enroll-inner .thm-btn {
  font-size: 1.0625rem;
  padding: 1.15625rem 4.0625rem;
}

/*===== Banners Style =====*/
.banner-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 1;
  opacity: .4;
}
.banner-box.active:before {
	background-color: #044552;
	opacity:1;
}

.banner-box:hover:before {background-color: #000;}
.banner-box:hover > img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.banner-info {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 18rem;
}
.banner-info > h3 {
    font-size: 1.6rem;
    color: #fff;
    line-height: 2.0rem;
    font-weight: 700;
}

/*===== About Style 3 =====*/
.about-img,
.about-desc.v2 {margin-top: 3.125rem;}
.about-img {margin-bottom: 1.875rem;}
.about-img .social-links4 {
  max-width: 3rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 3.3125rem;
}
.social-links4 > a {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  color: var(--color5);
  background-color: #fff;
  font-size: 1rem;
}
.social-links4 > a:not(:first-child) {margin-top: 10px;}
.social-links4 > a:hover,
.social-links4 > a:focus {color: #fff;}
/* .about-img > img {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 23% 100%);
  -ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 23% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 23% 100%);
}*/
.about-info {
  bottom: -1.875rem;
  left: -1.875rem;
  min-width: 17.8125rem;
  padding: 2.75rem 2.8125rem 0;
}
.about-info > i {
  color: #fff;
  font-size: 7.125rem;
  z-index: -1;
  line-height: 1;
  opacity: .07;
  right: 1.6875rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: -1.5rem;
}
.about-info > h3 {
  font-size: 1.5rem;
  font-weight: 800;
}
.about-info > h3 span {
  font-size: 1rem;
  margin-top: 8px;
}
.about-info > h3 + span {
    margin-top: .675rem;
}
.about-info > span {
  font-family: Nunito;
  font-size: 1rem;
  font-weight: 600;
}
.about-info > span + a {margin-top: 1.0625rem;}
.about-info > a.thm-btn {
  width: calc(100% + 5.625rem);
  margin-left: -2.8125rem;
  margin-bottom: -7px;
  font-size: 1.0625rem;
  padding: 1.15625rem 3.0625rem;
}
.scndry-bg > h3,
.scndry-bg > span {color: #fff;}
.about-desc.v2 {padding-right: 1.5625rem;}
.about-desc.v2 > span:not(.about-time) {
  letter-spacing: inherit;
  font-size: 1.125rem;
}
.about-desc.v2 > span:not(.about-time) + h2 {
	margin-top: 8px;
    margin-bottom: 20px;
}
.about-desc.v2 > h2 + strong {margin-top: 12px;}
.about-desc.v2 > strong {max-width: 90%;}
.about-desc.v2 > strong + p {margin-top: 1rem;}
.about-desc.v2 > span.about-time {
  font-size: 1.125rem;
  font-weight: 600;
}
.about-desc.v2 > span.about-time span {margin-right: 0.2rem; font-weight: 800;}

/*===== Procedure Style =====*/
.sec-title2 + .procedure-wrap {margin-top: 2.8125rem;}
.procedure-wrap {
  margin-bottom: -1.875rem;
  min-height: 18.625rem;
}
.procedure-wrap > div.row > div:nth-child(2n),
.procedure-wrap:hover > div.row > div:nth-child(2n+1) {margin-top: 3.125rem;}
.procedure-wrap:hover > div.row > div:nth-child(2n) {margin-top: 0;}
.proced-box {
  padding: 3.125rem 2.5rem 1.375rem;
  margin-bottom: 4.0625rem;
  margin-top: 2.5rem;
}
.proced-box > span {
  font-family: Nunito;
  font-weight: 900;
  font-size: 2.5rem;
  color: #fff;
  height: 5rem;
  line-height: 5rem;
  width: 5rem;
  top: -2.5rem;
  display: inline-block;
  background-color: inherit;
  left: 50%;
  margin-left: -2.5rem;
}
.proced-box:before {
  content: "";
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  position: absolute;
  bottom: -2.1875rem;
  z-index: -1;
  border-left: 4.21875rem solid transparent;
  border-right: 4.21875rem solid transparent;
  border-top: 2.1875rem solid;
}
.proced-box > h4 {
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #432818;
  font-weight: 800;
}
.proced-box > h4 + p {margin-top: 2px;}
.proced-box > p {
  font-size: .9375rem;
  line-height: 1.375rem;
  color: var(--color1);
  font-family: Nunito;
  font-weight: 600;
  display: inline-block;
  max-width: 80%;
}
.blue-layer .proced-box > h4,
.blue-layer .proced-box > p {color: #fff;}
.proced-box:hover > h4 {color: #fff;}
.proced-box:hover > p {color: #999;}

/*===== Courses Style =====*/
.sec-title2 + .courses-wrap {margin-top: 2.5rem;}
.courses-wrap {margin-bottom: -1.875rem;}
.course-box {
  padding-left: 10px;
  margin-bottom: 1.875rem;
}
.course-box > span.price {
  left: 0;
  color: #fff;
  font-family: Nunito;
  font-weight: 800;
  font-size: 1.125rem;
  padding: 6.5px 13.1px;
  top: 10px;
}
.course-box > span.price small {
  font-size: 68%;
  vertical-align: middle;
  font-weight: 700;
  top: -1px;
  position: relative;
}
.course-box:hover .course-img img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.course-img {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.course-img > a {display: block;}
.course-img > a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
  z-index: 1;
}
.course-box:hover .course-img > a:before {opacity: .5;}
.course-info {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  padding: 0 2rem 0 2.5rem;
}
.course-info > a.course-author-img {
  border: 5px solid #fbfbfb;
  margin-top: -1.875rem;
  -webkit-box-shadow: 0 0 2.375rem rgba(0,0,0,.03);
  -ms-box-shadow: 0 0 2.375rem rgba(0,0,0,.03);
  -o-box-shadow: 0 0 2.375rem rgba(0,0,0,.03);
  box-shadow: 0 0 2.375rem rgba(0,0,0,.03);
  display: inline-flex;
}
.course-info > a.course-author-img + span {margin-top: 11px;}
.course-info > span {
  font-family: Nunito;
  font-weight: 700;
  color: #888;
  font-size: .9375rem;
}
.course-info > span + h3 {margin-top: 12px;}
.course-info > h3 {
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 700;
}
.course-info > h3 + .rating {margin-top: 8px;}
.rating {
  font-size: 14px;
  font-family: Nunito;
  font-weight: 600;
  color: #555;
}
.rating .rate {font-size: inherit;}
.rating .rate + i {margin-left: 1rem;}
.rating + .course-info-bottom {margin-top: 1.125rem;}
.course-info-bottom {
  min-width: calc(100% + 4.5rem);
  margin-left: -2.5rem;
  padding: 1.015625rem 2rem 1.015625rem 2.5rem;
  -webkit-border-radius: inherit;
  border-radius: inherit;
}
.course-info-bottom > span {
  position: relative;
  font-size: .9375rem;
  font-weight: 700;
  font-family: Nunito;
}
.course-info-bottom > span:not(:first-child) {
  margin-left: 13px;
  padding-left: 14px;
}
.course-info-bottom > span:not(:first-child):before {
  content: "";
  width: 1px;
  height: 14px;
  left: 0;
  top: 4.25px;
  position: absolute;
  background-color: #000;
}

/*===== Video & Impacts Style =====*/
.video-box-wrap,
.impact-wrap {
  background-size: cover;
  background-position: center;
  min-height: 43.75rem;
  padding: 2rem;
}
.video-box-wrap:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: .5;
}
.video-box-wrap .video-box {
  max-width: 32.5rem;
  padding-left: 6.875rem;
}
.video-box-wrap .video-box > a:not(.thm-btn) {
  left: 0;
  top: 0;
  font-size: 5.3125rem;
  line-height: 1;
}
.video-box-wrap .video-box > a:not(.thm-btn):before,
.video-box-wrap .video-box > a:not(.thm-btn):after {background-color: #fff;}
.video-box > a:not(.thm-btn) {color: #fff;}
.video-box > span,
.impact-inner > span {
  font-size: 1.125rem;
  font-family: Nunito;
  font-weight: 800;
}
.video-box > span + h2,
.impact-inner > span + h2 {margin-top: 2px;}
.video-box > h2,
.impact-inner > h2 {
  font-size: 2.8125rem;
  line-height: 3.125rem;
  color: #fff;
  font-weight: 800;
}
.video-box > h2 + p {margin-top: 1.375rem;}
.video-box > p,
.impact-inner > p {font-size: 1.125rem;}
.video-box > p + a {margin-top: 3.125rem;}
.video-box > a.thm-btn {
  padding-left: 3.4375rem;
  padding-right: 3.4375rem;
}
.impact-inner {max-width: 35rem;}
.impact-inner > h2 + p {margin-top: 1.25rem;}
.impact-facts-wrap {margin: 3.125rem 0 -3.75rem;}
.impact-fact-box {margin-bottom: 3.75rem;}
.impact-fact-box > i {
  font-size: 3.75rem;
  line-height: 1;
  color: #fff;
}
.impact-fact-box > i + .impact-fact-box-inner {
  flex: 0 0 calc(100% - 3.75rem);
  max-width: calc(100% - 3.75rem);
  padding-left: 1.375rem;
}
.impact-fact-box-inner > span {
  font-size: 1.875rem;
  font-family: Nunito;
  font-weight: 800;
  line-height: 1;
}
.impact-fact-box-inner > p {font-size: 1rem;}

/*===== Client Reviews Style =====*/
.sec-title2 + .client-reviews-wrap {margin-top: 2.5rem;}
.client-reviews-wrap {margin-bottom: -1.875rem;}
.client-review-box {
  margin-bottom: 1.875rem;
  background-color: #fff;
  margin-top: 2.625rem;
  padding: 5.4375rem 2.8125rem 0;
}
.client-img {
  left: 50%;
  margin-left: -2.8125rem;
  top: -2.625rem;
  -webkit-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -ms-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  -o-box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
  box-shadow: 0 0 1.875rem rgba(0,0,0,.08);
}
.client-img > span {
  background-color: #fff;
  height: 2.375rem;
  line-height: 2.375rem;
  width: 2.375rem;
  bottom: -1.1875rem;
  left: 50%;
  margin-left: -1.1875rem;
}
.client-review-box > h3 {
  font-size: 1.625rem;
  font-weight: 800;
}
.client-review-box > h3 + p {margin-top: 10px;}
.client-review-box > p {line-height: 1.6rem;}
.client-review-box > p + span {margin-top: 2rem;}
.client-review-box > span {
  background-color: #dfe7f3;
  font-size: 1.0625rem;
  line-height: 1.875rem;
  text-transform: uppercase;
  font-family: Nunito;
  font-weight: 800;
  padding: 12.5px 1.25rem;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  margin-left: -2.8125rem;
  min-width: calc(100% + 5.625rem);
}

/*===== Side Title Style =====*/
.side-title {padding-right: 2rem;}
.side-title-inner > span {
  font-family: Nunito;
  font-size: 1.125rem;
  font-weight: 800;
}
.side-title-inner > span + h2 {margin-top: 6px;}
.side-title-inner > h2 {
    font-size: 2.5rem;
    line-height: 2.9rem;
    max-width: 90%;
}
.side-title-inner > h2 + p {margin-top: 8px;}
.side-title-inner > p {
    font-size: 1.05rem;
    line-height: 1.7rem;
    color: #555;
}
.side-title-inner > p + a {margin-top: 2.0625rem;}
.side-title-inner > a.thm-btn {padding: 1.09375rem 3.125rem;}

/*===== Blog Style 3 =====*/
.news-wrap3 {margin-bottom: -3.125rem;}
.news-box3 {margin-bottom: 3.125rem;}
.news-img3:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color14);
  opacity: 0;
}
.news-box3:hover .news-img3:before {opacity: .75;}
.news-box3:hover .news-img3 img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.news-img3 > a {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  color: #fff;
  font-size: 1.875rem;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%) scale(.5);
  -ms-transform: translate(-50%, -50%) scale(.5);
  -o-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
}
.news-box3:hover .news-img3 > a {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.news-img3 + .news-info3 {margin-top: 1.375rem;}
.news-info3 > h3 {
    font-size: 1.5rem;
    line-height: 2.0rem;
    font-weight: 700;
    padding-right: 15px;
}
.news-info3 > h3 + ul {margin-top: 1.25rem;}
.meta2 > li:not(.thm-clr) {color: #999;}
.meta2 > li.thm-clr {font-weight: 700;}
.meta2 > li.thm-clr a {border-bottom: 1px solid;}
.meta2 > li.thm-clr span {
  font-size: 1.875rem;
  font-weight: 800;
  margin-right: 4px;
}
.meta2 > li:not(.thm-clr) span {
  color: #fff;
  font-size: 13px;
  padding: 4px 7.2px 3px;
  margin-right: 10px;
  display: inline-block;
}
.meta2 > li {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
}
.meta2 > li:not(:first-child) {margin-left: 1.875rem;}
.meta2 > li:not(.thm-clr) span:before {
  content: "";
  border-right: 5px solid transparent;
  border-top: 5px solid red;
  position: absolute;
  bottom: -5px;
  left: 10px;
}

/*===== Footer Style 3 =====*/
.logo + p {margin-top: 1.875rem;}
.container + .footer-newsletter {
    margin-top: 3.4375rem;
    display: none !important;
}
.footer-newsletter {padding: 1.5rem;}
.footer-newsletter-inner {
  flex: 0 0 53.4375rem;
  max-width: 53.4375rem;
}
.footer-newsletter-inner > h3 {
    font-size: 1.425rem;
    font-weight: 600;
    font-family: 'Saira';
    color: #fff;
}
.bg-color15 .footer-newsletter-inner > h3 {color: #fff;}
.footer-newsletter-inner > h3 + form {margin-left: 2.8125rem;}
.footer-newsletter-inner form {
  flex: 0 0 23.125rem;
  max-width: 23.125rem;
}

/*===== Bottom Bar Style 3 =====*/
.bottom-bar.v3 p {
    font-size: 1rem;
    font-weight: 500;
    font-family: Nunito;
    color: #fff;
}

.bottom-bar.v3 p a:hover {
    color:#f9f9f9 !important;
}

/*===== Page Title Style =====*/
.page-title-wrap {margin-top: 5px;}
.page-title-inner > h1 {
  font-weight: 700;
  font-size: 2.5rem;
}
.black-layer .page-title-inner > h1,
.black-layer ol.breadcrumb li.breadcrumb-item:not(.active) {color: #fff;}
.page-title-inner > h1 + ol.breadcrumb {margin-top: 2px;}
ol.breadcrumb li.breadcrumb-item {
  font-size: 1.125rem;
  font-weight: 500;
  position: relative;
}
ol.breadcrumb li.breadcrumb-item + .breadcrumb-item {
  margin-left: .9375rem;
  padding-left: 1.25rem;
}
ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  padding: 0;
  position: absolute;
  top: 17.5px;
  left: 0;
}
.black-layer ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:before {background-color: #fff;}

/*===== Pagination Style =====*/
.pagination {margin: -2.5px;}
.pagination li.page-item {
  font-size: 1rem;
  font-weight: 700;
  color: #717171;
  line-height: 3.25rem;
  margin: 2.5px;
}
.pagination li.page-item a.page-link {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #c0a964;
  color: inherit;
  padding: 0;
  background-color: transparent;
  height: 3.25rem;
  width: 3.25rem;
}
.pagination li.page-item.prev a.page-link,
.pagination li.page-item.next a.page-link {
  width: auto;
  padding: 0 1.875rem;
}
.pagination li.page-item i {
  font-weight: 400;
  font-size: 8px;
  vertical-align: middle;
}
.pagination li.page-item.prev,
.pagination li.page-item.next {
  font-size: 1rem;
  color: var(--color7);
  text-transform: uppercase;
}
.pagination li.page-item.next i {margin-left: 8px;}
.pagination li.page-item.prev i {margin-right: 8px;}
.pagination li.page-item.active a.page-link,
.pagination li.page-item a.page-link:hover,
.pagination li.page-item a.page-link:focus {color: #fff;}

/*===== Gallery Style =====*/
.gallery-wrap {margin-bottom: -10px;}
.gallery-box {margin-bottom: 10px;}
.gallery-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
.gallery-box:hover:before {opacity: .78;}
.gallery-info {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) scale(.5);
  -ms-transform: translate(-50%, -50%) scale(.5);
  -o-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
  min-width: 20rem;
  max-width: 20rem;
  opacity: 0;
  visibility: hidden;
}
.gallery-info > h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}
.gallery-info > h3 + a {margin-top: 1.25rem;}
.gallery-info > a {
  font-size: 2.25rem;
  line-height: 1;
  color: #000;
}
.gallery-info > a:hover,
.gallery-info > a:focus {color: #fff;}
.col-lg-3 .gallery-info > h3 {
  font-size: 1.5rem;
  line-height: 1.875rem;
}
.col-lg-3 .gallery-info {
  min-width: 15rem;
  max-width: 15rem;
}
.col-lg-3 .gallery-info > a {font-size: 2rem;}
.gallery-box:hover .gallery-info {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}
.gallery-video-box:before {display: none;}
.gallery-video-box > a {
  z-index: 1;
  right: 1.75rem;
  bottom: 1.75rem;
  min-width: 8.75rem;
  padding: 2.5rem 1.25rem;
}
.gallery-video-box > a i {
  line-height: 1;
  font-size: 2rem;
  color: #000;
}
.gallery-video-box > a i + span {margin-top: 7px;}
.gallery-video-box > a span {
  color: #414141;
  font-size: 14px;
  text-transform: uppercase;
  font-family: Nunito;
  font-weight: 700;
}
.gallery-video-box > a.thm-bg:hover > *,
.gallery-video-box > a.thm-bg:focus > *,
.gallery-video-box > a.scndry-bg:hover > *,
.gallery-video-box > a.scndry-bg:focus > * {color: #fff;}

/*=== Ver 2 ===*/
.gallery-wrap.v2 {margin-bottom: -1.875rem;}
.gallery-wrap.v2 .gallery-box {margin-bottom: 1.875rem;}
.gallery-box.v2:hover:before {opacity: .9;}
.gallery-box.v2 .gallery-info > h3 {
  font-size: 1.625rem;
  line-height: 2.15rem;
}

/*=== Ver 3 ===*/
.gallery-wrap.v3 {margin-bottom: -1.875rem;}
.gallery-wrap.v3 .gallery-box {margin-bottom: 1.875rem;}
.gallery-box.v3:hover:before {opacity: .9;}
.gallery-box.v3 .gallery-info > h3 {
  font-size: 1.5rem;
  line-height: 1.875rem;
}

/*===== Appointment Style =====*/
.appointment-desc {
  padding-left: 4.375rem;
  padding-right: 1.25rem;
}
.appointment-desc > h3 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 2.8125rem;
  max-width: 80%;
}
.appointment-desc > h3 + p {margin-top: 5px;}
.appointment-desc > p {font-size: 1rem;}
.appointment-desc > p + a {margin-top: 2.1875rem;}
.appointment-inner {padding: 0 2.1875rem;}
.appointment-calendar {
  -webkit-box-shadow: 0 3px 2.5rem rgba(0,0,0,.15);
  -ms-box-shadow: 0 3px 2.5rem rgba(0,0,0,.15);
  -o-box-shadow: 0 3px 2.5rem rgba(0,0,0,.15);
  box-shadow: 0 3px 2.5rem rgba(0,0,0,.15);
  padding: 1.125rem;
}
.appointment-calendar .fc-header-toolbar {
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding: 1.875rem 1.25rem;
  margin-bottom: 0;
}
.appointment-calendar .fc-body .fc-scroller {
  height: initial !important;
  overflow: hidden !important;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
.appointment-calendar .fc-header-toolbar .fc-left {
  float: none;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.appointment-calendar .fc-header-toolbar > *:not(.fc-left) {display: none;}
.appointment-calendar .fc-header-toolbar .fc-left > h2 {
  width: 100%;
  color: #fff;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 800;
  float: none;
}
.appointment-calendar .fc-head {
  background-color: #078494;
  text-transform: uppercase;
}
.appointment-calendar .fc-head .fc-day-header {
  font-weight: 800;
  padding: 13.75px;
  color: #fff;
  font-size: .9375rem;
}
.appointment-calendar td,
.appointment-calendar th {
  border: 0;
  font-family: Nunito;
  font-weight: 600;
  color: #555;
  font-size: 1.0625rem;
}
.appointment-calendar .fc-row:nth-child(2n+1) .fc-day:nth-child(2n+1),
.appointment-calendar .fc-row:nth-child(2n) .fc-day:nth-child(2n) {background-color: rgba(22,190,211,.09);}
.appointment-calendar .fc-row,
.appointment-calendar .fc-day {min-height: 5rem !important;}
.appointment-calendar .fc-row.fc-widget-header {min-height: initial !important;}
.appointment-calendar td.fc-day-top {
  min-height: 5rem;
  line-height: 5rem;
  text-align: center;
}
.appointment-calendar td.fc-day-top > span {
  float: none !important;
  display: inline-block !important;
}
.appointment-list-wrap {
  margin-top: 2.5rem;
  padding-top: 2.8125rem;
}
.appointment-list-title {padding: 0 2.5rem;}
.appointment-list-title > h4 {
  font-size: 1.375rem;
  color: var(--color3);
  font-weight: 800;
  line-height: 1.875rem;
}
.appointment-list-title > h4 span {margin-top: 3px;}
.appointment-list-title + .appointment-list {margin-top: 1.5625rem;}
.appointment-list > li:nth-child(2n+1) {background-color: #e7eefb;}
.appointment-list-item {padding: 1.5625rem 4.6875rem 1.6875rem 4.375rem;}
.appointment-item-inner {padding-left: 2.375rem;}
.appointment-item-inner > i {
  font-size: 1.5625rem;
  line-height: 1;
  left: 0;
  top: 3px;
}
.appointment-item-inner > h5 {
  font-size: 1.25rem;
  color: var(--color3);
  font-weight: 800;
}
.appointment-item-inner > h5 + span {margin-top: 2px;}
.appointment-item-inner > span {
  font-size: 1rem;
  color: #828282;
  font-family: Nunito;
  font-weight: 500;
  line-height: initial;
}
.appointment-item-btn > a.thm-btn {
  margin-bottom: -9.5px;
  font-size: 12px;
  padding: 9.5px 2.25rem;
}

/*===== Contact Style =====*/
.sec-title3 {
  margin-top: -8px;
  margin-bottom: 3.125rem;
}
.sec-title3-inner {max-width: 57%;}
.sec-title3-inner > h3 {
  font-size: 2.25rem;
  text-transform: uppercase;
  font-weight: 800;
}
.thm-layer .sec-title3-inner > h3,
.thm-layer .sec-title3-inner > p,
.thm-layer .social-links3 > h3 {color: #fff;}
.sec-title3-inner > h3 + p {margin-top: 1.125rem;}
.sec-title3-inner > p {
  font-size: 1.125rem;
  line-height: 1.625rem;
}
.contact-info-wrap {
  border-bottom: 1px solid rgba(255,255,255,.5);
  margin-bottom: 2.1875rem;
}
.contact-info-box {
  margin-bottom: 1.875rem;
  padding: 0 1.25rem;
}
.contact-info-box > i {
  height: 5.25rem;
  width: 5.25rem;
  line-height: 5.25rem;
  font-size: 2.25rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 25px rgba(193,193,193,.2);
  -ms-box-shadow: 0 0 25px rgba(193,193,193,.2);
  -o-box-shadow:  0 0 25px rgba(193,193,193,.2);
  box-shadow:  0 0 25px rgba(193,193,193,.2);
}
.contact-info-box:hover > i {color: var(--color3);}
.contact-info-box > i + span,
.contact-info-box > i + p {margin-top: 1.375rem;}
.contact-info-box > span,
.contact-info-box > p {
  font-size: 1.125rem;
  font-family: Nunito;
  font-weight: 600;
}
.thm-layer .contact-info-box > span,
.thm-layer .contact-info-box > p {color: #fff;}
.contact-info-box > span + span,
.contact-info-box > p + p {margin-top: 4px;}
.contact-info-wrap > div.row > div:not(:first-child) .contact-info-box:before,
.contact-info-wrap > div.row > div:not(:first-child) .contact-info-box:after {
  content: "";
  position: absolute;
}
.contact-info-wrap > div.row > div:not(:first-child) .contact-info-box:before {
  width: 1px;
  height: 6.25rem;
  border-left: 1px dashed #044552;
  left: -1rem;
  top: 50%;
  margin-top: -3.125rem;
}
.contact-info-wrap > div.row > div:not(:first-child) .contact-info-box:after {
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  background-color: #044552;
  left: -1.4375rem;
  top: 50%;
  margin-top: -3.25rem;
}
.social-links3.v2 > h3 {font-weight: 800;}
.social-links3.v2 > a {background-color: rgba(0,0,0,.2);}
.social-links3.v2 > a:hover,
.social-links3.v2 > a:focus {color: var(--color3);}
.sec-title4 {margin-bottom: 2.0625rem;}
.sec-title4-inner > h2 {
  font-size: 2.625rem;
  text-transform: uppercase;
}
.sec-title4-inner > h2 + p {margin-top: -2px;}
.sec-title4-inner > p {
  color: #555;
  font-size: 1rem;
}
.contact-form .wpcf7 {
    max-width: 37.8125rem;
    margin: 0 auto;
}
.contact-form .wpcf7 input, .contact-form .wpcf7 textarea {margin-bottom: 10px;}
.contact-form .wpcf7  input,
.contact-form .wpcf7  textarea {
  height: 3.75rem;
  color: #777;
}
.wpcf7 textarea,
.contact-form .wpcf7 textarea {height: 9.6875rem;}
.contact-form .wpcf7 input[type="submit"] {
  height: 3.875rem;
  font-size: 1rem;
  color:#fff;
  margin-left:50px;
}

/*===== 404 Error Style =====*/
.error-inner {max-width: 55%;}
.error-inner > i {
  height: 10rem;
  width: 10rem;
  line-height: 10rem;
  color: #fff;
  font-size: 3.4375rem;
  margin-bottom: 10px;
}
.error-inner > i:after {
  content: "";
  position: absolute;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 10px solid;
  bottom: -10px;
  left: 50%;
  margin-left: -12px;
}
.error-inner > i + .error-cap {margin-top: 2.625rem;}
.error-cap > strong {
  left: 0;
  right: 0;
  font-size: 11.6875rem;
  z-index: -1;
  font-family: Nunito;
  font-weight: 800;
  color: #d1f1f5;
  line-height: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.error-cap > h2 {
  font-size: 2.5rem;
  color: var(--color3);
}
.error-cap > h2 + p {margin-top: 1.125rem;}
.error-cap > p {font-size: 1.125rem;}
.error-cap + .search-form {margin-top: 2.1875rem;}
.search-form > input {
  height: 4.25rem;
  border: 2px solid #dadada;
  background-color: var(--color4);
  width: 100%;
  -webkit-border-radius: inherit;
  border-radius: inherit;
  font-size: .9375rem;
  color: #999;
  padding: 10px 4.6875rem 10px 1.875rem;
  font-family:Nunito;
}
.search-form > button {
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  font-size: 1.0625rem;
  color: #999;
  width: 4.6875rem;
}
.search-form + a {margin-top: 1.875rem;}
.error-inner .thm-btn {
  padding: 1.4375rem 3.125rem;
  font-size: 1rem;
  margin-bottom: -5px;
  color:#fff;
}

/*===== Search Found Style =====*/
.search-found-inner > h3 {
  font-size: 1.875rem;
  color: var(--color3);
  font-weight: 800;
}
.search-found-inner > h3 + form {margin-top: 1.0625rem;}
.search-found-inner > form + p {margin-top: 1.375rem;}
.search-found-inner > p {font-size: 1.125rem;}
.search-found-inner + .news-wrap {margin-top: 3.125rem;}

/*===== Sidebar Style =====*/
.sidebar {margin-bottom: -2.1875rem;}
.widget-box.v3 {
  margin-bottom: 2.1875rem;
  padding: 3.125rem 2.8125rem;
  max-width: 100%;
}
.widget-box .request-consult-title2 > h3 {
  font-size: 2.0625rem;
  line-height: 2.5rem
}
.widget-box .request-consult-title2 > p {line-height: 1.625rem;}
.widget-title3 {
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  color: var(--color3);
  font-weight: 800;
}
.widget-title3:before,
.widget-title3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
}
.sidebar .widget-title3:before, .sidebar .widget-title3:after {
    content: "";
    position: absolute;
    bottom: 35px;
    left: -20px;
}
.sidebar .widget-title3{
	margin-bottom:0px;
}

.widget-title3:before {bottom: 2.5px;}
.widget-title3:after {
  height: 10px;
  width: 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 3.5rem;
}
/*.thm-shp:before {background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape2.png);}*/
.tit-shp:before {
  width: 3.125rem;
  height: 10px;
  background-size: cover;
  background-position: center;
}
.tit-shp {padding-bottom: 1.25rem;}
.mini-post-box > a {
  flex: 0 0 4.5rem;
  max-width: 4.5rem;
  display: inline-block;
  position: relative;
}
.mini-post-box > a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 1;
  opacity: 0;
}
.mini-post-box:hover > a::before {opacity: .5;}
.mini-post-box > a:after {
  content: "\f0c1";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
}
.mini-post-box:hover > a:after {opacity: 1;}
.mini-post-box:hover > a img {
  -webkit-transform: scale(1.05) rotate(2deg);
  -ms-transform: scale(1.05) rotate(2deg);
  -o-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}
.mini-post-box > a + .mini-post-info {
  flex: 0 0 calc(100% - 4.5rem);
  max-width: calc(100% - 4.5rem);
  padding-left: 1.25rem;
}
.mini-post-info > h5 {
    font-size: 1rem;
    line-height: 1.35rem;
    font-weight: 700;
}
.mini-post-info > h5 + span {margin-top: 7px;}
.mini-post-info > span {
    font-family: Nunito;
    font-size: .85rem;
    font-weight: 600;
    color: #99582a;
}
.news-box2 ul.meta > li:not(.thm-clr):not(.scndry-clr), .meta3 li i{
	color: #c0a964;
}
.mini-post-info > span.price {
  font-size: 1.125rem;
  font-weight: 800;
}
.mini-post-info > span.price ins small {
  font-size: 65%;
  position: relative;
  top: -2px;
}
.mini-post-info > span.price del {
  color: #888;
  font-weight: 600;
  font-size: 12.4px;
  vertical-align: middle;
  display: inline-block;
}
.mini-post-info > span.price del small {
  font-size: 68%;
  position: relative;
  top: -1px;
}
.mini-post-info > span.price ins + del {margin-left: 8px;}
.mini-post-box + .mini-post-box {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 1.25rem;
}
.nesletter-form  h4 {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.nesletter-form h4 {color: #fff;}
.nesletter-form form {margin-top: 1.25rem;}
.nesletter-form form input {
  margin-bottom: 5px;
  color: #666;
  font-size: .9375rem;
  text-align: center;
}
.nesletter-form form input,
.nesletter-form form button {height: 4.0625rem;}
.nesletter-form form button {
  font-size: 1rem;
  text-transform: initial;
}
.nesletter-form form input[type="submit"]{
	color:#fff;
}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) {margin: -12px 0 -10px !important;}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 600;
}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a {padding-left: 1rem;}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a:before {
  content: "";
  height: 5px;
  width: 5px;
  background-color: #4328187a;
  top: 12.5px;
}
.widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li + li {
  padding-top: 9px;
  border-top: 1px solid rgba(0,0,0,.1);
  margin-top: 10px;
}
.widget_media_gallery {margin: 0 -5px;}

.widget_media_gallery dt img {
  display: block;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.widget_media_gallery dt:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0;
}
.widget_media_gallery .gallery-item dt img{
	border:none !important;
}
.widget_media_gallery dt:hover:before {opacity: .5;}
.insta-gal-list + .insta-gal-bottom {margin-top: .9375rem;}
.insta-gal-bottom-inner > span {
  text-transform: uppercase;
  font-family: Nunito;
  font-size: 14px;
  font-weight: 800;
  color: #999;
}
.insta-gal-bottom-inner > h5 {
  text-transform: uppercase;
  font-size: 1.125rem;
  color: #353535;
}
.insta-gal-bottom > a.thm-btn {
  font-size: 14px;
  color: #fff;
  padding: 13px 1.25rem;
}

/*===== Post Detail Style =====*/
.post-detail > h2 {
  font-size: 2.25rem;
  color: var(--color3);
  font-weight: 800;
}
.post-detail > h2 span {
  font-size: 14px;
  text-transform: uppercase;
  margin-left: 1.25rem;
}
.post-feat-img {margin-bottom: 2.0125rem;}
.post-feat-img > img {
  -webkit-border-radius: inherit;
  border-radius: inherit;
}
.post-detail > p {font-size: 1rem;}
.post-detail ul:not(.meta3), .post-detail > p + p {
    margin-top: 2rem;
    list-style: none;
    padding-left: 0;
}
.post-detail > ul + p {
  clear: both;
  margin-top: 2rem;
}
.post-detail > ul:not(.meta3) li {
  padding-left: 1.875rem;
  position: relative;
}
.post-detail > ul:not(.meta3) li + li {margin-top: 4px;}
.post-detail > ul:not(.meta3) li:before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  font-weight: 900;
}
.post-detail > p + img,
.post-detail > ul:not(.meta3) + img {margin-top: 2.625rem;}
.post-detail > h3 {
  font-size: 1.75rem;
  color: var(--color3);
  font-weight: 700;
}
.post-detail > h2 + img,
.post-detail > h3 + img,
.post-detail > img + h2,
.post-detail > img + h3 {margin-top: 2.3125rem;}
.post-detail > h3 + p {margin-top: 12px;}
.post-detail > h2 + p {margin-top: 1rem;}
.serv-post-date {
    top: 1.25rem;
    left: 1.25rem;
    color: #fff;
    font-family: Nunito;
    font-size: 13px;
    font-weight: 700;
    padding: 6.75px 1.5rem;
	line-height:1.3rem;
}
.serv-post-authr {
  bottom: -1.125rem;
  background-color: #fff;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  left: 2.1875rem;
  font-size: .9375rem;
  font-family: Nunito;
  font-weight: 700;
  color: #555;
  padding: 1.015625rem 2rem;
}
.serv-post-authr i {margin-right: 8px;}
.post-detail-meta-wrap {margin-bottom: 1.5rem;}
.meta3 > li {
  font-size: .9375rem;
  font-weight: 700;
  color: #555;
}
.meta3 > li a {color: #555;}
.meta3 > li:not(:first-child) {margin-left: 1.875rem;}
.meta3 > li i {margin-right: 10px;}
.social-links5 > span {
  font-family: Nunito;
  font-size: .9375rem;
  font-weight: 700;
  color: #555;
  margin-right: 10px;
}
.social-links5 > a {
  display: inline-block;
  height: 2.8125rem;
  line-height: 2.9rem;
  width: 2.8125rem;
  text-align: center;
  background-color: #f4f5fe;
  font-size: 14px;
  color: #43414e;
}
.social-links5 > a:not(:first-child) {margin-left: 5px;}
.social-links5 > a:hover,
.social-links5 > a:focus {color: #fff;}
blockquote.blockquote {
  padding: 2.375rem 2.5rem 2.1875rem;
  margin: 3.0625rem 0;
}
blockquote.blockquote > i {
  color: #fff;
  line-height: 1;
  font-size: 2rem;
}
blockquote.blockquote > i + p {margin-top: 1rem;}
blockquote.blockquote > p {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.875rem;
  max-width: 65%;
  font-style: italic;
  font-family: Nunito;
}
.post-detail p + figure,
.post-detail figure + p {margin-top: 2.1875rem;}
figure > a {
  top: 50%;
  left: 50%;
  color: #fff;
  line-height: 1;
  font-size: 6.25rem;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.alignright {
  float: right;
  margin-top: 2.1875rem;
  margin-left: 3.4375rem;
  margin-bottom: 0;
}
.alignleft {
  float: left;
  margin-top: 2.1875rem;
  margin-right: 3.4375rem;
  margin-bottom: 0;
}

/*=== Blog Detail Style ===*/
.post-detail.blog-detail,
.post-detail.course-detail {
  padding-left: 0rem;
  position: relative;
}
.post-detail.blog-detail .social-links5,
.post-detail.course-detail .social-links5 {
  right: 25px;
  max-width: 2.8125rem;
  top: 45px;
}
.post-detail.blog-detail .social-links5 > span,
.post-detail.course-detail .social-links5 > span {
  font-size: 14px;
  margin: 0 0 .9375rem;
}
.post-detail.blog-detail .social-links5 > span i,
.post-detail.course-detail .social-links5 > span i {margin-right: 8px;}
.post-detail.blog-detail .social-links5 > a:not(:first-child),
.post-detail.course-detail .social-links5 > a:not(:first-child) {margin: 5px 0 0;}
.post-detail.blog-detail .post-feat-img {
    margin-bottom: 1.7rem;
}
.meta3 > li span.post-detail-date {
  font-size: 13px;
  color: var(--color3);
  font-weight: 700;
  padding: 9px 1.25rem 8px;
  display: inline-block;
  line-height: initial;
  margin-right: 0;
}
.post-detail.blog-detail .meta3 {
    margin-bottom: 1.2rem;
}
.post-detail.blog-detail > p,
.post-detail.course-detail > p,
.post-detail.blog-detail > ul:not(.meta3) li,
.post-detail.course-detail > ul:not(.meta3) li {font-size: 1.0625rem;}
.post-detail.blog-detail > p img.alignright {
  margin-top: -2rem;
  margin-left: 2.5rem;
}
.post-detail.blog-detail > ul:not(.meta3) li + li {margin-top: 0;}
.post-detail.blog-detail blockquote.blockquote {margin-bottom: 4.5rem;}
.post-detail.blog-detail blockquote.blockquote > p {max-width: 75%;}
.post-detail-gal {margin-top: 1.25rem;}
.post-detail-gal a {
  display: block;
  margin-top: 1.25rem;
  position: relative;
}
.post-detail-gal a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0;
}
.post-detail-gal a:hover:before {opacity: .5;}
.post-detail-gal + p {margin-top: 2.5rem;}

/*=== Author Box Style ===*/
.author-box {
    align-items: center;
    padding: 1.5625rem 2.8125rem 1.5625rem 0;
    margin-top: 4.375rem !important;
    margin-bottom: 60px !important;
}

.author-box:before,
.comment:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 2.8125rem;
  background-color: #f4f5fe;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
  -ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}
.author-box > span {
  border: .9375rem solid #fff;
  -webkit-border-radius: .9375rem;
  border-radius: .9375rem;
  flex: 0 0 8rem;
  max-width: 8rem;
  -webkit-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  -ms-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  -o-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
}
.author-box > span img {
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
}
.author-box > span + .author-info {
  flex: 0 0 calc(100% - 8rem);
  max-width: calc(100% - 8rem);
  padding-left: 2.5rem;
}
.author-info > h4 {
  font-size: 1.5rem;
  color: var(--color3);
  font-weight: 700;
}
.author-info > h4 + p {margin-top: 13px;}
.author-info > p {
  font-size: 1rem;
  color: #555;
  line-height: 1.625rem;
}
.author-box .social-links6 {
  top: 0;
  right: 0;
}
.social-links6 > a {
  color: #fff;
  border-width: 2px;
  border-style: solid;
  width: 3.375rem;
  height: 2.875rem;
  text-align: center;
  line-height: 2.875rem;
  margin-left: 1px;
}
.social-links6 > a:hover,
.social-links6 > a:focus {background-color: #fff;}

/*=== Comments Style ===*/
.comments-wrap {margin-top: 3.375rem;}
.comments-wrap > h3,
.comment-reply-wrap > h3 {
  font-size: 1.5625rem;
  color: #373737;
  font-weight: 800;
}
.comments-thread {
  margin-top: 8px;
  display: inline-block;
}
.comments-thread > li {width: 100%;}
.comment {
  margin-top: 1.875rem;
  align-items: center;
  padding: 1.875rem 2.5rem 1.875rem 0;
}
.comment > span {
  border: .9375rem solid #fff;
  flex: 0 0 8.4375rem;
  max-width: 8.4375rem;
  -webkit-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  -ms-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  -o-box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
  box-shadow: 0 0 2.8125rem rgba(0,0,0,.02);
}
.comment > span + .comment-info {
  flex: 0 0 calc(100% - 8.4375rem);
  max-width: calc(100% - 8.4375rem);
  padding-left: 1.875rem;
}
.comment:before {background-color: #f3f7fe;}
.comment-info > h4 {
    font-size: 1.25rem;
    color: #454545;
    letter-spacing: -.3px;
    font-weight: 800;
    display: inline-block;

}
.comment-info > h4 + span,
.comment-info > span + span {margin-left: 1.25rem;}
.comment-info > span {
  font-size: 14px;
  font-family: Nunito;
  font-weight: 700;
}
.comment-info > span.rate {font-size: 13px;}
.comment-info > p {
  font-size: 1rem;
  color: #555;
  line-height: 1.625rem;
  margin-top: 8px;
  max-width: 90%;
}

/*=== Comment Reply Style ===*/
.comment-reply-wrap {margin-top: 3.75rem;}
.comment-reply-wrap > h3 {
  padding-bottom: 1.25rem;
  margin-bottom: 1.375rem;
}
.comment-reply-wrap > h3 span {
  font-weight: 400;
  font-size: 1.125rem;
  margin-left: 1.25rem;
  color: var(--color2);
}
.comment-reply-wrap > h3:before,
.additional-info > h3:before {
  content: "";
  width: 3.125rem;
  bottom: 2px;
  background-size: cover;
  background-position: center;
  left: 0;
  background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape2.png);
  height: 6px;
  position: absolute;
}
.comment-reply-wrap > h3:after,
.additional-info > h3:after {
  height: 10px;
  width: 10px;
  bottom: 0;
  content: "";
  position: absolute;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 3.75rem;
}
.comment-reply-wrap form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.comment-reply-wrap form textarea {
  height: 4rem;
  width: 100%;
  font-size: 1rem;
  color: #7f7f7f;
  background-color: #f5f8fc;
  border: 1px solid #e2e2e2;
  margin-top: 10px;
  padding: 10px 2.1875rem;
}
.comment-reply-wrap form textarea {
  padding-top: 1.625rem;
  height: 11.875rem;
  font-family:Nunito;
}
.comment-reply-wrap form button {margin-top: 1.25rem;}
.field-box span.rate {
  color: #d4d4d4;
  right: 1.5625rem;
  top: 2.1875rem;
  font-size: .9375rem;
}
.comment-reply-wrap form div.field-box + p {margin-top: 8px;}

/*=== Course Detail Style ===*/
.post-feat-img > span.price {
  left: 0;
  color: #fff;
  font-family: Nunito;
  font-weight: 800;
  font-size: 1.125rem;
  padding: 6.5px 12px;
  top: 13px;
}
.post-feat-img > span.price small {
  position: relative;
  top: -1px;
  font-weight: 700;
  font-size: 68%;
}
.post-detail.course-detail .post-feat-img {
  padding-left: 13px;
  min-width: calc(100% + 6.25rem);
  margin-left: -6.25rem;
  margin-bottom: 1.875rem;
}
.post-detail.course-detail .social-links5 {top: 24.0625rem;}
.course-detail-info-wrap {margin-bottom: 1.75rem;}
.course-detail-info-inner {
  max-width: calc(100% - 14.375rem);
  flex: 0 0 calc(100% - 14.375rem);
}
.course-authr-rate {
  border-bottom: 1px solid #dedede;
  padding-bottom: 1.125rem;
  margin-bottom: 1.3125rem;
  padding-top: 13.5px;
}
.course-authr-rate > span {
  font-size: .9375rem;
  font-weight: 700;
  color: #888;
  font-family: Nunito;
}
.course-authr-rate > span i {margin-right: 8px;}
.course-authr-rate > span + .rating {margin-left: 1.75rem;}
.course-detail-info-inner .meta3 {margin-bottom: 0;}
.course-detail-btn .thm-btn {padding: 1.09375rem 2rem;}
.post-detail.course-detail > p img {margin-top: 10px;}
.post-detail.course-detail > p img.alignright {margin-left: 1.875rem;}
.author-box.v2 {
  padding-bottom: 3.125rem;
  margin-bottom: 1.4375rem;
}
.author-box.v2:before {
  border-radius: 10px;
  clip-path: initial;
  left: 3.125rem;
}
.author-info > p + ul {margin-top: 1.125rem;}
.authr-meta > li {
  font-weight: 700;
  font-size: 1rem;
}
.authr-meta > li i {
  margin-right: 10px;
  vertical-align: middle;
}
.authr-meta > li:not(:first-child) {margin-left: 4.6875rem;}
.author-box.v2 .social-links6 {
  top: auto;
  bottom: -1.4375rem;
  left: 10.5rem;
}

/*===== Team Detail Style =====*/
.team-detail-img {margin-bottom: 3rem;}
.team-detail-img > img + .team-detail-info {margin-top: -4.375rem;}
.team-detail-info {
  -webkit-border-radius: 0 0 0 10px;
  border-radius: 0 0 0 10px;
  max-width: calc(100% - 3.125rem);
  padding: 2.1875rem 2.4375rem 2.375rem;
}
.team-detail-info > h3 {
  color: #fff;
  font-size: 1.625rem;
  font-weight: 800;
  font-family:'Saira';
}
.team-detail-info > h3 + span {margin-top: 5px;}
.team-detail-info > span {
  font-family: Nunito;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  padding-bottom: 1.25rem;
}
.team-detail-info > span:before {
  content: "";
  width: 3.125rem;
  height: 10px;
  position: absolute;
  left: 0;
  background-size: cover;
  background-position: center;
  background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape2.png);
  bottom: 0;
}
.team-detail-info:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  width: .9375rem;
  right: -.9375rem;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  -ms-clip-path: polygon(0 0, 0% 100%, 100% 0);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.team-detail-info > span + .team-detail-info-meta {margin-top: 1.125rem;}
.team-detail-info-meta > li {
  position: relative;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding-left: 1.75rem;
}
.team-detail-info-meta > li i {
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
}
.team-detail-info-meta > li:not(:first-child) {margin-top: 6px;}
.team-detail-meta {
  border: 1px solid #dadada;
  padding-top: 1.375rem;
}
.team-detail-meta-list > li {
  font-size: 1rem;
  font-weight: 700;
  flex: 0 0 33.33334%;
  max-width: 33.33334%;
  padding: 0 1.75rem;
  line-height: 1.75rem;
  word-wrap: break-word;
}
.team-detail-meta-list > li span.rate {font-size: 13px;}
.team-detail-meta > span {
  border-top: 1px solid #dadada;
  padding: 7.5px 1.75rem;
  font-size: 1rem;
  font-family: Nunito;
  font-weight: 700;
  color: #666;
  margin-top: 1.5625rem;
}
.team-detail-meta > span span {margin-right: 5px;}
.team-detail-meta > span i {
  margin-right: 10px;
  font-size: 1.375rem;
  vertical-align: middle;
}
.team-detail-wrap > h3 {
  font-weight: 800;
  color: var(--color3);
  font-size: 1.875rem;
  margin-top: 3.125rem;
}
.team-detail-wrap > h3 + p,
.team-detail-wrap > h3 + ul {margin-top: 1rem;}
.team-detail-wrap > p {font-size: 1rem;}
.team-detail-wrap > ul li {
  width: 100%;
  position: relative;
  padding-left: 1.875rem;
  font-size: 1rem;
  list-style:none;
}
.team-detail-wrap > ul{
    padding-left: 5px;
}
.team-detail-wrap > ul li:before {
  content: "\f061";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
}
.team-detail-wrap > ul li:not(:first-child) {margin-top: 5px;}
.team-detail-wrap .feat-serv-wrap {
  margin-left: -2.5rem;
  margin-top: .9375rem;
}
.team-detail-wrap .feat-serv-box {padding: 1.875rem;}
.team-detail-wrap .feat-serv-box > h3 {color: var(--color3);}
.team-detail-wrap .feat-serv-wrap > div.row > div:not(:first-child) .feat-serv-box:before {
  content: "";
  position: absolute;
  left: -.9375rem;
  top: 0;
  bottom: 0;
  border-left: 1px dashed;
}
.team-detail-wrap > p + p {margin-top: 1.875rem;}
.team-detail-wrap > div + p {margin-top: 3.25rem;}

/*===== Product Detail Style =====*/
.wide-sec3 .sidebar {
  max-width: 23.125rem; 
  margin-left: 2.0833125rem;
}
.prod-detail {min-width: calc(100% + 2.0833125rem);}
.prod-detail-img {
  flex: 0 0 27.1875rem;
  max-width: 27.1875rem;
}
.prod-detail-img + .prod-detail-info {
  flex: 0 0 calc(100% - 27.1875rem);
  max-width: calc(100% - 27.1875rem);
  padding-left: 4.0625rem;
}
.prod-detail-info {margin-top: 1.25rem;}
.rating .rate + a {margin-left: 1.25rem;}
.rating > a {
  font-family: Nunito;
  color: var(--color3);
  font-weight: 700;
  font-size: 14.65px;
}
.prod-detail-info .rating + h2 {margin-top: 1.25rem;}
.prod-detail-info > h2 {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--color3);
}
.prod-detail-info > h2 + span {margin-top: 7px;}
.prod-detail-info > span:not(.sku) {
  font-family: Nunito;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color3);
}
.prod-detail-info .rating .rate {font-size: 13px;}
.price-stock {margin-top: .9375rem;}
.price-stock span.price {
  font-family: Nunito;
  font-size: 1.5rem;
  font-weight: 700;
}
.price-stock > span:not(.price) {
  font-size: .9375rem;
  font-family: Nunito;
  font-weight: 700;
  color: var(--color3);
}
.price-stock span.price ins small {
  position: relative;
  font-size: 67%;
  top: -3px;
}
.price-stock span.price del {
  color: #888;
  font-size: 14px;
  font-weight: 600;
}
.price-stock span.price ins + del {margin-left: 10px;}
.price-stock > span:not(.price) span {margin-left: 12px;}
.sku {
  font-size: 1.0625rem;
  font-family: Nunito;
  font-weight: 700;
  color: var(--color3);
  margin-top: 9px;
}
.sku > i {
  color: #888;
  font-weight: 400;
}
.prod-detail-info > span + p {margin-top: 12px;}
.prod-detail-info > p {
  color: #555;
  letter-spacing: -.05px;
}
.prod-detail-info > form label {
  font-size: 1.25rem;
  font-family: Nunito;
  font-weight: 600;
  color: #888;
}
.prod-detail-info > form label + .slc-box {margin-left: 1.5625rem;}
.slc-box {
  background-color: #fff;
  -webkit-box-shadow: 0 0 3.75rem rgba(0,0,0,.09);
  -ms-box-shadow: 0 0 3.75rem rgba(0,0,0,.09);
  -o-box-shadow: 0 0 3.75rem rgba(0,0,0,.09);
  box-shadow: 0 0 3.75rem rgba(0,0,0,.09);
}
.slc-box:before {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  right: 0;
  top: 0;
  position: absolute;
  width: 3.375rem;
  line-height: 3.4375rem;
  font-size: 1.125rem;
  text-align: center;
}
.slc-box select {
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-family: Nunito;
  color: #999;
  font-weight: 700;
  width: 100%;
  padding: 14.75px 3.375rem 14.75px 1.375rem;
}
.prod-detail-info > form .slc-box {width: 9.25rem;}
.prod-detail-info > p + form {margin-top: 2rem;}
.prod-detail-info > form + button {margin-top: 2.8125rem;}
.prod-detail-info-wrap + .prod-detail-meta {margin-top: 3.125rem;}
.prod-detail-meta .social-links5 > a {
  background-color: #f3f7fe;
  color: var(--color5);
}
.prod-detail-meta .social-links5 > a:hover,
.prod-detail-meta .social-links5 > a:focus {color: #fff;}
.prod-detail-meta {
  padding-bottom: 1.5625rem;
  border-bottom: 1px dashed #ddd;
}
.meta3 > li span {
  margin-right: 10px;
  color: var(--color3);
}
.prod-detail-meta .meta3 > li {
  font-size: 1.0625rem;
  color: #4a4a4a;
  font-size: 1.0625rem;
}
.prod-detail-meta .meta3 > li a {font-size: 1.125rem;}
.prod-detail-meta + p {margin-top: 1.6875rem;}
.prod-detail > p {color: #555;}
.prod-detail > p + p {margin-top: 1.875rem;}
.additional-info {
  margin-top: 2.8125rem;
  margin-bottom: 10px;
}
.additional-info > h3 {
  font-size: 1.5625rem;
  color: #373737;
  font-weight: 800;
  padding-bottom: 1.375rem;
  margin-bottom: 0;
}
.additional-info > h3 + ul {
  flex: 0 0 calc(100% - 25.9375rem);
  max-width: calc(100% - 25.9375rem);
}
.additional-info > ul li {
  width: 100%;
  font-size: .9375rem;
  color: #555;
}
.additional-info > ul li + li {margin-top: 5px;}
.additional-info > ul li span {
  max-width: 10rem;
  width: 100%;
}

/*===== Input Checkbox Styling =====*/
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 2.438rem;
  cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label::before,
[type="checkbox"]:checked + label::before {
  border: 2px solid #e2e2e2;
  content: "";
  height: 1.5rem;
  left: 0;
  position: absolute;
  top: 3px;
  width: 1.5rem;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* checkbox mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 3px;
  left: 0;
  font-size: 1rem;
  color: #fff;
  -webkit-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  line-height: 1.5rem;
  width: 1.5rem;
  text-align: center;
  background-color: var(--color1);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* checkbox mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;  
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;  
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {color: #999;}
[type="checkbox"]:disabled + label {color: #aaa;}

.header-right.d-inline-flex.flex-wrap.align-items-center {
    padding: 18px 0px;
}
.feat-serv-wrap .mrg30 div[class^="col"] {
    width: auto;
    flex: 0 0 auto !important;
}
.enroll-inner p strong {
    font-size: 1.5rem;
    font-weight: normal;
}
.about-img .social-links4 a i:before{
	color:#010101;
}

.sn-about-img .social-links4 a i:before{
	color:#fff;
}


.logo-contact-menu-wrap.v2 {
    background: #fff;
}
.storie-box .storie-img > span{
	color:#fff;
}
.header-contact .fa-phone {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.header-right .thm-btn, .feat-cap2-wrap .v2.thm-btn{
	padding:1.09375rem 2.1125rem;
}
.simple-link {
    border-bottom: 1px solid;
    font-family: Nunito;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.simple-link i {
    margin-left: 12px;
    vertical-align: middle;
    display: inline-block;
}
header.style1 .header-left ul li a{
	color:#fff;
}
header.style1 .header-left ul ul li a, header.style1 .header-left ul ul li.current-menu-ancestor a{
	color:#333;
}
header.style1 nav > div > ul > li > a {
    padding: 0 2.44rem;
}
header.style1 nav > div > ul > li.menu-item-has-children > a {
    padding: 0 2.8rem 0 1.9rem;
}

header.style1 nav ul li.current-menu-ancestor:before, header.style1 nav ul li:nth-child(2):before  {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    background-color: #d0cfcf;
    left: 0;
    top: 1.6875rem;
}
.find-therapist-form-wrap input.thm-btn {
    width: 100%;
}
.find-therapist-form-wrap p {
    padding: 20px 30px 0;
    line-height: 1.5;
    font-weight: 400;
    color: #333;
    font-size: 14px;
    text-align: center;
}
.find-therapist-form-wrap.overlap340 {
    margin-top: -19.25rem;
}
.sec-title2-inner > p {
    font-size: 1.05rem;
    line-height: 1.8rem;
}
.request-consult-form .btn-box input[type="submit"] {
    width: 100%;
    padding: 19.5px 25px;
}
.request-consult-form p {
    color: #555;
    padding: 0 0 5px 0;
}
.pagination li.page-item.next a.page-link, .pagination li.page-item.prev a.page-link{
	color:#fff;
}
blockquote {
  font-size: 1.95rem;
  font-style: italic;
  line-height: 3rem;
  position: relative;
  background-color: #30398D;
  padding: 2.375rem 2.5rem 2.1875rem;
    margin: 3.0625rem 0;
  font-family: Poppins;
  border-radius:10px;
  text-align:center;
}

.single blockquote > p {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1.875rem;
    max-width: 65%;
    font-style: italic;
    font-family: Nunito;
	color:#fff;
}
.contact-info.thm-layer::before {
    background: #432818;
}
.contact-info-box:hover i, .contact-info .social-links3 a:hover i{
	color:#fff;
}
.single-team .spnsr-list {
    padding: 0;
}
.post-detail > p + *:not(h1) {
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.single-stories .post-detail > p + *:not(h1) {
    margin-bottom: 10px;
    margin-top: 2rem;
}
.post-detail .alignright, .post-detail .alignleft {
    border-radius: 10px;
    height: auto;
}
.single-services .post-detail ul:not(.meta3){
    margin-top: -0.7rem;
    list-style: none;
    padding-left: 0;
}
.single-post .meta3 > li span.post-detail-date {
    color: #fff;
}
.widget-box.widget.style2.widget_nav_menu ul li {
    font-size: 1rem !important;
}
footer .widget .contact-info-list li a:before{
	content:none;
}
.style3 .logo-menu-wrap.position-relative.w-100 {
    background: #fff;
}
.style3 .footer-data {
    margin-bottom: 0;
}
.bottom-bar.v3{
	background:rgba(0, 0, 0, .3);
}
.bottom.v3 .bottom-bar {
    padding: 1.875rem 0;
    border-top: 1px solid rgba(255, 255, 255, .25);
}
footer .widget-box img {
    margin-top: -2.5rem;
}
.widget-box.v2 > p {
    font-size: 1rem;
    margin-top: -8px;
    color: #d7d7d7;
    line-height: 1.7rem;
}
nav ul ul li a:hover {
    color: #ffb545;
}
.team-box:hover .team-info span {
    color: #fff;
}

.post-detail .social-links5 i.fas.fa-share-alt {
    padding-left: 5px;
}
dt.gallery-icon.landscape {
    position: relative;
}
.gallery-item dt.gallery-icon:hover:before {
    opacity: .5;
	border-radius:10px;
	padding:0;
	border:none;
	cursor:pointer;
}
.gallery-item dt.gallery-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0;
}

.single #gallery-1 img {
    border: none;
    border-radius: 10px;
    width: 100%;
    height: auto;
}
.comment-info > span + span {
    margin-left: 1.25rem;
    color: #0fb8cd !important;
}
.comment-info .comment-reply-link {
    font-size: 15px;
    padding: 0;
    margin: 0;
}
.comment-reply-wrap p.logged-in-as {
    padding-left: 3px;
}
.comment-reply-wrap p.comment-notes {
    padding-left: 5px;
}
.comment-reply-wrap p.comment-form-cookies-consent {
    float: left;
    margin: 10px 0 0 0;
    padding: 0 0 0 5px;
}
.comment-reply-wrap p.form-submit {
    padding: 5px 0 0 5px;
}
.comment-reply-wrap input[type="submit"]{
	background:#432818;
	color:#fff;
}
.comment-reply-wrap input[type="submit"]:hover{
	background:#c0a964;
}
.set-it-center .get-time-request-wrap {
	margin:0;
}

.header-search form input {
    border-bottom: 2px solid rgba(255,255,255,.3);
    height: 5rem;
    font-size: 2.3rem;
    width: 100%;
    background-color: transparent;
    padding-right: 5rem;
    color: #fff;
    font-family: Nunito;
    padding-left: 2rem;
}

.header-search form button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5rem;
    background-color: transparent;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
.header-search form i.fas.fa-search:hover {
    color: #FFB545;
}
.search-no-results i.flaticon-close.d-inline-block.position-relative.brd-rd10.thm-bg, .error404 i.flaticon-close.d-inline-block.position-relative.brd-rd10.thm-bg{
    background: #432818;
}
aside .widget-title3:after, .nesletter_widget{
	background:#0a0e18;
}
.serv-post-authr i{
	color:#c0a964;
}
.widget > div > ul.cate-list li, .widget > ul.cate-list li, aside .widget_nav_menu ul.menu, aside .quick_links ul li{
	padding-left:0 !important;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900;
    color: #121323;
    font-family: 'Nunito';
}
.nesletter-form.text-center.w-100 {
    margin-bottom: -45px;
}
.widget-box.v3.appointment-form {
    padding: 0;
}
.request-consult-wrap2 form .thm-btn {
    background: #23BDD1;
    margin-bottom: -20px;
}
footer .fixed-bg, footer .parallax-bg {
    background-position: top;
}

.request-consult-wrap2 form .btn-box input[type="submit"]:hover{
	background:#FFB545;
}

.news-info2 ul.meta > li {
    color: #7f7f7f;
}
a.simple-link.thm-clr.d-inline-block {
    padding-bottom: 5px;
    margin-top: 7px;
}
.view-more p a:hover {
    color: #02bbce;
}
.curve-sec .sec-title-inner > h3{
	margin: 10px 0;
    padding: 0 0 10px 0;
    float: left;
}
.get-time-box + a {
    background: #99582a;
	color:#fff;
}
.dark-sec .quote-box-inner > i{
	color:#fff;
}
/* New Rules */

nav ul li{
	color:#1b1b1b;
}

nav .sub-menu li a {
    font-weight: 600;
    font-size: 15px;
}

.sticky-menu nav > div > ul > li {
    line-height: 5rem;
    color: #1b111b;
}
.sticky-menu nav ul li a {
    font-size: 1.05rem;
    text-transform: capitalize;
    font-weight: 600;
    color: #1b1b1b;
}

.sticky-menu nav ul.sub-menu li a { 
	font-weight:600;
	font-size:1rem;
}

.sticky-menu nav ul.sub-menu li a:hover { 
	color:#ffb545;
}


#hm .sec-title2-inner > span {
    color: #02bbce;
    letter-spacing: 2px;
}
#hm .serv-box-inner > h4 {
    font-size: 1.625rem;
    font-weight: 700;
}

#hm .thm-btn.v2{
	background:#FFB545;
}

#hm .sec-title-inner span{
    color: #FFB545;
}
#hm .thm-shp.v2:before {
    background-image: url(/host/play4you/wp-content/themes/arrow/assets/images/line-mini-shape3.png);
}

#hm .thm-shp.v2:after {
	background:#FFB545;
}

#hm .sec-title-inner > p {
    font-size: 1.05rem;
    line-height: 1.6rem;
}

#hm .sec-title-inner > h2 {
    font-size: 2.5rem;
    font-weight: 800;
}

.request-consult-title2.w-100 {
    margin-bottom: 15px;
}
.storie-info > h3 + span{
	color:#02bbce;
}
.storie-info span.z1 {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 200px;
    top: -20px;
    padding: 7px 0;
    box-shadow: -1px 5px 4px 2px rgb(148 148 148 / 10%);
	border-radius:7px;
	color:#fff;
}

.pt-325.scndry-layer {
    padding-top: 18.3125rem;
}
.storie-info a:hover{
	color:#ffb545;
}
span.sep-brd {
    padding: 0 5px;
    font-size: 18px;
    font-weight: 500;
    color: #bdbdbd;
}
.meta2 sup {
    font-weight: 400;
    font-size: 1.1rem;
}
.social-links5 > span {
    display: none !important;
}

.serv-info2 > h3 a::before{
	background:#FFB545;
}
.serv-info2 > h3 a:hover::before {
    background: #122136 !important;
}
.blu-clr {
    color: #432818 !important;
}
.single-stories .post-detail p img {
    border-radius: 10px;
    box-shadow: 5px 4px 3px #fbfbfb;
}
.quote-facts-wrap .fact-box-inner i{
	color:#fff;
}

.quote-facts-wrap .fact-box-inner sup{
	color:#FFB545;
}

.quote-facts-wrap .fact-box-inner h4 a:hover{
	color:#c0a964;
}

footer .widget-box .logo img {
    margin-top: -2.5rem;
    width: 190px;
    height: auto;
}
footer .widget-title2 {
    margin-bottom: 1.2rem;
    font-weight: 600;
	font-family: 'Saira';
}
.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-title-tag span.frist-word {
    font-weight: inherit;
    text-transform: capitalize;
    font-family: 'Saira';
}

.bdt-pagepiling-slider .section.active .bdt-prime-slider-content .bdt-title-tag{
	font-family: 'Nunito';
	text-transform: capitalize;
}

.bdt-pagepiling-slider .bdt-prime-slider-content .bdt-slider-excerpt p {
    margin: 0;
    line-height: 1.6;
    font-size: 16px;
    font-family: 'Nunito';
}

@media (min-width: 1024px){
.bdt-pagepiling-slider .bdt-slide-btn {
    width: 250px !important;
    font-size: 17px;
}
}

.bdt-sub-title > h4{
	position:relative;
} 

.bdt-sub-title > h4:before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 3.25rem;
    height: 3px;
    margin-left: 0;
    background: #ffb545;
    right: auto;
}

/* New Styles Goes Here */

.pull-left{
	float:left;
}

.pull-right{
	float:right;
}

.sec-title-inner span{
	font-size:1.125rem;
}

.sec-title-inner h2{
	font-size:2.875rem;
}

.sn-sec-title p {
    max-width: 600px;
    font-family: 'Nunito';
    line-height: 1.6rem;
}

/*** 

====================================================================
	Main Slider Section
====================================================================

***/

.sn-main-slider{
	position:relative;
	overflow:hidden;
	background: rgba(156, 234, 239, 0.15);
}

.sn-main-slider .slide{
	position:relative;
	overflow:hidden;
	padding:70px 0px 170px;
}

.sn-main-slider .content-column{
	position:relative;
}

.sn-main-slider .content-column .inner-column{
	position:relative;
	padding-top:120px;
}

.sn-main-slider .title{
	position:relative;
	font-weight: 400;
	margin-bottom: 20px;
	opacity: 0;
	color:#685434;
	font-size:18px;
	padding-bottom:12px;
	transform: scaleY(0);
	transform-origin: top;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	font-family:Nunito;
}

.sn-main-slider .title:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:50px;
	height:3px;
	background-color:#e3a751;
}

.sn-main-slider .active .title{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}

.sn-main-slider h1{
	color:#2c2d31;
	margin-bottom:5px;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}

.sn-main-slider .active h1{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 600ms;
	-moz-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
	-o-transition-delay: 600ms;
	transition-delay: 600ms;
}

.sn-main-slider .text {
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0;
    color: #252525;
    font-size: 16px;
    line-height: 1.7em;
    transform: scaleY(0);
    transform-origin: top;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 100ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
    font-family: 'Nunito';
    width: 85%;
}

.sn-main-slider .active .text{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 900ms;
	-moz-transition-delay: 900ms;
	-ms-transition-delay: 900ms;
	-o-transition-delay: 900ms;
	transition-delay: 900ms;
}

.sn-main-slider .btns-box{
	opacity:0;
	transform: scaleY(0);
	transform-origin: top;
	display:inline-block;
	-webkit-transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
}

.sn-main-slider .active .btns-box{
	opacity: 1;
	transform: scaleY(1);
	transition-delay:900ms;
}

.sn-main-slider .btns-box .theme-btn{
	margin-right:25px;
}

.sn-main-slider .image{
	position:relative;
	opacity:0;
	width:520px;
	height:520px;
	overflow:hidden;
	border-radius:50%;
	display:inline-block;
	-webkit-transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
	z-index:99;
}

.sn-main-slider .active .image {
    opacity: 1;
    transition-delay: 200ms;
    margin-top: 0px;
}

.sn-main-slider .owl-carousel .owl-stage-outer{
	
}

.sn-main-slider .image-column{
	position:relative;
}

.sn-main-slider .image-column .inner-column{
	position:relative;
	display:inline-block;
}

.sn-main-slider .image-column .circle-layer{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	border-radius:50%;
	display:inline-block;
}

.sn-main-slider .image-column .circle-layer .circle-one{
	position:absolute;
	left:60px;
	top:10px;
	width:90px;
	height:90px;
	border-radius:50%;
	background-color:#bb9457;
}

.sn-main-slider .image-column .circle-layer .circle-two{
	position:absolute;
	right:-30px;
	top:150px;
	width:90px;
	height:90px;
	z-index:2;
	border-radius:50%;
	background-color:#432818;
}

.sn-main-slider .owl-dots{
	display:none;
}

.sn-main-slider .owl-nav{
	position:absolute;
	left:0px;
	top:45%;
	right:0px;
	margin-top:-20px;
}

.sn-main-slider .owl-nav .owl-prev{
	position:absolute;
	left:30px;
	top:0px;
	width:50px;
	height:50px;
	color:#ffffff;
	font-size:24px;
	text-align:center;
	line-height:50px;
	border-radius:2px;
	display:inline-block;
	background-color:#122136;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sn-main-slider .owl-nav .owl-next{
	position:absolute;
	right:20px;
	top:0px;
	width:50px;
	height:50px;
	color:#ffffff;
	font-size:24px;
	text-align:center;
	line-height:50px;
	border-radius:2px;
	display:inline-block;
	background-color:#122136;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sn-main-slider .owl-nav .owl-prev:hover,
.sn-main-slider .owl-nav .owl-next:hover{
	color:#ffffff;
}

@keyframes rotateme {
    
     0% {
        transform: rotate(0deg);
        opacity: 1;
      }

    50% {
        transform: rotate(180deg);
      }
    100% {
        transform: rotate(360deg);
        opacity: 1;
      }
}

.sn-main-slider .image-column .circle-layer{
    animation-name: rotateme; 
    animation-duration: 60s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	
	-webkit-animation-name: rotateme; 
    -webkit-animation-duration: 60s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	
	-moz-animation-name: rotateme; 
    -moz-animation-duration: 60s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	
	-ms-animation-name: rotateme; 
    -ms-animation-duration: 60s; 
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
	
	-o-animation-name: rotateme; 
    -o-animation-duration: 60s; 
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}


.sn-featured-section{
	position:relative;
}

.sn-featured-section .inner-container{
	position:relative;
	margin-top:-90px;
	z-index:1;
	background-color:#13233a;
}

.sn-featured-section .inner-container .sn-feature-block{
	padding:0px 0px;
	float:left;
}

.sn-feature-block{
	position:relative;
}

.sn-feature-block .inner-box{
	position:relative;
	padding:40px 35px 35px;
	background-color:#13233a;
}

.sn-feature-block .inner-box:before{
	position: absolute;
	content: '';
    top: 0;
    bottom: 95%;
    left: 47.5%;
    right: 47.5%;
    opacity: 0;
	background-color:#bb9457;
	-webkit-transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
}

.sn-feature-block.active .inner-box::before,
.sn-feature-block .inner-box:hover::before{
	bottom: 0;
    right: 0;
    left: 0;
    opacity: 1;
    -webkit-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
    -ms-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
    -o-transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
    transition: bottom .25s ease-in 0s, right .25s ease-in .4s, left .25s ease-in .4s;
}

.sn-feature-block .inner-box .content{
	position:relative;
	padding-left:80px;
}

.sn-feature-block.active .inner-box .content .icon,
.sn-feature-block .inner-box:hover .content .icon{
	transform:rotateY(180deg);
}

.sn-feature-block .inner-box .content .icon{
	position:absolute;
	left:0px;
	top:0px;
	color:#ffffff;
	font-size:58px;
	line-height:1em;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sn-feature-block .inner-box h4 {
    position: relative;
    color: #ffffff;
    line-height: 1.2em;
	font-weight:700;
}

.sn-feature-block .inner-box .text {
    position: relative;
    color: #ffffff;
    font-size: 16px;
    font-family: 'Nunito';
}



.sn-ser-block.serv-box4 > i{
	position:absolute;
	left:0px;
	top:30px;
	width:80px;
	height:80px;
	color:#ffffff;
	font-size:40px;
	line-height:80px;
	text-align:center;
	border-radius:50%;
	background-color:#ffb243;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.sn-ser-block:hover > i{
	transform:rotateY(180deg) !important;
}

.sn-ser-block.serv-box4 .serv-box4-inner{
	padding-left:100px;
	max-width:inherit;
	flex:inherit;
	padding-top:30px;
	padding-bottom:28px;
}

.sn-ser-block.serv-box4 .serv-box4-inner:before{
	position:absolute;
	content:'';
	left:40px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:-1;
	background-color:#ffffff;
	transform:skew(-10deg);
}

.sn-ser-block.serv-box4 .side-arrow{
	position:absolute;
	right:0px;
	top:0px;
	width:35px;
	height:145px;
	color:#ffffff;
	font-size:18px;
	text-align:center;
	line-height:151px;
	transform:skew(-10deg);
	background-color:#2f3a8c;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sn-ser-block.serv-box4 .side-arrow:hover{
	background-color:#ffb446;
}




.sn-enroll-wrap:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0.90;
	z-index:-1;
	background-color:#432818;
}

.sn-enroll-wrap h3{
	color:#ffffff;
	font-size:40px;
	font-weight:600;
	max-width:340px;
	margin-bottom:15px;
}

.sn-enroll-wrap .enroll-inner{
	max-width:100%;
}

.sn-enroll-wrap .enroll-inner .pull-right p{
	max-width:600px;
	color:#ffffff;
	padding-left:35px;
	margin-bottom:40px;
	border-left:3px solid #ffb345;
}



.sn-list-style {
    position: relative;
    margin-left: 15px;
    margin-top: 18px;
    margin-bottom: 25px;
}

.sn-list-style li {
    position: relative;
    color: #393939;
    font-size: 17px;
    padding-left: 30px;
    margin-bottom: 3px;
    list-style: none;
    margin-left: 0;
}

.sn-list-style li:before{
	position:absolute;
	content:'\f11c';
	left:0px;
	color:#ffb444;
	font-size:16px;
	font-weight:600;
	font-family: "Flaticon";
}

.sn-about-img{
	padding-left:50px;
}

.sn-about-img .about-info{
	left:-80px;
}

.sn-about-img > img{
	clip-path:inherit;
}

.sn-about-img .social-links4{
	left:-10px;
	top:0px;
	transform:translateY(0%);
}

.sn-about-img .social-links4 > a{
	color:#ffffff;
	background-color:#432818;
}

.sn-about-img .social-links4 > a:hover{
	background-color:#ffb442;
}

.sn-about-img .about-info{
	text-align:center;
	padding-top:50px;
}

.sn-about-img .about-info h3{
	position:relative;
	z-index:2;
}

.sn-about-img .about-info > i{
	position:absolute;
	left:50%;
	top:-20px;
	width:90px;
	height:90px;
	font-size:44px;
	line-height:90px;
	color:#fff;
	opacity:1;
	z-index:1;
	border-radius:50%;
	text-align:center;
	display:inline-block;
	background-color:#BB9457;
	transform:translateX(-50%);
}


.sn-about-time{
	position:relative;
	padding-left:50px;
	text-align:left;
	font-weight:600;
}

.sn-about-time span {
    display: block;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 0px;
}

.sn-about-time .clock-icon{
	position:absolute;
	left:0px;
	top:0px;
	color:#c0a964;
	font-size:30px;
	line-height:1em;
	font-weight:400;
}

.sn-about-section{
	position:relative;
	padding:100px 0px 70px;
	background-color:#f9f9f9;
}

.sn-about-section .content-column{
	position:relative;
	margin-bottom:30px;
}

.sn-about-section .content-column .inner-column{
	position:relative;
}

.sn-about-section .content-column .title {
    position: relative;
    color: #11b8ca;
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Nunito';
}

.sn-about-section .content-column p {
    position: relative;
    line-height: 1.5em;
    font-family: 'Nunito';
}

.sn-about-section .content-column h2{
	position:relative;
	margin-bottom:30px;
	padding-bottom:25px;
}

.sn-about-section .content-column h2:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:120px;
	height:2px;
	background-color:#11b8ca;
}

.sn-about-section .content-column h2:after{
	position:absolute;
	content:'';
	left:0px;
	bottom:-3px;
	width:50px;
	height:8px;
	background-color:#11b8ca;
}

.sn-about-section .content-column .about-play-btn{
	position:relative;
	color:#000000;
	padding:18px 36px;
	border-radius:5px;
	font-weight:600;
	margin-top:20px;
	display:inline-block;
	background-color:#e3ca94;
	text-transform:uppercase;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
	font-family:Nunito;
}

.sn-about-section .content-column .about-play-btn i{
	margin-right:15px;
}

.sn-about-section .content-column .about-play-btn:hover {
    color: #ffffff;
    background-color: #043b40;
    font-family: 'Nunito';
}

.sn-about-section .blocks-column{
	position:relative;
	margin-bottom:30px;
}

.sn-about-section .blocks-column .inner-column{
	position:relative;
}

.sn-about-section .blocks-column .inner-column .sn-about-block:nth-child(2){
	transform:translateY(120px);
}

.sn-about-block{
	position:relative;
	margin-bottom:25px;
}

.sn-about-block .inner-box{
	position:relative;
	text-align:center;
	padding:35px 15px;
	border-radius:5px;
	background-color:#043b40;
}

.sn-about-block .inner-box .icon{
	position:relative;
	font-size:64px;
	line-height:1em;
	color:#ffffff;
	margin-bottom:15px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.sn-about-block .inner-box:hover .icon{
	-webkit-transform: scale(-1) rotate(180deg);
    -moz-transform: scale(-1) rotate(180deg);
    -ms-transform: scale(-1) rotate(180deg);
    -o-transform: scale(-1) rotate(180deg);
    transform: scale(-1) rotate(180deg);
}

.sn-about-block .inner-box h4{
	position:relative;
	color:#ffffff;
	text-transform:capitalize;
}

.sn-about-block .inner-box .text{
	position:relative;
	color:#ffffff;
}

.sn-about-block:nth-child(2) .inner-box{
	background-color:#e3ca94;
}

.sn-about-block:nth-child(3) .inner-box{
	background-color:#0fb8cf;
}






@media only screen and (max-width: 1140px){
	
	.sn-main-slider .image{
		width:490px;
		height:490px;
	}
	
	.sn-ser-block.serv-box4 .serv-box4-inner p{
		font-size:16px;
		padding-right:40px;
	}
	
	.sn-enroll-wrap.enroll-wrap{
		padding:76px 40px;
	}
	
	.sn-enroll-wrap .enroll-inner .pull-right p{
		max-width:560px;
	}
	
	.sn-list-style{
		margin-left:0px;
	}
	
	.sn-about-img{
		padding-left:0px;
	}
	
	.sn-about-img .about-info{
		top:0px;
		left:0px;
		position:relative !important;
	}
	
	.sn-about-img .social-links4{
		left:15px;
		top:15px;
	}
	
}

@media only screen and (max-width: 1023px){
	
	.sn-main-slider .content-column{
		margin-bottom:40px;
	}
	
	.sn-sec-title p{
		max-width:100%;
		margin-top:20px;
	}
	
	.sn-enroll-wrap .enroll-inner .pull-right p{
		max-width:100%;
		margin-top:20px;
	}
	
}

@media only screen and (max-width: 767px){
	
	.sn-feature-block .inner-box .content{
		padding-left:0px;
		text-align:center;
	}
	
	.sn-feature-block .inner-box .content .icon{
		position:relative;
		margin-bottom:20px;
		display:block;
	}
	
	.sn-about-section .blocks-column .inner-column .sn-about-block:nth-child(2){
		transform:translateY(0px);
	}
	
}

@media only screen and (max-width: 599px){
	
	.sn-feature-block{
		width:100%;
	}
	
	.sn-main-slider .image{
		width:100%;
		height:auto;
	}
	
	.sn-list-style{
		text-align:left;
	}
	
	.sn-main-slider .owl-nav{
		margin-top:0px;
		top:62%;
	}
	
	.padd-top-mob{
		padding-top:63px;
	}
	
}

@media only screen and (max-width: 479px) {
	
	.sn-ser-block.serv-box4 > i{
		position:relative;
		top:0px;
		top:25px;
		margin:0 auto;
		display:inline-block;
	}
	
	.sec-title-inner h2{
		font-size:2rem;
	}
	
	.sn-main-slider .image-column .circle-layer{
		display:none;
	}
	
	.sn-ser-block.serv-box4 .serv-box4-inner{
		text-align:center;
		padding:45px 25px 25px;
	}
	
	.sn-ser-block.serv-box4 .serv-box4-inner:before{
		left:0px;
		transform:skew(0deg);
	}
	
	.sn-ser-block.serv-box4 .serv-box4-inner p{
		padding-right:0px;
	}
	
	.sn-ser-block.serv-box4 .side-arrow{
		position:relative;
		transform:skew(0deg);
		width:100%;
		height:auto;
		line-height:40px;
	}
	
	.sn-enroll-wrap h3{
		font-size:26px;
	}
	
	.sn-main-slider .owl-nav{
		top:65%;
	}
	
}

.sn-main-slider-carousel .title:before {
    position: absolute;
    content: '';
    left: 0px;
    bottom: 0px;
    width: 100px;
    height: 2px;
    background-color: #432818;
}

.sn-main-slider-carousel .title:after {
    position: absolute;
    content: '';
    left: 0px;
    bottom: -1.5px;
    width: 35px;
    height: 5px;
    background-color: #432818;
}
.sn-main-slider h1 {
    font-size: 46px;
    width: 95%;
    line-height: 1.2;
}
.sn-ser-block h3.mb-0 {
    font-size: 24px;
}
span.position-relative.thm-clr.d-block.font-weight-extrabold {
    font-family: 'Nunito';
}
.enroll-inner span.d-block.thm-clr {
    font-family: 'Nunito';
}
header.style2 .logo-contact-menu-wrap.v2 .header-contact + a {
    margin-left: 1.375rem;
}
header.style2 .topbar-right.d-inline-flex.align-items-center.flex-wrap {
    margin-right: 15px;
}
header.style2 .header-right.d-inline-flex.flex-wrap.align-items-center {
    padding: 18px 0px;
    margin-right: 20px;
}
.sn-feature-block.active .content a{
	color:#fff;
}
.style2 .topbar-inner p {
    margin: 0;
}

.style2 .topbar-inner p a {
    color: #ffb545;
}
.style1 ul.header-contact-info {
    padding-right: 5px;
}
header.style1.w-100 {
    background: #fff;
}
.facts-wrap .fact-box-inner sup {
    top: -.5em;
    left: -8px;
}

.single-stories h3.mb-0 {
    float: left;
    width: 100%;
    padding: 20px 0px 10px 0;
}
.top-noti p a:hover {
    color: red;
}
.get-time-inner span.thm-clr.d-block {
    color: #99582a;
}
.get-time-inner .sec-title-inner > h2 + p {
	line-height:1.5rem;
    color: #1d1d1d;
}
.get-time-box.brd-rd10.bg-white.w-100{
	background-color: rgba(255, 255, 255, 0.3)!important;
}
.news-info2 > h3 + ul li:last-child a {
    color: #432818;
}

.news-info2 > h3 + ul li:last-child a:hover {
    color: #c0a964;
}

.style1 .logo-contact-inner img {
    min-width: 200px !important;
}


.widget-box .widget-title2 > i{
	color:#BB9457;
}
.combo .get-time-box > span{
	background-color:#dbf6f7;
}

header.style1 .header-contact-cart span.d-block.scndry-clr {
    color: #c49a6c;
}
header.style1 .header-left .menu-main-menu .mb-0 {
    margin-bottom: 0!important;
    margin-top: -1px;
}
.fact-box > i, .feat-caro .feat-cap > i + span {
    color: #fff;
}
.team-info > h3 + span {
    color: #edd18b;
}

.team-info h3 a:hover {
    color: #edd18b;
}
.request-consult-form .btn-box input[type="submit"]:hover {
    background: #432818;
}
.fact-box sup {
    color: #c0a964 ;
}

.preloader-inner i{
	color:#c0a964;
}

.fact-box.v2 .fact-box-inner sup{
	color:#fff;
}

.widget a:hover {
    color: #99582a;
}

.nesletter-form form input[type="submit"]:hover {
    background: #c0a964;
}

.fg-item-content p {
    color: #fff !important;
}


element.style {
}
.elementor-2508 .elementor-element.elementor-element-8570862 .eael-pricing {
    border-radius: 5px;
}
.eael-pricing.style-1:hover {
    -webkit-box-shadow:  0 10px 20px 2px rgb(140, 140, 140, .05), 0 10px 20px 2px rgb(0, 0, 0, .02);
    box-shadow: 0 10px 20px 2px rgb(140, 140, 140, .05), 0 10px 20px 2px rgb(0, 0, 0, .02);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.request-consult-wrap2 form .thm-btn:hover {
    background: #c0a964 ;
}

.find-therapist-form-wrap input.thm-btn:hover {
    background: #432818;
}
.slick-slider:not(.feat-caro) > button.slick-arrow:hover {
    background: #c0a964;
}
header.style1 .header-right .thm-btn{
	color:#fff;
}
.feat-caro button i, .online-portal-wrap a.thm-btn {
    color: #fff;
}
.find-therapist-form-wrap strong {
    font-weight: bolder;
}
.sn-main-slider-carousel h1 strong {
    color: #07BEB8;
}
img.avatar.avatar-43.wp-user-avatar.wp-user-avatar-43.alignnone.photo.img-fluid.w-100.brd-rd5 {
    max-width: 60px;
    padding: 0px;
    margin: 0;
}
.news-caro .news-box-inner > h3{
	margin-top:20px;
}
.team-detail-meta-list > li:last-child {
    font-size: 14px;
}
.team-detail-meta-list > li span:last-child {
    font-size: 1rem;
}
.search-results .news-info2 > img.authr-img {
    border: 5px solid #fff;
    left: 1.8125rem;
    top: -3rem;
    max-width: 70px;
}
.search-results .news-info2 > h3 + ul {
    margin-top: 0.6125rem;
}
.method-apply-inner .thm-shp:before, .get-time-wrap .thm-shp:before, .elementor-widget-doctors_list .thm-shp:before, .elementor-widget-services_grid .thm-shp:before, .elementor-widget-video_intro .thm-shp:before, .elementor-widget-stories_grid .thm-shp:before, .elementor-widget-blog_grid .thm-shp:before, .elementor-widget-latest_news_articles .thm-shp:before  {
	background-image:none !important;
}
#comments-thread-link .comment > span{
	border:none;
}

#comments-thread-link h3.mb-0 {
    text-transform: capitalize;
    margin-bottom: -10px !important;
}

.single .blog-detail blockquote {
    margin-bottom: 35px !important;
}
.elementor-widget-contact_form .sec-title4 {
    margin-bottom: 1.0625rem;
}
.bottom-bar .social-links3.d-flex.flex-wrap.align-items-center a i {
    color: #fff;
}
footer .widget > div > ul li, footer .widget > ul li {
    position: relative;
    padding-left: 5px;
    font-family: 'Nunito';
    font-weight: 600;
}
footer form.newsletter-form input::placeholder {
    color: #fff;
	font-family:'Nunito';
}
/* Contact Form Changes */
.elementor-widget-contact_info .social-links3 {
    display: none !important;
}
.contact-form .wpcf7 textarea {
    padding-top: 20px;
}
.news-img2:hover > a:before {
    opacity: 0.5;
}
.news-img2.position-relative.overflow-hidden.w-100 {
    border-radius: 10px 10px 0 0;
}

footer .widget-box.v2.w-100 img {
    margin: 0 0 15px 0;
}
ol.breadcrumb li.breadcrumb-item.active{
	color:#fff;
}

.swiper-wrapper .swiper-button-next, .swiper-wrapper .swiper-button-prev{
	background:#fff;
}
.swiper-wrapper .swiper-button-next:after, .swiper-wrapper .swiper-button-prev:after {
    font-size: 25px;
    color: #fff;
    line-height: 2.4;
}
.swiper-wrapper .swiper-button-next, .swiper-wrapper .swiper-button-prev {
	top:45%;
    width: 60px;
    height: 60px;
    margin-top: 0px;
    border-radius: 5px;
}
.swiper-button-next:after, .swiper-button-prev:after{
	color:#fff;
}

/* Sn Main Slider */
.sn-main-slider {
    position: relative;
    overflow: hidden;
    background: #f2f5fc;
}

/* Swiper container class */
.sn-main-slider .swiper-container {
    position: relative;
    overflow: hidden;
}

/* Swiper slide class */
.sn-main-slider .swiper-slide {
    position: relative;
    overflow: hidden;
    padding: 70px 0 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Circular layer styles for all slides */
.sn-main-slider .image-column {
    position: relative;
    overflow: visible;
	padding:0 50px 50px 50px;
}

.sn-main-slider .image-column:before {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    right: -50%;
    bottom: -50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
}

/* Circular layer animation for all slides */
.sn-main-slider .image-column:before {
    animation-name: rotateme;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotateme {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* Swiper slide title class */
.sn-main-slider .title {
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0;
    color: #14243b;
    font-size: 18px;
    padding-bottom: 12px;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 1s ease, transform 1s ease;
    font-family: Nunito;
}

.sn-main-slider .title:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 85px;
    height: 2px;
}

/* Active slide title class */
.sn-main-slider .swiper-slide-active .title {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.3s;
	text-align:left;
}

/* Swiper slide h1 class */
.sn-main-slider h1 {
    color: #2c2d31;
    margin-bottom: 5px;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 1s ease, transform 1s ease;
	text-align:left;
}

/* Active slide h1 class */
.sn-main-slider .swiper-slide-active h1 {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.6s;
}

/* Swiper slide text class */
.sn-main-slider .text {
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0;
    color: #252525;
    font-size: 16px;
    line-height: 1.7em;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 1s ease, transform 1s ease;
    font-family: 'Nunito';
    width: 85%;
	text-align:left;
}

/* Active slide text class */
.sn-main-slider .swiper-slide-active .text {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.9s;
}

/* Swiper slide buttons box class */
.sn-main-slider .btns-box {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    display: inline-block;
    transition: opacity 0.9s ease, transform 0.9s ease;
	text-align:left;
}

/* Active slide buttons box class */
.sn-main-slider .swiper-slide-active .btns-box {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.9s;
    float: left;
}

.sn-main-slider .btns-box .theme-btn {
    margin-right: 25px;
}

/* Swiper slide image class */
.sn-main-slider .image {
    position: relative;
    opacity: 0;

    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
    transition: opacity 0.9s ease, margin-top 0.2s ease;
}

/* Active slide image class */
.sn-main-slider .swiper-slide-active .image {
    opacity: 1;
    margin-top: 0px;
    transition-delay: 0.2s;
}

/* Swiper navigation arrows class */
.sn-main-slider .swiper-button-prev,
.sn-main-slider .swiper-button-next {
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    display: inline-block;
    background-color: #122136;
    transition: all 300ms ease;
}

.sn-main-slider .swiper-button-prev:hover,
.sn-main-slider .swiper-button-next:hover {
    color: #ffffff;
    background-color: #e5af59;
}

/* Swiper slide image column class */
.sn-main-slider .image-column {
    position: relative;
}

/* Swiper slide image column inner class */
.sn-main-slider .image-column .inner-column {
    position: relative;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
}

/* Swiper slide circular layer class */
.sn-main-slider .image-column .circle-layer {
    position: absolute;
    left: 50px;
    top: 0px;
    right: 50px;
    bottom: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Swiper slide circular layer circle one class */
.sn-main-slider .image-column .circle-layer .circle-one {
    position: absolute;
    left: 60px;
    top: 10px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #e3a751;
}

/* Swiper slide circular layer circle two class */
.sn-main-slider .image-column .circle-layer .circle-two {
    position: absolute;
    right: -30px;
    top: 150px;
    width: 90px;
    height: 90px;
    z-index: 2;
    border-radius: 50%;
    background-color: #14243b;
}

/* Circular layer styles for all slides */
.sn-main-slider .image-column {
    position: relative;
    overflow: visible;
}

.sn-main-slider .circle-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular layer circle one class */
.sn-main-slider .circle-one,
.sn-main-slider .circle-two {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.sn-main-slider .circle-one {
    left: 0;
    top: 0;
    background-color: #e3a751;
}

.sn-main-slider .circle-two {
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #14243b;
}

.slick-slider .slick-track, .slick-slider .slick-list {
direction: ltr;
}
/* ===== wp-content/themes/arrow/assets/css/responsive.css?ver=7.0.2.css ===== */
@media (max-width: 1925px) {

}

@media (min-width: 1605px) and (max-width: 1815px) {
.special-box.v2 {padding: 4.375rem 18% 4.6875rem;}

}


@media (max-width: 1605px) {
.request-consult-wrap {min-width: calc(100% + 15rem);margin-left: -7.5rem;}
.method-apply-inner {max-width: 41rem;}
.testi-inner {max-width: 32rem;}
.find-thera-cap-inner > h2 {font-size: 1.5rem;line-height: 2.5rem;}
.get-time-request-wrap {margin-left: -10rem;}
.special-box.v2 {padding: 4.375rem 20% 4.6875rem;}
.special-box.v3 {
    padding: 4rem 13% 3.6rem 13%;
}

}

@media (min-width: 1501px) and (max-width: 1560px) {


}

@media (min-width: 1450px) and (max-width: 1500px) {


}


@media (max-width: 1445px) {
header.style2 .container {max-width: 88rem;}
header.style2 .topbar-inner,
header.style2 .logo-contact-menu-inner {padding-left: 13rem;}
header.style2 .logo.v2 {margin-left: -13rem;}
.header-contact + a {margin-left: 2.5rem;}
.slick-slider.feat-caro > button.slick-prev {right: .9375rem;}
.slick-slider.feat-caro > button.slick-next {right: 4.8rem;}
.request-consult-wrap {min-width: calc(100% + 10rem);margin-left: -5rem;}
.method-apply-wrap .sec-title-inner > h2 {max-width: 90%;}
.method-apply-wrap .sec-title-inner > p {max-width: 100%;}
.method-apply-inner {max-width: 38rem;margin-left: 2rem;}
.testi-wrap {min-width: 100%;}
.testi-inner {margin-left: 0;}
.testi-nav-caro {right: -7.7rem;}
.testi-list-caro.slick-slider > button.slick-prev {left: -5rem;}
.testi-list-caro.slick-slider > button.slick-next {right: -5rem;}
.wide-sec {min-width: calc(100% + 12rem);margin-left: -6rem;}
.special-box {padding: 4.0625rem 2.5rem 3.125rem;}
.find-thera-cap {padding-right: 2.5rem;}
.get-time-request-wrap {margin-left: -5rem;}
.special-box.v2 {padding: 3.5rem 15%;}



}


@media (max-width: 1370px) {
.pt-200 {padding-top: 10rem;}
.pb-200 {padding-bottom: 10rem;}
header.style2 .container {max-width: 83.5rem;}
.header-contact {font-size: 1rem;padding-left: 1.8rem;}
.header-contact > i {font-size: 1.5rem;top: 4px;}
.header-contact + a {margin-left: 2rem;}
header.style2 .thm-btn i {display: none;}
header.style2 nav > div > ul > li:not(:first-child) {margin-left: 2rem;}
.wide-sec,
.wide-sec2 {min-width: calc(100% + 8rem);margin-left: -4rem;}
.slick-slider.feat-caro > button.slick-arrow {bottom: .9375rem;}
.storie-wrap {max-width: calc(100% - 5rem);margin-left: 5rem;}
.storie-inner {margin-right: -1.8rem;}
.testi-wrap {min-width: calc(100% + 1.875rem);}
.testi-nav-caro {right: -7.5rem;}
.slick-slider:not(.feat-caro):not(.feat-caro2):not(.testi-list-caro) > button.slick-prev {left: -4rem;}
.slick-slider:not(.feat-caro):not(.feat-caro2):not(.testi-list-caro) > button.slick-next {right: -4rem;}
.special-box {padding: 3rem 2.5rem;}
.special-box-inner > h4 {font-size: 1.5rem;max-width: 100%;}
.fact-box.v2 > i + .fact-box-inner {padding-left: 1.8rem;}
.facts-list {margin: 0 -3.5rem;}
.facts-list > li {padding: 0 3.5rem;}
.facts-list > li:not(:first-child) .fact-box::before {left: -3.8125rem;}
.facts-list > li:not(:first-child) .fact-box::after {left: -3.5rem;}
.find-thera-cap-inner > h2 {font-size: 1.3rem;line-height: 1.6;}
.find-thera-cap-inner > h2 + .btns-group {margin-top: 1.5rem;}
.video-box-wrap,
.impact-wrap {min-height: 38rem;}



}


@media (max-width: 1290px) {
header.style2 .container {max-width: 100%;padding: 0 .9375rem;}
header.style2 .thm-btn {padding: 1rem 2.3rem;}
header.style1 .header-contact,
header.style2 .header-contact {display: none;}
.header-contact + a {margin-left: 1.5rem;}
header.style2 nav > div > ul > li:not(:first-child) {margin-left: 1.8rem;}
.wide-sec,
.wide-sec2 {min-width: calc(100% + 5rem);margin-left: -2.5rem;}
.request-consult-wrap {min-width: calc(100% + 5rem);margin-left: -2.5rem;}
.testi-wrap {min-width: 100%;}
.testi-nav-caro {right: -4.5rem;min-height: 27.84375rem;}
.testi-list-caro.slick-slider > button.slick-arrow {display: none;}
.storie-wrap {min-width: 100%;margin-left: 0;}
.testi-inner {margin-left: -4rem;}
.testi-wrap,
.storie-wrap {min-height: 35rem;}
.testi-nav-item {margin-top: 1rem;margin-bottom: 1rem;}
.slick-slider:not(.feat-caro):not(.feat-caro2):not(.testi-list-caro) > button.slick-prev {left: -1rem;}
.slick-slider:not(.feat-caro):not(.feat-caro2):not(.testi-list-caro) > button.slick-next {right: -1rem;}
.find-thera-cap {padding-top: 2.3rem;padding-bottom: 2.3rem;}
.get-time-request-wrap {margin-left: 0;}
.special-box.v2 {padding: 3.2rem 10%;}
.facts-list {margin: 0 -3rem;}
.facts-list > li {padding: 0 3rem;}
.facts-list > li:not(:first-child) .fact-box::before {left: -3.5125rem;}
.facts-list > li:not(:first-child) .fact-box::after {left: -3rem;}
.special-box.v3 {padding: 3.5rem 10%;}
.request-consult-wrap {min-width: 100%;margin-left: 0;}



}

@media (max-width: 1255px) {
	.sn-main-slider .owl-nav{display:none;}
}

@media (max-width: 1255px) {
nav ul ul ul {left: auto;right: 100%;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  -o-transform-origin: right;
  transform-origin: right;
}


}


@media (max-width: 1210px) {
.container,
.feat-cap3-wrap {padding: 0 0.9375rem;max-width: 100%;}
.container-fluid .container {padding: 0;}
.wide-sec,
.wide-sec2,
.wide-sec3 {
  min-width: 100%;
  margin-left: 0;
}
.request-consult-form > form div.btn-box {flex: 0 0 11.7rem;max-width: 11.7rem;}
.get-time-method-wrap > div.row > div.col-lg-6 {flex: 0 0 100%;max-width: 100%;}
.get-time-inner,
.method-apply-inner {margin-left: 0;max-width: 45rem;}
.method-apply-wrap .sec-title-inner > h2,
.get-time-wrap .sec-title-inner > h2 {max-width: 70%;}
.method-apply-wrap .sec-title-inner > p,
.get-time-wrap .sec-title-inner > p {max-width: 80%;}
.special-box:not(.v2):not(.v3) {text-align: center;justify-content: center;}
.special-box > i + .special-box-inner {flex: 0 0 100%;max-width: 100%;padding: 1.3rem 0 0;}
.facts-list {margin: 0 -2rem;}
.facts-list > li {padding: 0 2rem;}
.facts-list > li:not(:first-child) .fact-box::before {left: -2.5rem;}
.facts-list > li:not(:first-child) .fact-box::after {left: -2rem;}
.find-thera-cap {padding: 1.9rem 2.5rem 1.9rem 5.3rem;}
.special-box.v3 .special-box-inner > h4 {max-width: 100%;}
.prod-detail {min-width: 100%;}
.wide-sec3 .sidebar {margin-left: 0;max-width: 100%;}


}


@media (min-width: 1031px) and (max-width: 1190px) {
nav > div > ul > li {font-size: .9375rem;}
nav > div > ul > li > a {padding: 0 1rem;}
nav > div > ul > li.menu-item-has-children > a {padding-right: 1.5rem;}
nav > div > ul > li.menu-item-has-children > a:before {right: 11px;}
header.style1 .thm-btn i {display: none;}
header.style1 .thm-btn {font-size: 14px;padding: 1.4375rem 2rem;}
header.style3 .topbar-inner,
header.style3 .logo-menu-inner {padding-left: 13rem;}
header.style3 .logo.v2 {margin-left: -13rem;}
header.style3 nav > div > ul > li:not(:first-child) {margin-left: 1.6rem;}


}


@media (min-width: 1031px) and (max-width: 1179px) {
.appointment-list-item {padding: 1.5625rem 3.5rem 1.6875rem 3.5rem;}


}


@media (min-width: 1031px) and (max-width: 1075px) {
header.style2 nav > div > ul > li:not(:first-child) {margin-left: 1.3rem;}


}


@media (max-width: 1075px) {
.feat-item {max-height: 40rem;}
.feat-img {min-height: 40rem;max-height: 40rem;}
.feat-cap-wrap {
  left: 0;
  top: 45%;
  padding: 0 .9375rem;
  text-align: center;
  bottom: auto;
  justify-content: center !important;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.feat-cap {display: inline-block;}
.find-therapist-wrap {text-align: center;}
.find-therapist-wrap div.row {justify-content: center;}
.find-therapist-form-wrap.overlap340 {margin-top: 6rem;}
.find-therapist-wrap div.row div.col-lg-5,
.find-therapist-wrap div.row div.col-lg-7 {width: 70%;}
.find-therapist-cap {padding-left: 0;}
.feat-cap2 > h2 {font-size: 2.8rem;line-height: 1.3;}


}


@media (max-width: 1031px) {
header,
.sticky-menu {display: none !important;}
.rspn-hdr {display: block;}
.sec-title2-inner,
.text-center .sec-title-inner {max-width: 70%;}
.facts-wrap:not(.v2) {min-width: calc(100% + 1.875rem);margin-left: -1.875rem;}
.quote-box-wrap {padding-right: 2.5rem;}
.quote-box {right: 2.5rem;}
.request-consult-wrap {justify-content: center;text-align: center;margin-top: -10px;}
.request-consult-title + .request-consult-form {flex: 0 0 100%;max-width: 100%;padding: 1.875rem 0 0;}
.online-portal-desc {padding: 0 1.875rem 0 0;}
.online-portal-wrap a.thm-btn {width: calc(100% + 2.5rem);margin-left: -2.5rem;}
.testi-nav-caro {right: -3.5rem;min-height: 24.84375rem;}
.testi-inner {margin-left: -3.5rem;max-width: initial;min-width: calc(100% + 2.5rem);}
.testi-nav-item {margin-top: 8px;margin-bottom: 8px;}
ul.meta > li:not(:first-child) {padding-left: 1rem;margin-left: 1rem;}
.news-box-inner {padding-left: 1.875rem;padding-right: 1.875rem;}
.news-box-inner > span {left: 1.875rem;}
.spnsr-list {padding: 0;}
.widget-box > h3 {max-width: 100%;}
.widget-box .social-links3 {min-width: calc(100% + 2.5rem);}
.special-box-inner > h4 {font-size: 1.4rem;line-height: 2rem;}
.about-desc > span.about-time span i {font-size: 1.5rem;}
.about-desc > span.about-time {font-size: .9375rem;}
.facts-wrap.v2 {overflow-x: auto;}
.facts-list {flex-wrap: nowrap !important;margin: 0 -3rem;}
.facts-list > li {flex: 0 0 50%;max-width: 50%;padding: 0 3rem;}
.facts-list > li:not(:first-child) .fact-box::before {left: -3.5rem;}
.facts-list > li:not(:first-child) .fact-box::after {left: -3rem;}
.find-thera-wrap {text-align: center;}
.find-thera-wrap > div.row > div {flex: 0 0 100%;max-width: 100%;}
.find-thera-cap {padding: 5.5rem 15% 2.5rem;}
.find-thera-cap > a {left: 50%;top: -3.6875rem;margin: 0 0 0 -3.6875rem;}
.find-thera-cap .btns-group {justify-content: center;}
.find-thera-cap-inner > h2 {font-size: 1.875rem;line-height: 1.4;}
.request-consult-wrap2:not(.widget-box) {max-width: calc(100% - 3rem);padding: 3.5rem 3rem 4rem;}
.get-time-request-wrap .get-time-wrap {min-width: calc(100% + 2.5rem);margin-left: -2.5rem;}
.get-time-request-wrap .sec-title-inner > h2,
.get-time-request-wrap .sec-title-inner > p {max-width: 100%;}
.get-time-request-wrap .get-time-box > span {padding: 1rem 2.5rem;}
.news-info2 {padding: 2.3125rem 2rem 2rem;}
.news-info2 > img.authr-img {left: 2rem;}
.news-info2 > h3,
.news-info3 > h3,
.storie-info > h3,
.prod-info > h3,
.news-box-inner > h3,
.team-info > h3 {font-size: 1.25rem;line-height: 1.4;}
.special-box.v2 .special-box-inner > h4 {max-width: 100%;font-size: 1.5rem;line-height: 1.4;}
.special-box.v2 > i + .special-box-inner {padding-top: 1.2rem;}
.special-box.v2 {padding: 2.5rem;}
.logo.v2 + .copyright-links {padding-left: 3rem;}
.style3 .widget-box ul.contact-info-list li span {max-width: 5rem;}
.client-review-box {padding-left: 2.2rem;padding-right: 2.2rem;}
.client-review-box > span {min-width: calc(100% + 4.4rem);margin-left: -2.2rem;}
.video-impact-wrap > div.row > div {flex: 0 0 100%;width: 100%;}
.video-box-wrap,
.impact-wrap {min-height: initial;padding: 5rem .9375rem;}
.proced-box > p {max-width: 90%;}
.serv-box4-inner > p {max-width: 100%;}
.special-box.v3 .special-box-inner > h4 {font-size: 1.5rem;}
.news-wrap2 > div.row > div {padding: 0 .9375rem !important;}
.appointment-desc {padding: 0;margin-bottom: 3rem;}
.appointment-inner {padding: 0;}
.prod-detail-img {flex: 0 0 100%;max-width: 100%;}
.prod-detail-img + .prod-detail-info {flex: 0 0 100%;max-width: 100%;padding: 1.25rem 0 0;}
.prod-detail-meta > * {width: 100%;}
.prod-detail-meta > * + * {margin-top: 1.25rem;}
.additional-info > h3 + ul {flex: 0 0 100%;max-width: 100%;margin: 1.875rem 0 0;}
.widget-box.v3 {padding: 3rem 2rem;}



}


@media (min-width: 993px) and (max-width: 1080px) {
.insta-gal-bottom-inner + a {margin-top: 1.25rem;}

}


@media (max-width: 995px) {
.res-row {overflow-x: auto !important;}
.res-row > .row {flex-wrap: nowrap;}
.serv-box-inner > h4 {font-size: 1.5rem;}
.serv-box-inner > p {font-size: 1rem;}
.thm-btn {padding: 1rem 2rem;}
.get-time-wrap,
.method-apply-wrap {min-height: initial;padding: 6rem .9375rem;}
.online-portal-video.overlap-110 {margin-bottom: 0;}
.online-portal-wrap a.thm-btn {width: auto;margin-left: 0;}
.online-portal-desc {padding: 0 0 0 2.5rem;}
.request-consult-wrap2:not(.widget-box),
.get-time-request-wrap .get-time-wrap {max-width: 70%;margin-left: 15%;}
.get-time-request-wrap .get-time-wrap {min-width: initial;margin-top: 3.125rem;padding: 0;text-align: center;}
.storie-wrap2 > div.row.justify-content-center {justify-content: initial !important;}
.about-desc {margin-top: 3.125rem !important;}
.feat-img-caro {max-height: 40rem;}
.feat-img-caro .feat-img {min-height: 40rem;max-height: 40rem;}
.feat-cap3-wrap {text-align: center;}
.feat-cap3 > h2 {max-width: 100%;}
.serv-wrap3 > div.row > div:nth-child(4) .serv-box3 {border-left: 0;border-bottom: 0 !important;}
.serv-wrap3 > div.row > div:last-child .serv-box3 {border-right: 0;}
.sec-title-inner > h2 {font-size: 2.5rem;}
.sec-title.sec-title-with-btns {justify-content: center !important;text-align: center;}
.sec-title-with-btns .sec-title-inner {flex: 0 0 100%;max-width: 100%;}
.sec-title-inner > span.d-block {display: inline-block !important;}
.sec-title-with-btns .sec-title-inner + .sec-title-btns {margin-top: 1.25rem;}
.about-info {left: 0;}
.proced-box > p {max-width: 100%;}
.side-title {text-align: center;padding-right: 0;margin-bottom: 2.5rem;}
.side-title-inner > h2 {max-width: 100%;}
.sidebar {margin-top: 3.5rem;}
.img-box {display: none;}
.methods-wrap.v2 {margin-bottom: 1.875rem;}
.testi-inner {margin-left: 0;min-width: 100%;}
.testi-wrap,
.storie-wrap {min-height: initial;}
.storie-wrap {padding: 7rem .9375rem 5rem;margin-top: 3rem;
  -webkit-border-radius: 100% 100% 0 0 / 50% 50% 0 0;
  border-radius: 100% 100% 0 0 / 50% 50% 0 0;
}
.testi-nav-caro {left: 50%;right: auto;bottom: -7rem;top: auto;min-height: initial;max-width: 30rem;text-align: center;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.testi-nav-item {margin: 1.25rem 1.40625rem 0;width: auto !important;}
.slick-current.slick-active.slick-center .testi-nav-item {margin-left: 1.40625rem;margin-top: 0;}
.contact-info-box > p br {display: none;}
.feat-serv-wrap {margin-left: 0 !important;min-width: 100%;}
.prod-detail-img {flex: 0 0 45%;max-width: 45%;}
.prod-detail-img + .prod-detail-info {flex: 0 0 calc(100% - 45%);max-width: calc(100% - 45%);padding: 0 0 0 3rem;margin-top: 12px;}
.about-desc > p + span {margin-top: 1.7rem;}
.feat-caro2.slick-slider ul.slick-dots {position: absolute;bottom: 11rem;left: 0;right: 0;}


}


@media (max-width: 850px) {
.pt-90,
.pt-100,
.pt-110,
.pt-120,
.pt-130,
.get-time-wrap,
.method-apply-wrap {padding-top: 5rem;}
.pb-90,
.pb-100,
.pb-110,
.pb-120,
.pb-130,
.get-time-wrap,
.method-apply-wrap {padding-bottom: 5rem;}
.pt-80 {padding-top: 4rem;}
.pb-80 {padding-bottom: 4rem;}
.enroll-wrap.overlap-120 {margin-bottom: -5rem;}
.find-therapist-form-wrap.overlap340 {margin-top: 5rem;}
 /* {margin-bottom: 5rem;} */
.res-row2 {overflow-x: auto;}
.res-row2 > .row {flex-wrap: nowrap;}
.find-therapist-wrap div.row div.col-lg-5,
.find-therapist-wrap div.row div.col-lg-7 {width: 80%;}
.sec-title2-inner,
.text-center .sec-title-inner {max-width: 90%;}
.sec-title-inner > h2,
.sec-title2-inner > h2,
.about-desc > h2,
.side-title-inner > h2 {font-size: 2.2rem !important;line-height: 2.7rem;}
.sec-title2-inner > p {font-size: 1.125rem;line-height: 2rem;}
.sec-title-inner > h3 {font-size: 2rem;}
.quote-facts-wrap > div.row > div {flex: 0 0 100%;max-width: 100%;}
.facts-wrap:not(.v2) {margin-left: 0;min-width: 100%;display: flex;flex-wrap: wrap;margin-top: 2rem;}
.serv-box {text-align: center;justify-content: center;}
.serv-box > i + .serv-box-inner {flex: 0 0 100%;max-width: 100%;padding: 1.5625rem 0 1.125rem;}
.serv-box-inner::before,
.serv-box-inner::after {left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.fact-box:not(.v2) {text-align: center;justify-content: center;flex: 1 0 0;max-width: 33.33334%;}
.fact-box:not(.v2) > i + .fact-box-inner {flex: 0 0 100%;max-width: 100%;padding: 1.875rem 0 0;}
.online-portal-desc {padding: 0;}
.storie-inner {margin-right: 0;}
.feat-cap2 {max-width: 90%;}
.special-box-inner > h4 {max-width: 100%;}
.facts-list > li {flex: 0 0 50%;max-width: 50%;}
.find-thera-cap {padding: 5.5rem 8% 2.5rem;}
.special-box {padding: 3rem 2.5rem !important;}
.special-box-inner > h4 {font-size: 1.3rem !important;}
.bottom-bar.v2 .logo.v2 {margin-top: -5rem;}
.footer-newsletter-inner {flex: 0 0 100%;max-width: 100%;text-align: center;justify-content: center !important;}
.footer-newsletter-inner > h3 + form {margin: 1.7rem 0 0;}
.bottom-bar.v3 {text-align: center;}
.bottom-bar.v3 .bottom-bar-inner {justify-content: center !important;}
.bottom-bar.v3 .bottom-bar-inner > p {width: 100%;}
.bottom-bar.v3 .bottom-bar-inner > p + .social-links3 {margin-top: 1.5rem;}
.video-box > h2,
.impact-inner > h2 {font-size: 2.5rem;line-height: 1.25;}
.about-desc.v2 {padding-right: 0;}
.enroll-inner,
.appointment-desc > h3 {max-width: 100%;}
.enroll-inner > p br {display: none;}
.error-inner {max-width: 80%;}
.live-video-img > a {font-size: 5rem;}




}


@media (max-width: 770px) {
.mt-70 {margin-top: 3rem;}
.mb-70 {margin-bottom: 3rem;}
.res-row3 {overflow-x: auto;}
.res-row3 > .row {flex-wrap: nowrap;}
.feat-item {max-height: 37rem;}
.feat-img {min-height: 37rem;max-height: 37rem;}
.find-therapist-wrap div.row div.col-lg-5,
.find-therapist-wrap div.row div.col-lg-7 {width: 90%;}
.feat-cap2 {max-width: 100%;}
.feat-cap2 > h2 {font-size: 2.2rem;line-height: 1.35;}
.feat-cap2 > p {max-width: 90%;}
.feat-caro2.slick-slider ul.slick-dots {position: absolute;right: 0;bottom: 10rem;z-index: 1;left: 0;}
.special-box-inner {flex: 0 0 85% !important;max-width: 85% !important;}
.facts-wrap.v2 {text-align: center;}
.fact-box {justify-content: center;}
.fact-box.v2 > i + .fact-box-inner {flex: 0 0 100%;max-width: 100%;padding: 1rem 0 0;}
.facts-list > li:not(:first-child) .fact-box::before,
.facts-list > li:not(:first-child) .fact-box::after {top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.facts-list > li:not(:first-child) .fact-box::before {margin-top: -3rem;}
.serv-wrap3 > div.row > div .serv-box3,
.serv-wrap3 > div.row > div:nth-child(4) .serv-box3 {border: 1px dashed #808080 !important;}
.find-thera-cap {padding: 5.5rem 5% 2.5rem;}
.request-consult-wrap2:not(.widget-box),
.get-time-request-wrap .get-time-wrap {max-width: 80%;margin-left: 10%;}
.page-title-wrap {margin-top: 0;}
.page-title-inner > h1 {font-size: 2rem;}
ol.breadcrumb li.breadcrumb-item {font-size: 1rem;}
.appointment-list-item {padding: 1.5rem;justify-content: center !important;text-align: center;}
.appointment-list-item > *,
.course-detail-info-inner {flex: 0 0 100%;max-width: 100%;padding: 0;}
.course-detail-btn {margin-top: 1.5rem;}
.appointment-list-item > * + * {margin-top: .9375rem;}
.appointment-item-inner > i {position: static !important;margin-bottom: 13px !important;display: inline-block;}
.appointment-calendar td.fc-day-top {min-height: 4rem;line-height: 4rem;}
.appointment-calendar .fc-row,
.appointment-calendar .fc-day {min-height: 4rem !important;}
.widget-box .social-links3 {min-width: 100%;}
.social-links3 > a {line-height: 2.8rem;height: 2.8rem;width: 2.8rem;}
.request-consult-form > form div {flex: 0 0 50% !important;max-width: 50% !important;}


}


@media (max-width: 767px) {


}


@media (max-width: 730px) {
.rspn-cnt {display: none;}
.find-therapist-wrap div.row div.col-lg-5,
.find-therapist-wrap div.row div.col-lg-7 {width: 100%;}
.prod-detail-img {flex: 0 0 100%;max-width: 100%;}
.prod-detail-img + .prod-detail-info {flex: 0 0 100%;max-width: 100%;padding: 0;margin-top: 3.5rem;}
.prod-detail-info-wrap + .prod-detail-meta {margin-top: 2rem;}
.proced-box {padding: 2.8rem 1.2rem 1.375rem;}
.proced-box > p {max-width: 100%;}


}


@media (max-width: 620px) {
.bottom-bar:not(.v2),
.bottom-bar.v2 .copyright-links > p {text-align: center;}
.bottom-bar-inner,
.bottom-links {justify-content: center !important;}
.copyright-links {text-align: inherit !important;margin-top: 1.25rem;max-width: 100%;flex: 0 0 100%;}
.col-lg-4 .widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {flex: 0 0 100%;max-width: 100%;padding-right: 0;}

}


@media (min-width: 577px) and (max-width: 731px) {
.authr-meta > li:not(:first-child) {margin-left: 2rem;}
.social-links3 > h3 {width: 100%;margin: 0 0 10px !important;}
.bottom-bar.v2 .copyright-links > p,
.bottom-bar.v2 ul.bottom-links > li {font-size: 1rem;}
.logo.v2 + .copyright-links {padding-left: 2rem;}
.special-box {padding: 2.5rem 2rem !important;}
.special-box-inner {flex: 0 0 100% !important;max-width: 100% !important;}

}


@media (min-width: 576px) and (max-width: 621px) {
.meta {justify-content: center}
ul.meta2 > li {flex: 0 0 100%;max-width: 100%;}
ul.meta2 > li:not(:first-child) {margin: 10px 0 0;}

}


@media (min-width: 576px) and (max-width: 644px) {
.news-info2 {text-align: center;}
.news-info2 > img.authr-img {left: 50%;margin-left: -1.65625rem;}
.meta {justify-content: center}
ul.meta > li {flex: 0 0 100%;max-width: 100%;}
ul.meta > li:not(:first-child) {padding-left: 0;margin: 5px 0 0;}
ul.meta > li:not(:first-child):before {display: none;}
.authr-meta > li {flex: 0 0 100%;max-width: 100%;}
.authr-meta > li:not(:first-child) {margin-left: 0;}
.comment-reply-wrap > h3 p {margin-left: 0;width: 100%;}
.social-links3 > h3 {width: 100%;margin: 0 0 10px !important;}

}


@media (max-width: 576px) {
.logged-in main {
    margin-top: 0px;
}
.pt-85,
.pt-90,
.pt-100,
.pt-110,
.pt-120,
.pt-130,
.get-time-wrap,
.method-apply-wrap,
.video-box-wrap,
.impact-wrap {padding-top: 4rem;}
.pb-85,
.pb-90,
.pb-100,
.pb-110,
.pb-120,
.pb-130,
.get-time-wrap,
.method-apply-wrap,
.video-box-wrap,
.impact-wrap {padding-bottom: 4rem;}
.pt-325 {padding-top: 12rem;}
.pb-325 {padding-bottom: 12rem;}
.mt-60,
.mt-70 {margin-top: 2.5rem;}
.mb-60,
.mb-70 {margin-bottom: 2.5rem;}
.res-row,
.res-row2,
.res-row3 {overflow-x: initial !important;}
.res-row > .row,
.res-row2 > .row,
.res-row3 > .row {flex-wrap: wrap;}
.res-row > .row div[class^="col"],
.res-row2 > .row div[class^="col"],
.res-row3 > .row div[class^="col"] {flex: 0 0 100%;max-width: 100%;}
.feat-cap > span {font-size: 1.25rem;}
.feat-cap > h2,
.sec-title3-inner > h3,
.sec-title4-inner > h2 {font-size: 2.2rem;line-height: 3.2rem;}
p:not(.loading-text),
.post-detail.blog-detail > p,
.post-detail.course-detail > p,
.post-detail.blog-detail > ul:not(.meta3) li,
.post-detail.course-detail > ul:not(.meta3) li {font-size: 1rem !important;line-height: 1.75rem !important;}
ul.bottom-links > li {font-size: 1rem !important;}
.feat-item {max-height: 35rem;}
.feat-img {min-height: 35rem;max-height: 35rem;}
.sec-title2-inner,
.text-center .sec-title-inner,
.feat-cap2 > p,
.about-desc > p,
.sec-title3-inner,
.about-desc.v2 > strong {max-width: 100%;}
.sec-title-inner > span {font-size: 1rem;}
.sec-title-inner > span,
.sec-title2-inner > span {line-height: 1.5;}
.sec-title2-inner > h2 {font-size: 1.9rem !important;line-height: 1.3;}
.sec-title-inner > h3,
.title-wrap > h2 {font-size: 1.85rem;}
.sec-title2 + .serv-wrap {margin-top: 4rem;}
.thm-btn {padding: 1rem 2rem !important;font-size: 14px !important;}
.thm-btn i {font-size: .9375rem !important;}
.quote-box-wrap {padding-right: 0;}
.quote-box {position: static !important;display: inline-block;max-width: calc(100% - 1.96875rem);margin-left: 1.96875rem;margin-top: 2rem;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.facts-wrap {margin-top: 1rem;}
.fact-box:not(.v2) {flex: 0 0 100%;max-width: 100%;}
.fact-box > i {font-size: 4.5rem;}
.fact-box:not(.v2) > i + .fact-box-inner {padding-top: 1.3rem;}
.fact-box-inner > span {font-size: 2.5rem;}
.fact-box-inner > h4 {font-size: 1.3rem;}
.request-consult-title > h3 {font-size: 2rem;}
.request-consult-form > form > * {flex: 0 0 100% !important;max-width: 100% !important;}
.get-time-wrap .sec-title,
.method-apply-wrap .sec-title {text-align: center;}
.method-apply-wrap .sec-title-inner > h2,
.get-time-wrap .sec-title-inner > h2,
.method-apply-wrap .sec-title-inner > p,
.get-time-wrap .sec-title-inner > p,
.sec-title-inner > p {max-width: 100%;}
.get-time-wrap,
.method-apply-wrap {text-align: center;}
.get-time-box > span {font-size: 1rem;padding: 14px 1.25rem !important;}
.method-box {justify-content: center;text-align: center;}
.method-box > i + .method-box-inner {flex: 0 0 100%;max-width: 100%;padding: .9375rem 0 0;}
.online-portal-wrap,
.appointment-desc {text-align: center;}
.online-portal-desc {padding: 1.875rem;}
.testi-wrap {padding: 4rem .9375rem;}
.testi-item-box {text-align: center;padding: 1.875rem;}
.testi-img {position: relative !important;display: inline-block;top: auto;left: auto;}
.testi-item-top {justify-content: center !important;margin-top: .9375rem;}
.testi-item-info {width: 100%;margin-bottom: 7px;}
.testi-item-wrap {padding-left: 0;}
.testi-nav-item {margin-left: 10px;margin-right: 10px;width: auto !important;}
.slick-current.slick-active.slick-center .testi-nav-item {margin-left: 10px;}
.storie-wrap {padding: 6.5rem .9375rem 4rem;
  -webkit-border-radius: 100% 100% 0 0 / 25% 25% 0 0;
  border-radius: 100% 100% 0 0 / 25% 25% 0 0;
}
.storie-inner > h2,
.appointment-desc > h3 {font-size: 2.2rem;line-height: 2.9rem;}
.storie-inner > a {font-size: 1rem;}
.storie-inner > p + a {margin-top: 2rem;}
.news-box {text-align: center;}
.meta {justify-content: center;}
.news-box-inner > span {left: 50%;margin-left: -1.875rem;}
.spnsr-list > li {flex: 0 0 50%;max-width: 50%;margin: 1rem 0;}
.spnsr-list {margin: -1rem 0;}
.widget-box .social-links3 {min-width: 100%;margin-top: 0;}
.find-thera-cap-inner > h2 {font-size: 1.5rem;}
.live-video-wrap {padding: 0;}
.live-video-wrap.overlap-210 {margin-bottom: -8rem;}
.live-video-inner > span {font-size: .9375rem;text-align: center;padding: 10px 1.5rem;min-width: 14rem;}
.live-video-img > a,
.about-video-box > a {font-size: 4rem;}
.facts-wrap.v2 {overflow-x: initial;margin-top: 0;}
.facts-list {flex-wrap: wrap !important;}
.facts-list > li {flex: 0 0 100%;max-width: 100%;}
.facts-list > li:not(:first-child) .fact-box::before,
.facts-list > li:not(:first-child) .fact-box::after {display: none;}
.find-thera-cap > a {height: 6.5rem;line-height: 6.5rem;width: 6.5rem;top: -3.25rem;margin-left: -3.25rem;}
.request-consult-wrap2:not(.widget-box),
.get-time-request-wrap .get-time-wrap {max-width: 100%;margin-left: 0;}
.bottom-bar.v2 .logo.v2 {display: inline-block;margin-top: -2rem;margin-bottom: 1rem;}
.logo.v2 + .copyright-links {flex: 0 0 100%;max-width: 100%;justify-content: center !important;padding-left: 0;}
.news-info2 {text-align: center;}
.news-info2 > img.authr-img {left: 50%;margin-left: -1.65625rem;}
.special-box {margin-top: 1px;}
.request-consult-wrap2 {padding: 3rem 2.5rem;}
.request-consult-title2 > h3 {font-size: 1.85rem;line-height: 1.4;}
.feat-cap3 > span {font-size: 1.25rem;}
.feat-cap3 > h2 {font-size: 1.875rem;line-height: 1.4;}
.about-img .social-links4 {right: 2rem;}
.sec-title2.v2 .sec-title2-inner > h2,
.sec-title2.v3 .sec-title2-inner > h2,
.video-box > h2,
.impact-inner > h2 {font-size: 2.2rem;}
.procedure-wrap > div.row > div {margin-top: 0 !important;}
.news-box3 {text-align: center;}
.meta2 {justify-content: center;}
.feat-img-caro {max-height: 20rem;}
.feat-img-caro .feat-img {
  min-height: 20rem;
  max-height: 20rem;
}
.feat-cap3-wrap {position: static !important;background-color: var(--color10);padding: 4rem .9375rem;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  -o-transform: translate(0);
  transform: translate(0);
}
.post-detail.blog-detail,
.post-detail.course-detail {padding-left: 0;}
.post-detail.blog-detail .social-links5,
.post-detail.course-detail .social-links5 {position: static !important;max-width: 100%;align-items: center;margin-bottom: 1.25rem;}
.post-detail.blog-detail .social-links5 > span,
.post-detail.course-detail .social-links5 > span {margin: 0 5px 0 0;}
.post-detail.blog-detail .social-links5 > a:not(:first-child),
.post-detail.course-detail .social-links5 > a:not(:first-child) {margin: 0 0 0 5px;}
.meta3 > li:not(:first-child) {margin-left: 1.25rem;}
blockquote.blockquote {padding: 2rem 1.5rem;}
blockquote.blockquote > p {max-width: 100% !important;}
.post-detail.blog-detail blockquote.blockquote {margin-bottom: 3rem;}
.author-box,
.comment {padding: 3rem 2rem;text-align: center;justify-content: center;}
.author-box::before,
.comment::before {clip-path: none;left: 0 !important;}
.author-box > span + .author-info,
.comment > span + .comment-info {flex: 0 0 100%;max-width: 100%;padding: 1.5rem 0 0;}
.author-box .social-links6 {position: static !important;margin-top: 1.5rem;}
.authr-meta {justify-content: center;}
.authr-meta > li:not(:first-child) {margin-left: 2rem;}
.comment-info > h4 + span,
.comment-info > span + span {display: block !important;margin: 5px 0 0;}
.comment-info > p {max-width: 100%;}
.comment-reply-wrap,
.comments-wrap,
.social-links3.v2 > h3 {text-align: center;}
.comment-reply-wrap > h3,
.additional-info > h3 {padding-bottom: 0;}
.comment-reply-wrap > h3:before,
.comment-reply-wrap > h3:after,
.additional-info > h3:before,
.additional-info > h3:after {display: none;}
.comment-reply-wrap > h3 p {width: 100%;margin: 10px 0 0;}
figure.alignright {margin: 0 0 2rem;width: 100%;}
.team-detail-meta-list > li,
.request-consult-title {flex: 0 0 100%;max-width: 100%;}
.team-detail-meta-list > li + li {margin-top: 10px;}
.team-detail-wrap .feat-serv-wrap {margin-left: 0;min-width: 100%;}
.team-detail-wrap .feat-serv-box {padding: 0;}
.team-detail-wrap .feat-serv-box:before,
.contact-info-box:before,
.contact-info-box:after,
.special-wrap > div.row > div:not(:first-child)::before,
.special-wrap > div.row > div:not(:first-child)::after {display: none;}
.special-box-inner,
.request-consult-form > form div {flex: 0 0 100% !important;max-width: 100% !important;}
.sub-shap {padding-left: 0 !important;}
.sub-shap:before,
.sub-shap:after {display: none !important;}
.news-caro.slick-slider ul.slick-dots {margin: 0 0 2rem;}
.methods-wrap {margin-bottom: -2rem;}
.method-box {margin-bottom: 2rem;}




}


@media (max-width: 490px) {
.sec-title-btns {text-align: center;justify-content: center;}
.sec-title-btns > a + a,
.find-thera-cap a + a {margin: 1.25rem 0 0;}
.sec-title-btns > a.thm-btn,
.find-thera-cap .thm-btn {width: 100%;}
.find-thera-cap-inner > h2 {font-size: 1.3rem;}
.footer-newsletter {padding: 2.5rem .9375rem;}
.footer-newsletter-inner form {flex: 0 0 100%;max-width: 100%;}
.video-box-wrap .video-box {padding: 0;text-align: center;}
.video-box-wrap .video-box > a:not(.thm-btn) {display: inline-block;position: relative !important;margin-bottom: 12px;}
.impact-wrap {text-align: center;}
.impact-fact-box {justify-content: center;}
.impact-fact-box > i + .impact-fact-box-inner {flex: 0 0 100%;max-width: 100%;padding: 1.375rem 0 0;}
.impact-facts-wrap > div.row > div {flex: 0 0 50%;max-width: 50%;}
.about-info {position: static !important;}
.about-img > img {clip-path: initial;}
.about-img .social-links4 {top: 1.5rem;right: 1.5rem;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.about-img {margin: 2rem 0 0;}
.enroll-wrap.overlap-120 {margin-bottom: -4rem;}
.enroll-wrap {padding: 3.5rem 2rem;}
.about-desc.v2,
.about-desc.v3 {text-align: center;}
.about-desc.v2 > span.about-time span {width: 100%;margin: 0 0 7px;}
.footer-data .widget-box {text-align: center;}
.col-lg-4 .widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li {flex: 0 0 100%;max-width: 100%;}
.social-links3 > h3 {flex: 0 0 100%;max-width: 100%;margin: 0 0 1.25rem !important;}
.social-links3 > a:first-of-type {margin-left: 0;}
.ftr-gal-list > li {flex: 0 0 33.33334%;max-width: 33.33334%;margin-bottom: 10px;}
.ftr-gal-list {justify-content: center;margin-bottom: -10px;}
ul.bottom-links > li:not(:first-child) {padding-left: 1rem;margin-left: 1rem;}
.col-lg-4 .widget-box ul.contact-info-list li {max-width: 100%;}
.widget-title:before,
.widget-title:after {left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.widget-box > h3 {padding-left: 0;}
.widget-box > h3 i {position: static !important;display: block;}
.request-consult-form > form div.btn-box button {height: initial;}
.widget-box ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list) > li a,
.widget-title2 {display: inline-block;}
form.newsletter-form button {height: initial;bottom: 0;right: 1.5rem;}
.widget-box .social-links3,
.bottom-bar.v3 .social-links3 {justify-content: center;}
.pagination li.page-item {line-height: 2.7rem;font-size: 14px !important;}
.pagination li.page-item a.page-link {height: 2.7rem;width: 2.7rem;}
.pagination li.page-item.prev a.page-link,
.pagination li.page-item.next a.page-link {padding: 0 1.5rem;}
.post-detail.blog-detail > p img.alignright {width: 100%;margin-bottom: 1.25rem;}
.gallery-info > h3 {font-size: 1.4rem !important;line-height: 1.4 !important;}
.gallery-info > h3 + a {margin-top: 8px;}
.gallery-info > a {font-size: 1.55rem;}
.gallery-info {min-width: 15rem;max-width: 15rem;}
.gallery-video-box > a {min-width: 7rem;padding: 1.7rem 1rem;}
.post-detail > h2 {font-size: 2rem;}
.post-detail > h2 span {
  width: 100%;
  margin:  10px 0 0;
  display: block;
}
.post-detail > h3,
.team-detail-wrap > h3 {font-size: 1.5rem;}
.error-inner {max-width: 100%;}
.error-inner > i {height: 7.5rem;width: 7.5rem;line-height: 7.5rem;font-size: 2.5rem;}
.error-cap > strong {font-size: 9rem;}
.error-cap > h2 {font-size: 2rem;}
.error-cap > h2 + p {margin-top: 10px;}
.request-consult-wrap2:not(.widget-box) {padding: 3rem 2rem;}
.field-box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.nesletter-form > form input {height: 3.125rem !important;padding: 10px 1.5rem !important;}
.nesletter-form > form button {height: initial;}



}


@media (max-width: 470px) {
	
.sn-main-slider h1 {
    font-size: 30px;
    width: 95%;
    line-height: 1.3;
    margin-bottom: 20px;
}


}


@media (max-width: 430px) {
.rsnp-mnu {right: -100%;max-width: 100%;}
.rsnp-mnu.slidein {right: 0;}
.feat-cap > span {font-size: 1rem;}
.feat-cap > h2 {font-size: 1.8rem;line-height: 1.4;}
.find-therapist-form-wrap {padding: 3rem 2rem;}
.title-wrap > span {font-size: 1rem;}
.find-therapist-form-wrap form input:not([type="submit"]),
.field-box input,
form.newsletter-form input,
.search-form > input,
.contact-form > form .field-box input {height: 2.8rem;padding: 10px 1.5rem;font-size: 14px;}
.sec-title2-inner > span {font-size: .9375rem !important;}
.sec-title2-inner > h2,
.request-consult-title > h3,
.sec-title2 + .serv-wrap {margin-top: 2.5rem;}
.sec-title-inner > span {font-size: .9375rem !important;}
.sec-title-inner > h2,
.about-desc > h2 {font-size: 1.8rem !important;line-height: 1.4;}
.sec-title-inner > h3 {font-size: 1.65rem;}
.serv-box2 .serv-info2 {max-width: 75%;}
.serv-info2 > h3 {font-size: 1.15rem;}
.serv-info2 > h3 a {padding: 1rem 1.5rem;}
.serv-img2 > a {margin-top: -2.1875rem;}
.online-portal-desc > h2 {font-size: 1.5rem;line-height: 1.35;}
.online-portal-desc {padding: 1.875rem 0;}
.testi-nav-item {max-width: 5rem;}
.testi-nav-caro {max-width: 100%;}
.storie-inner > h2 {font-size: 1.85rem;line-height: 1.35;}
.storie-inner > i + h2 {margin-top: 1.5rem;}
.get-time-box > span {font-size: .9375rem !important;justify-content: center !important;text-align: center;}
.get-time-box > span i {flex: 0 0 100%;max-width: 100%;}
.authr-meta > li {flex: 0 0 100%;max-width: 100%}
.authr-meta > li:not(:first-child) {margin: 10px 0 0;}


}


@media (max-width: 420px) {
.insta-gal-bottom-inner {flex: 0 0 100%;max-width: 100%}
.insta-gal-bottom-inner + a {margin-top: 1.25rem;}


}


@media (max-width: 380px) {
.appointment-calendar {padding: 12px;}
.appointment-calendar .fc-header-toolbar {padding: 1.25rem;}
.appointment-calendar .fc-header-toolbar .fc-left > h2 {font-size: 1.125rem;}
.appointment-calendar .fc-head .fc-day-header {padding: 8px 5px;font-size: 13px;}
.appointment-calendar td.fc-day-top {min-height: 3.5rem;line-height: 3.5rem;font-size: 1rem;}
.appointment-calendar .fc-row, .appointment-calendar .fc-day {min-height: 3.5rem !important;}


}


@media (max-width: 325px) {


}
/* ===== wp-content/themes/arrow/assets/css/flaticon.css?ver=7.0.2.css ===== */
/*
  Flaticon icon font: Flaticon
*/

@font-face {
  font-family: "Flaticon";
  src: url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.eot");
  src: url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.eot%3F") format("embedded-opentype"),
       url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.woff2") format("woff2"),
       url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.woff") format("woff"),
       url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.ttf") format("truetype"),
       url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("/host/play4you/wp-content/themes/arrow/assets/fonts/Flaticon.svg") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
  font-style: normal;
}

.flaticon-brain:before { content: "\f100"; }
.flaticon-brain-1:before { content: "\f101"; }
.flaticon-brainstorm:before { content: "\f102"; }
.flaticon-brain-2:before { content: "\f103"; }
.flaticon-autism:before { content: "\f104"; }
.flaticon-brain-3:before { content: "\f105"; }
.flaticon-brain-4:before { content: "\f106"; }
.flaticon-schizophrenia:before { content: "\f107"; }
.flaticon-brain-5:before { content: "\f108"; }
.flaticon-heart:before { content: "\f109"; }
.flaticon-bipolar:before { content: "\f10a"; }
.flaticon-mental-health:before { content: "\f10b"; }
.flaticon-yin-yang:before { content: "\f10c"; }
.flaticon-puzzle:before { content: "\f10d"; }
.flaticon-telephone:before { content: "\f10e"; }
.flaticon-shopping-bags:before { content: "\f10f"; }
.flaticon-left-arrow:before { content: "\f110"; }
.flaticon-right-arrow:before { content: "\f111"; }
.flaticon-next:before { content: "\f112"; }
.flaticon-brain-6:before { content: "\f113"; }
.flaticon-back:before { content: "\f114"; }
.flaticon-arrow-pointing-to-left:before { content: "\f115"; }
.flaticon-arrow-pointing-to-right:before { content: "\f116"; }
.flaticon-angle-pointing-to-left:before { content: "\f117"; }
.flaticon-angle-arrow-pointing-to-right:before { content: "\f118"; }
.flaticon-calendar:before { content: "\f119"; }
.flaticon-play:before { content: "\f11a"; }
.flaticon-baby-boy:before { content: "\f11b"; }
.flaticon-check-mark:before { content: "\f11c"; }
.flaticon-video-camera:before { content: "\f11d"; }
.flaticon-group:before { content: "\f11e"; }
.flaticon-quotation:before { content: "\f11f"; }
.flaticon-shopping-basket:before { content: "\f120"; }
.flaticon-left-quotes-sign:before { content: "\f121"; }
.flaticon-baby-boy-1:before { content: "\f122"; }
.flaticon-coach:before { content: "\f123"; }
.flaticon-coach-1:before { content: "\f124"; }
.flaticon-glove:before { content: "\f125"; }
.flaticon-quote:before { content: "\f126"; }
.flaticon-play-button:before { content: "\f127"; }
.flaticon-play-button-1:before { content: "\f128"; }
.flaticon-close:before { content: "\f129"; }
.flaticon-plus:before { content: "\f12a"; }
.flaticon-pharmacy:before { content: "\f12b"; }
.flaticon-running:before { content: "\f12c"; }
.flaticon-magnifying-glass:before { content: "\f12d"; }
.flaticon-sexual-health:before { content: "\f12e"; }
.flaticon-lifeline-in-a-heart-outline:before { content: "\f12f"; }
.flaticon-neurology:before { content: "\f130"; }
.flaticon-medical-kit:before { content: "\f131"; }
.flaticon-individual:before { content: "\f132"; }
.flaticon-bipolar-1:before { content: "\f133"; }
.flaticon-double-angle-pointing-to-right:before { content: "\f134"; }
.flaticon-mental-health-1:before { content: "\f135"; }
.flaticon-medical:before { content: "\f136"; }
.flaticon-idea:before { content: "\f137"; }
.flaticon-bipolar-2:before { content: "\f138"; }
.flaticon-oxygen:before { content: "\f139"; }
.flaticon-scientist:before { content: "\f13a"; }
.flaticon-email:before { content: "\f13b"; }
.flaticon-neurology-1:before { content: "\f13c"; }
.flaticon-women:before { content: "\f13d"; }
.flaticon-clock:before { content: "\f13e"; }
.flaticon-health:before { content: "\f13f"; }
.flaticon-hospital-sign:before { content: "\f140"; }
.flaticon-hospital:before { content: "\f141"; }
.flaticon-first-aid-kit:before { content: "\f142"; }
.flaticon-thinking:before { content: "\f143"; }
.flaticon-psychology:before { content: "\f144"; }
.flaticon-right-quotes-symbol:before { content: "\f145"; }
.flaticon-brain-7:before { content: "\f146"; }
.flaticon-brain-8:before { content: "\f147"; }
.flaticon-book:before { content: "\f148"; }
.flaticon-brain-9:before { content: "\f149"; }
.flaticon-long-arrow-pointing-to-the-right:before { content: "\f14a"; }
/* ===== index.html \3c style id="stylesheet"> ===== */
body{background:#FFFFFF;}.thm-bg, .thm-layer:before, .search-btn:hover, .search-btn:focus, .header-cart>span.cart-btn:hover, .header-cart>span.cart-btn:focus, .thm-btn.scndry-bg:before, .thm-btn.scndry-bg:after, .thm-btn.bg-black:before, .thm-btn.bg-black:after, .slick-slider>button.slick-arrow:hover, .slick-slider>button.slick-arrow:focus, .slick-slider.feat-caro>button.slick-arrow:hover, .slick-slider.feat-caro>button.slick-arrow:focus, .serv-box:hover .serv-box-inner:before, .serv-box-inner:after, .serv-info2>h3 a:hover, .serv-info2>h3 a:focus, .thm-shp:after, .team-img:before, .online-portal-video>a:hover, .online-portal-video>a:focus, .prod-img>a.scndry-bg:hover, .prod-img>a.scndry-bg:focus, .ftr-gal-list li a:before, .scndry-bg .topbar-right>a.search-btn:hover, .scndry-bg .topbar-right>a.search-btn:focus, .logo.v2:after, .feat-cap2>span:not(.feat-cap-time):before, .feat-caro2.slick-slider>button.slick-arrow:hover, .feat-caro2.slick-slider>button.slick-arrow:focus, .special-box:after, .serv-box2.v2 .serv-info2>h3 a:before, .serv-box2.v2 .serv-info2>h3 a:hover, .serv-box2.v2 .serv-info2>h3 a:focus, .serv-box3:before, .bg-color11 .topbar-right>a.search-btn:hover, .bg-color11 .topbar-right>a.search-btn:focus, header.style3 nav>div>ul>li>a:after, .social-links4>a:hover, .social-links4>a:focus, .scndry-bg .find-thera-cap>a:hover, .scndry-bg .find-thera-cap>a:focus, .scndry-bg .thm-btn.bg-color5:before, .scndry-bg .thm-btn.bg-color5:after, .pagination li.page-item.prev a.page-link:hover, .pagination li.page-item.next a.page-link:hover, .pagination li.page-item.prev a.page-link:focus, .pagination li.page-item.next a.page-link:focus, .gallery-video-box>a.scndry-bg:hover, .gallery-video-box>a.scndry-bg:focus, .appointment-calendar .fc-header-toolbar, .scndry-layer .social-links3.v2>a:hover, .scndry-layer .social-links3.v2>a:focus, .widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list)>li:hover>a:before, .widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list)>li>a:hover:before, .widget-box.v3 ul:not(.contact-info-list):not(.ftr-gal-list):not(.insta-gal-list)>li>a:focus:before, .insta-gal-list>li a:before, .comment-reply-wrap>h3:after, .slc-box:before, .additional-info>h3:after, .rspn-mnu-btn:hover, .rspn-mnu-btn:focus, .rspn-mnu-cls:hover, .slick-slider:not(.feat-caro)>button.slick-arrow:hover, .rspn-mnu-cls:focus, .search-close-btn:hover, .search-close-btn:focus, .header-search>form button:hover, .header-search>form button:focus, .sticky-menu nav>div>ul>li:hover>a, .sticky-menu nav>div>ul>li.active>a, .serv-img2:before, .sticky-menu nav>div>ul>li>a:focus, .slick-slider:not(.feat-caro) ul.slick-dots>li button:hover, .slick-slider:not(.feat-caro) ul.slick-dots>li button:focus, .slick-slider:not(.feat-caro) ul.slick-dots>li.slick-active button, .slick-slider.feat-caro ul.slick-dots>li button:hover, .slick-slider.feat-caro ul.slick-dots>li button:focus, .slick-slider.feat-caro ul.slick-dots>li.slick-active button, .proced-box.scndry-bg:hover, .sn-about-img .social-links4>a:hover, aside .widget-title3:after, .nesletter_widget, [type="checkbox"]:not(:checked)+label:after, [type="checkbox"]:checked+label:after, .contact-form .wpcf7 input[type="submit"]:hover, .team-detail-info:before, .sn-main-slider .owl-nav .owl-prev:hover, .sn-main-slider .owl-nav .owl-next:hover, .sn-feature-block .inner-box, #hm .thm-btn.v2, #hm .thm-shp.v2:after, .request-consult-wrap2 form .btn-box input[type="submit"]:hover, .request-consult-wrap2 form .thm-btn, .sn-ser-block.serv-box4>i, .sn-ser-block.serv-box4 .side-arrow:hover, .bg-color11, .sn-main-slider .image-column .circle-layer .circle-one, .sn-feature-block .inner-box:before, .sn-about-img .about-info>i, .find-therapist-form-wrap.overlap340, .pagination li.page-item a.page-link.active, .serv-info2>h3 a, .nesletter-form form input[type="submit"]:hover, .comment-reply-wrap input[type="submit"], .bg-color5, .blue-layer:before
 {
			background-color:#9B5DE5; 
		}.thm-clr, .preloader-inner i, .sec-title-inner span.thm-clr, .view-more>p a, .serv-box-inner h4 a:hover, .method-box-inner h4 a:hover, .sn-list-style li:before, .top-links>li a:hover, .sticky-menu nav ul.sub-menu li a:hover, .quote-facts-wrap .fact-box-inner sup, .top-links>li a:focus, .social-links>a:hover, .style2 .topbar-inner p a, header.style2 .social-links>a:hover, .social-links>a:focus, .get-time-inner span.thm-clr.d-block, .bottom-bar-inner a, .widget-box .widget-title2>i, .header-contact-info>li a:hover, .sn-main-slider .title, .header-contact-info>li a:focus, nav ul ul li a:hover, #hm .sec-title-inner span, .sn-about-time .clock-icon, header.style1 nav ul li:hover>a, .sidebar .widget a:hover, .mini-post-info>span, .serv-box:hover>i, header.style1 .header-contact-cart span.d-block.scndry-clr, .simple-link.scndry-clr:hover, .simple-link.scndry-clr:focus, .comment-info>h4+span, .comment-info>span+span, .comment-info .comment-reply-link, .serv-img2>a:hover, #comments-thread-link a.comment-reply-link:hover, .serv-img2>a:focus, .team-info>h3 a:hover, .team-info>h3 a:focus, .prod-info>h3 a:hover, .prod-info>h3 a:focus, .news-box-inner>h3 a:hover, .news-box-inner>h3 a:focus, .social-links2>a, .widget-box ul>li a:hover, .widget-box ul>li a:focus, form.newsletter-form button:hover, form.newsletter-form button:focus, .copyright-links>p a:hover, .copyright-links>p a:focus, .bottom-links>li a:hover, .bottom-links>li a:focus, .about-play-btn.scndry-clr:hover, .about-play-btn.scndry-clr:focus, .live-video-img>a:hover, .live-video-img>a:focus, .storie-info>h3 a:hover, .storie-info>h3 a:focus, .news-info2>h3 a:hover, .news-info2>h3 a:focus, .scndry-bg .simple-link:hover, .scndry-bg .simple-link:focus, .feat-serv-box>h3 a:hover, .feat-serv-box>h3 a:focus, .banner-info>h3 a:hover, .banner-info>h3 a:focus, .course-info>h3 a:hover, .course-info>h3 a:focus, .video-box>a:not(.thm-btn):hover, .video-box>a:not(.thm-btn):focus, .news-info3>h3 a:hover, .news-info3>h3 a:focus, .news-img3>a:hover, .news-img3>a:focus, .bottom-bar.v3 p a:hover, .bottom-bar.v3 p a:focus, .about-video-box>a.scndry-clr:hover, .about-video-box>a.scndry-clr:focus, .scndry-layer .contact-info-box>span a:hover, .scndry-layer .contact-info-box>span a:focus, .search-form button:hover, .search-form button:focus, .mini-post-info>h5 a:hover, .mini-post-info>h5 a:focus, .post-detail p a, .video-box>a:hover, .video-box>a:focus, .meta3>li a:hover, .meta3>li a:focus, figure>a:hover, figure>a:focus, .team-detail-info-meta>li a:hover, .team-detail-info-meta>li a:focus, .post-detail.blog-detail .social-links5>span.thm-clr, .authr-meta>li a:hover, .authr-meta>li a:focus, .rating>a:hover, .rating>a:focus, .rspn-srch>button:hover, .rspn-srch>button:focus, .rspn-cnt>span a:hover, .rspn-cnt>span a:focus, .rsnp-mnu ul>li:hover>a, .rsnp-mnu ul>li.active-parent>a, .rsnp-mnu ul>li.active>a, .rsnp-mnu ul>li>a:focus, .serv-post-authr>a:hover, .serv-post-authr>a:focus, .sticky-menu.v2 nav>div>ul>li:hover>a, .sticky-menu.v2 nav>div>ul>li.active>a, .sticky-menu.v2 nav>div>ul>li>a:focus, .course-athr a:hover, .course-athr a:focus, .serv-box4-inner>h3 a:hover, .serv-box4-inner>h3 a:focus, .testi-list-caro.slick-slider>button.slick-arrow:hover, .testi-list-caro.slick-slider>button.slick-arrow:focus, .scndry-layer .testi-list-caro.slick-slider>button.slick-arrow:hover, .scndry-layer .testi-list-caro.slick-slider>button.slick-arrow:focus, .meta>li a:hover, .meta>li a:focus, .meta2>li a:hover, .news-info2>h3+ul li:last-child a:hover, .meta2>li a:focus, .course-info>span a:hover, .course-info>span a:focus, .proced-box>h4 a:hover, .proced-box>h4 a:focus, .minicart-info>h6 a:hover, .minicart-info>h6 a:focus, .minicart-info a.remove-cart:hover, .sn-main-slider-carousel h1 strong, .minicart-info a.remove-cart:focus, .enroll-inner p strong, .team-detail-wrap>ul li:before, .post-detail>ul:not(.meta3) li:before, .bottom-bar-inner p a, .top-noti p a:hover, .serv-post-authr i, .news-box2 ul.meta>li:not(.thm-clr):not(.scndry-clr), .meta3 li i, .quote-facts-wrap .fact-box-inner h4 a:hover
		{
			color:#9B5DE5; 
		}.thm-brd-clr, .pagination li.page-item.prev a.page-link:hover, .pagination li.page-item.next a.page-link:hover, .pagination li.page-item.prev a.page-link:focus, .pagination li.page-item a.page-link, .pagination li.page-item.next a.page-link:focus, .preloader-inner:before
		{
			border-color: #9B5DE5;
		}.proced-box:before, .error-inner > i.thm-bg:after
		{
			border-top-color: #9B5DE5;
		}.about-inner>span, .simple-link.thm-clr, .simple-link.scndry-clr:hover, .simple-link.scndry-clr:focus, .about-desc>span.thm-clr, .meta2>li a:hover, .meta2>li a:focus
		{
			border-bottom-color: #9B5DE5;
		}.scndry-bg, .scndry-layer:before, .thm-bg .search-btn:hover, .thm-bg .search-btn:focus, header.style1 nav ul li:hover > a, header.style1 nav ul li.active > a, header.style1 nav ul li > a:focus, .thm-btn.thm-bg:before, .thm-btn.thm-bg:after, .slick-slider.feat-caro > button.slick-arrow, .serv-box-inner:before, .scndry-shp:after, .serv-info2 > h3 a:before, .team-info:before, .prod-img > a.thm-bg:hover, .prod-img > a.thm-bg:focus, .widget-title:before, .widget-title:after, .feat-caro2.slick-slider > button.slick-arrow, .serv-box2.v2 .serv-info2 > h3 a:hover:before, .serv-box2.v2 .serv-info2 > h3 a:focus:before, .serv-box2.v2 .serv-info2 > h3 a, .thm-bg .find-thera-cap > a:hover, .thm-bg .find-thera-cap > a:focus, .course-info-bottom > span:not(:first-child):before, .special-box.thm-bg:after, .pagination li.page-item.active a.page-link, .pagination li.page-item a.page-link:hover, .pagination li.page-item a.page-link:focus, .pagination li.page-item.prev a.page-link, .pagination li.page-item.next a.page-link, .gallery-box:before, .gallery-video-box > a.thm-bg:hover, .gallery-video-box > a.thm-bg:focus, td.fc-today, .fc .fc-row .fc-content-skeleton td.fc-today, .fc-unthemed td.fc-today, .contact-info-box:hover > i, .thm-layer .social-links3.v2 > a:hover, .thm-layer .social-links3.v2 > a:focus, .proced-box.thm-bg:hover, .blue-layer2:before, header.style1 .header-left ul li.current-menu-ancestor, .single blockquote, .sn-feature-block.active .content a, .sn-main-slider .owl-nav .owl-prev, .sn-main-slider .owl-nav .owl-next, .sn-feature-block .inner-box, .serv-info2 > h3 a::before, .sn-ser-block.serv-box4 .side-arrow, .sn-main-slider .image-column .circle-layer .circle-two, .sn-main-slider-carousel .title:before, .sn-main-slider-carousel .title:after, .sn-enroll-wrap:before, .sn-about-img .social-links4 > a, .comment-reply-wrap input[type="submit"]:hover, .get-time-box + a, .team-detail-img > img + .team-detail-info:before, .search-no-results i.flaticon-close.d-inline-block.position-relative.brd-rd10.thm-bg, .error404 i.flaticon-close.d-inline-block.position-relative.brd-rd10.thm-bg, footer .dark-layer2:before, .sn-main-slider .swiper-button-prev:hover, .sn-main-slider .swiper-button-next:hover
		{
			background-color: #1A1A1A;
		}.scndry-clr, .thm-bg .top-links>li a:hover, .thm-bg .top-links>li a:focus, .thm-bg .social-links>a:hover, .thm-bg .social-links>a:focus, .simple-link.thm-clr:hover, .simple-link.thm-clr:focus, .about-play-btn.thm-clr:hover, .about-play-btn.thm-clr:focus, .serv-box3:hover .serv-info3>i, .thm-bg .simple-link:hover, .thm-bg .simple-link:focus, ol.breadcrumb li.breadcrumb-item a:hover, ol.breadcrumb li.breadcrumb-item a:focus, .about-video-box>a.thm-clr:hover, .about-video-box>a.thm-clr:focus, .thm-layer .contact-info-box>span a:hover, .thm-layer .contact-info-box>span a:focus, .post-detail ul li:before, .post-detail.blog-detail .social-links5>span.scndry-clr, .post-detail p a:hover, .post-detail p a:focus, .thm-layer .testi-list-caro.slick-slider>button.slick-arrow:hover, .thm-layer .testi-list-caro.slick-slider>button.slick-arrow:focus, .team-box:hover .team-info>span, .storie-box:hover .storie-info>span, .meta>li.thm-clr a:hover, .meta>li.thm-clr a:focus, .meta2>li.thm-clr a:hover, .meta2>li.thm-clr a:focus, .green-clr, .alim .srv-tl>h2, .style3 .top-links>li a:hover, .storie-info>h3+span, .view-more p a:hover, .social-links>a:hover, .team-info>h3+span, .team-info>h3 a:hover, .serv-bx:hover>i.theme-clr, .serv-bx>h5 a:hover, .news-info2>h3+ul li:last-child a, .serv-bx>h5 a:focus, .error-page-inner>p a:hover, .error-page-inner>p a:focus, .woocommerce-MyAccount-content p a:hover, .woocommerce-MyAccount-content p a:focus, .woocommerce-account .addresses .title .edit:hover, .woocommerce-account .addresses .title .edit:focus, .menu-sec nav>div>ul>li>a:focus, .error-page-inner>h1, .error-page-inner>span, .style2 nav>div ul li:hover, .rspn-cnt .inf-lst>li i, .woocommerce button.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce a.button:hover, .team-detail-info-meta>li a:hover, .woocommerce-page a.button:hover, nav ul li:hover>a, .team-detail-info>h3+span, nav ul li.active>a, nav ul li>a:focus, .woocommerce button.button:hover, .post-inf>h5, .event-bx>h5, .alim .hstry-desc>.excerpt-about p, .sidebar_wrapper .widget>h5, .widget>h5, .rcnt-inf>span, .woocommerce-page button.button:hover, .woocommerce div.product p.price, .woocommerce div.product span.price, .pr-tm-bx>span i, .secndry-clr, .plr-box>i, .pilr-info>h4, .sec-title-inner>span, .sec-title-inner>h3 span, .srv-tl>h2, .serv-info>h4, .team-scl>a, .evnt-info>h4, .pry-tim-hed>span, .testi-info>h4, .sec-title-inner2>span, .srv-info2>h4, .srv-info2>a:hover, .srv-info2>a:focus, .contact-info-box>i, .blog-info>a:hover, .blog-info>a:focus, .pagination>li a, .srv-ttl>h4, .msn-desc>ul li, .cmt-inf>a:hover, .cmt-inf>a:focus, .abot-sec a.secndry-btn:hover, .alim .sec-title-inner>h3 span, .dnt-sec-wrp .dnt-frm li i, .pr-tm-bx>h6, .storie-info a:hover, .sidebar .widget-title3
		{
			color: #1A1A1A;
		}.green-brd-clr, .plr-box.alim > i, .namaz-drp button#dropdownMenuButton
		{
			border-color: #1A1A1A;
		}.error-inner > i.thm-bg:after, .proced-box:hover:before, .meta2 > li:not(.thm-clr) span:before
		{
			border-top-color: #1A1A1A;
		}.sn-enroll-wrap .enroll-inner .pull-right p
		{
			border-left: 3px solid #1A1A1A;
		}
/* ===== index.html \3c style id="arrow_options-dynamic-css"> ===== */
h1{font-family:Montserrat;font-weight:800;font-style:normal;color:#222;font-size:55px;}h2{font-family:Nunito;font-weight:800;font-style:normal;color:#222;font-size:36px;}h3{font-family:Nunito;font-weight:800;font-style:normal;color:#222;font-size:28px;}h4{font-family:Nunito;font-weight:800;font-style:normal;color:#222;font-size:22px;}h5 {font-family:Nunito;font-weight:800;font-style:normal;color:#222;font-size:20px;}h6 {font-family:Nunito;font-weight:800;font-style:normal;color:#222;font-size:18px;}.elementor-text-editor :not(p), .inf-lst li, .header-contact-info > li, .hdr-srch > form input, .pst-mta li, .post-inf > a, .post-bx .post-inf > p, .widget form input, .widget form textarea, .cpy-rgt > p, .woocommerce div.product .woocommerce-tabs .panel p, p, .storie-img > span{font-family:Arimo;font-weight:400;font-style:normal;color:#666;font-size:16px;}header.style3 nav > div > ul > li, nav > div > ul > li > a, nav ul ul li a{font-family:Montserrat;font-weight:600;font-style:normal;color:#1b1b1b;font-size:16px;}
/* ===== index.html \3c style id="wp-custom-css"> ===== */

.lang-switcher ul {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.lang-switcher li {
    display: inline-flex !important;
	padding: 5px !important;
}

.lang-switcher a {
    text-decoration: none !important;
}

.opc7:before {
    opacity: 0;
}

.lang-switcher img {
    width: 20px !important;
    height: 20px !important;
	  border-radius: 50%;
	  object-fit: cover;
    border: 1px solid #000;
}

footer .widget-title2 {
    font-family: 'Roboto';
}


.bg-color6 {
    background-color: #e0f0ff !important;
}

.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid {
    padding: 0;
}

.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .wpcf7 textarea {
	border-radius: var(--curve5);
}

.iti input, .iti input[type=tel], .iti input[type=text], div.evf-container .everest-form .iti input, div.evf-container .everest-form .iti input[type=tel], div.evf-container .everest-form .iti input[type=text] {
    margin-bottom: 10px !important;
}

.iti__selected-flag, div.evf-container .everest-form .iti__selected-flag {
    padding: 0 6px 10px 8px;
}

.everest-forms .evf-field-container .evf-frontend-row:not(.wp-list-table), .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row:not(.wp-list-table) {
    margin: 0 !important;
}

.everest-forms .evf-field-container, .everest-forms .evf-honeypot-container, .everest-forms .evf-submit-container, .wp-block-everest-forms-form-selector .evf-field-container, .wp-block-everest-forms-form-selector .evf-honeypot-container, .wp-block-everest-forms-form-selector .evf-submit-container {
    padding: 0 !important;
}


.everest-forms .everest-forms-part-button, .everest-forms a.button:not(.button-large), .everest-forms button.button:not(.button-large), .everest-forms button[type=submit], .everest-forms input[type=submit], .wp-block-everest-forms-form-selector .everest-forms-part-button, .wp-block-everest-forms-form-selector a.button:not(.button-large), .wp-block-everest-forms-form-selector button.button:not(.button-large), .wp-block-everest-forms-form-selector button[type=submit], .wp-block-everest-forms-form-selector input[type=submit] {
    color: #fff;
	  text-transform: uppercase;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 1.09375rem 1.8125rem;;
    border-radius: var(--curve5);
    border: 0px;
    background-color: #9B5DE5;
		width: 100%;
}

.everest-forms .everest-forms-part-button:active, .everest-forms .everest-forms-part-button:hover, .everest-forms a.button:not(.button-large):active, .everest-forms a.button:not(.button-large):hover, .everest-forms button.button:not(.button-large):active, .everest-forms button.button:not(.button-large):hover, .everest-forms button[type=submit]:active, .everest-forms button[type=submit]:hover, .everest-forms input[type=submit]:active, .everest-forms input[type=submit]:hover, .wp-block-everest-forms-form-selector .everest-forms-part-button:active, .wp-block-everest-forms-form-selector .everest-forms-part-button:hover, .wp-block-everest-forms-form-selector a.button:not(.button-large):active, .wp-block-everest-forms-form-selector a.button:not(.button-large):hover, .wp-block-everest-forms-form-selector button.button:not(.button-large):active, .wp-block-everest-forms-form-selector button.button:not(.button-large):hover, .wp-block-everest-forms-form-selector button[type=submit]:active, .wp-block-everest-forms-form-selector button[type=submit]:hover, .wp-block-everest-forms-form-selector input[type=submit]:active, .wp-block-everest-forms-form-selector input[type=submit]:hover {
    color: #fff;
    background-color: #0f0101;
}

.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-checkbox ul li, .everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-checkbox ul li, .everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-multiple ul li, .everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-subscription-plan ul li, .everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-radio ul li, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-checkbox ul li, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-checkbox ul li, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-multiple ul li, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-payment-subscription-plan ul li, .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field.evf-field-radio ul li
 {
    margin-bottom: 10px;
}

.everest-forms label, .wp-block-everest-forms-form-selector label {
	text-align: left;
	color: white;
	line-height: 2.2;
	
}

.everest-forms .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field ul:not(.select2-selection__rendered), .wp-block-everest-forms-form-selector .evf-field-container .evf-frontend-row .evf-frontend-grid .evf-field ul:not(.select2-selection__rendered) {
    margin-bottom: 20px;
}

@media (min-width: 576px) and (max-width: 995px) {
  .res-row > .row {
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .elementor-element-2c52daa .res-row > .row > .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 40px;
		text-align: center;
  }
}

@media (max-width: 1031px) {
  .elementor-7072 .get-time-box{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .elementor-7072 .get-time-box > span{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}



.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .wpcf7 select {
    height: 3.875rem;
    font-size: 14px;
    color: #9b9b9b;
    font-family: Nunito;
    font-weight: 600;
    padding: 10px 1.875rem;
    width: 100%;
}
}

/* src/components/play4you/play4you.css */
@layer template-theme {
/*
 * play4you theme tokens.
 *
 * Layering: this file is imported AFTER the shared cms layers and the tenant's own
 * scoped raw template (styles/style.scoped.css), so it is the last word — it is the seam where
 * the shared, tenant-agnostic views (`components/cms/data-views/*`) are retuned to this brand.
 * The views are byte-for-byte the same components dcn and konektus render; a tenant is a token
 * sheet, not a reimplementation.
 *
 * The brand values below are deliberate neutral placeholders. Replace them with the raw
 * template's real palette/type scale when it lands (see docs/adding-a-tenant.md); do NOT copy
 * template rules in here — those belong in styles/style.css and go through the scoping script.
 */
/*
 * ===== Base layer =====
 *
 * The scraped template was authored against Bootstrap's reboot, and the theme stylesheet only ever
 * supplied the skin on top of it. This tenant ships no Bootstrap, so the few reboot rules the
 * template actually depends on are restated here, scoped. Verified by rendering the header with
 * Bootstrap absent and diffing against the raw template: without `box-sizing`, `.cms-container`'s
 * max-width stops including its gutter and the whole header shifts 12px; without the line-height
 * and image baseline, the topbar strip and the logo badge mis-measure by a few px.
 *
 * Keep this minimal — it is a compatibility floor for the ported markup, not a reset to grow.
 */
body,
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
/*
 * The last thing on this page that is still Bootstrap's to supply: `body { margin: 0 }`. Verified
 * by deleting Bootstrap's reboot at runtime — the header and footer are otherwise untouched by its
 * absence, but without this every block shifts by the UA's default 8px body margin.
 */
body {
  margin: 0;
}

body {
  line-height: 1.5;
  --p4y-bg: #ffffff;
  --p4y-bg-soft: #f6f7f9;
  --p4y-text: #16181d;
  --p4y-muted: #5b6270;
  /* The template's brand pair, as the Redux sheet defines them: `.thm-bg` / `.scndry-bg`. */
  --p4y-accent: #9b5de5;
  --p4y-secondary: #1a1a1a;
  /* The soft blue card the services sidebar wears (`.widget-box.v3.bg-color6` on the live site).
     A token because more than one block now sits in that column and has to match it. */
  --p4y-card: #e0f0ff;
  --p4y-card-radius: 10px;
  --p4y-card-gutter: 45px;
  /* The warning pair, used by the empty-list notice. Bootstrap's amber, which is the family the
     other alert surfaces in this codebase already use. */
  --p4y-warning-bg: #fff3cd;
  --p4y-warning-border: #ffe69c;
  --p4y-warning-text: #664d03;

  min-height: 100vh;
  background: var(--p4y-bg);
  color: var(--p4y-text);
}

/* Shared data-view tokens for play4you (see the token list in cms/data-views/views.css). */
body {
  --cms-view-title-color: var(--p4y-text);
  --cms-view-meta-color: var(--p4y-muted);
  --cms-view-excerpt-color: var(--p4y-muted);
  --cms-view-accent: var(--p4y-accent);
  --cms-view-media-radius: 10px;
}

.cms-view-grid {
  --cms-view-card-bg: var(--p4y-bg-soft);
}

/*
 * Empty list notice (shared `data-views/EmptyState`) — the authored `empty_data_msg` standing in for
 * a list whose query returned no rows.
 *
 * Styled here and not in the shared sheet, which deliberately ships only `margin: 0`: whether an
 * empty band should draw MORE attention than a filled one is a theme's call, and this theme's call
 * is yes. The camps page is a `services` block filtered to one category, so with the category empty
 * the page is its header and nothing else — a tinted notice says "nothing here yet" where bare body
 * copy under a heading reads as a section that failed to load.
 *
 * No block margin: `.cms-data-section-head` already holds 3.125rem below the heading, and under this
 * tenant's `display: contents` the notice is a grid item, where adjacent margins do not collapse —
 * so a margin here would add to that gap rather than merge with it.
 */
.cms-data-empty {
  padding: 24px 30px;
  border: 1px solid var(--p4y-warning-border);
  border-radius: var(--p4y-card-radius);
  background: var(--p4y-warning-bg);
  color: var(--p4y-warning-text);
  text-align: center;
}

/*
 * Pager (shared `data-views/Pager`) — replaces this tenant's own copy, which emitted a 0-based
 * `?page=` and so linked every page one early with the last one unreachable.
 *
 * Skinned on the tokens rather than the template's `.pagination > .page-item > .page-link`: that
 * markup only looked right because Bootstrap still reaches these routes from the other shells, and
 * the theme's own contribution to it is a single active-pill rule in the template's leftover brand
 * (#BB9457). Rounded pills in the tenant's accent instead, which is what the rest of this sheet uses.
 */
.cms-pager {
  --cms-pager-gap: 40px;
  --cms-pager-size: 40px;
  --cms-pager-radius: 10px;
  --cms-pager-font-size: 1rem;
  --cms-pager-color: var(--p4y-text);
  --cms-pager-hover-bg: var(--p4y-bg-soft);
  --cms-pager-active-bg: var(--p4y-accent);
  --cms-pager-active-color: #fff;
  --cms-pager-active-hover-bg: var(--p4y-accent);
}

/*
 * ===== Header =====
 *
 * The template's header chrome is styled entirely by the scoped stylesheet (the blocks render its
 * own classes). What lives here is only the handful of places where the raw markup's fixed layout
 * and the CMS grid disagree — each one is a rule the port deliberately re-points, not a restyle.
 */

/* The template's header runs in a wider gutter than the site default (`header.cms-header .container`);
 * the CMS blocks use `.cms-container`, so carry the width over. */
header.cms-header .cms-container {
  max-width: 96.875rem;
}

/*
 * Layout primitives the raw markup got from Bootstrap utility classes.
 *
 * The scraped template leans on Bootstrap for the header's structural bits — `w-100`,
 * `position-relative/absolute`, `d-block`, `d-inline-flex`, `text-center`, `img-fluid` — while the
 * theme stylesheet only supplies the skin. The blocks are framework-free (layout is the shared CMS
 * grid), so those declarations live here instead, on the template's own class names.
 *
 * Everything the theme stylesheet already states — colours, padding, the badge's clip-path tail,
 * type — is NOT repeated here; this is only what left with the utilities.
 */
header.cms-header {
  position: relative; /* containing block for the absolutely-positioned logo badge */
  background-color: var(--p4y-bg); /* was `.logo-contact-menu-wrap.v2 { background: #fff }` */
  isolation: isolate; /* own stacking context, so the topbar strip below paints over this bg */
}
.logo.v2 {
  position: absolute;
  text-align: center;
}
.logo.v2 a {
  display: block; /* the theme's 1.55rem/1.5rem padding sizes the badge off this */
}
.logo.v2 img {
  max-width: 100%;
  height: auto;
}
.social-links {
  display: inline-flex;
  align-items: center;
}
/* The menu list's `mb-0 list-unstyled d-inline-flex`. Everything else about the items — the
 * 5.3125rem line-box, uppercase, gaps, link type — is restated below, since the theme delivered it
 * through `nav > div > ul > li` and that chain is gone with the shared block's markup. */
header.cms-header .cms-nav-list {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The template reserves a fixed 16.5625rem gutter on the header's inner rows and pulls the logo
 * badge into it with a matching negative margin. Under the CMS that gutter is a real grid track
 * (the header row's first column, sized from the page tree), so the reservation and the pull are
 * both dropped — the badge hangs in its own cell instead.
 *
 * What replaces them is the badge's offset from that cell: back out over the container's gutter
 * padding so it lines up with the container edge, and up over the topbar strip. The template gets
 * the same overlap implicitly, from the static position of an absolutely-positioned child of its
 * flex header bar; a grid cell starts at the bar's top edge, so here it is stated outright.
 * Measured against the raw template: badge box 173x116 at the container's left edge, 17px down.
 */
header.cms-header .cms-row {
  padding-left: 0; /* over the theme's `header.cms-header .topbar-inner` gutter reservation */
}

/*
 * ===== The header's two zones, by row =====
 *
 * The page tree authors the header as one container with two rows — row 0 the topbar strip, row 1
 * the logo + nav bar — and the DOM says exactly that. So the zones are addressed by row position
 * rather than by wrapper elements. The second selector in each pair reaches the rows when
 * renderNode splits them into its responsive desktop/mobile arrangement wrappers; the `>` chain
 * stops either from matching rows nested inside a container block deeper in the header.
 *
 * In the template the strip is 3.125rem tall only because of the search button sitting in it — the
 * social links themselves are 24px. That button is chrome, not a CMS component, so the height is
 * held here: the strip keeps its proportions (and the logo badge keeps the surface it overlaps) no
 * matter which blocks get authored into row 0.
 */
/*
 * Desktop only, and identified by content rather than by row position.
 *
 * "The strip is row 0" is not a safe assumption: a row whose blocks are all hidden — either
 * `is_visible: false` or hidden for the breakpoint — is dropped before it reaches the DOM, so the
 * rows that render are not the rows that were authored. Hiding the socials would promote the menu
 * bar to first child and paint it as a dark full-width strip. The strip is therefore "a header row
 * carrying neither the logo nor the menu", which survives any of the three being hidden.
 */
@media (min-width: 1032px) {
  header.cms-header > .cms-container > .cms-row:not(:has(.logo)):not(:has(nav)),
  header.cms-header
    > .cms-container
    > *
    > .cms-row:not(:has(.logo)):not(:has(nav)) {
    position: relative;
    align-items: center;
    min-height: 3.125rem;
  }

  /*
   * The strip's background bleeds to the viewport edges while its content stays in the gutter — the
   * same break-out `.cms-fullbleed` does, but as a backdrop so the row's grid tracks keep their
   * container-width sizing (they carry the authored column split). `z-index: -1` puts it behind the
   * row's cells; the header's `isolation: isolate` keeps it in front of the header's own background.
   */
  header.cms-header
    > .cms-container
    > .cms-row:not(:has(.logo)):not(:has(nav))::before,
  header.cms-header
    > .cms-container
    > *
    > .cms-row:not(:has(.logo)):not(:has(nav))::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: var(--p4y-secondary); /* was `.topbar.scndry-bg` */
    z-index: -1;
  }

  /*
   * A left-aligned strip cell starts flush at the container's own left edge — which is also where
   * the logo badge's grid TRACK starts, even though the badge itself is `position: absolute` and so
   * does not push anything. Authoring the strip's content as left-aligned therefore sits it directly
   * under the badge rather than beside it, since nothing in the strip row knows the badge's column
   * exists.
   *
   * The fix is not "clear the badge's rendered width" — that width is fixed (see `.cms-logo`'s own
   * geometry above) but the badge's grid TRACK is not: the logo+nav row splits `1fr / 4fr` (its own
   * authored column widths), a proportion of whatever the container currently measures, and this
   * header's container widens up to 96.875rem before it caps. So the inset a left-aligned strip cell
   * needs is itself proportional — `1fr` of the row's width, minus the grid gap that fr math already
   * spends, plus that same gap back to clear the column boundary — not a fixed pixel figure that
   * would only be right at one viewport width.
   *
   * COUPLED TO THE LOGO+NAV ROW'S OWN SPLIT: the `1 / 5` below is that row's `1fr` out of its total
   * `1fr + 4fr` tracks. If an editor changes that split, this stops lining up and has to follow.
   *
   * Scoped to `:not([data-align])` — the CMS stores "left" as no value at all (see the alignment
   * note on `.cms-hero-caption`), so an authored centre or end alignment is untouched and answers
   * for itself.
   */
  header.cms-header
    .cms-row:not(:has(.logo)):not(:has(nav))
    > .cms-col:not([data-align]) {
    padding-left: calc((100% - var(--cms-grid-gap, 24px)) * 1 / 5 + var(--cms-grid-gap, 24px));
  }
}

header.cms-header .logo.v2 {
  margin-left: calc(-1 * var(--cms-container-pad));
  margin-top: -2.0625rem;
}

/*
 * Font Awesome 5 icon family, restated on the pseudo-element.
 *
 * FA5 sets only `content` on the pseudo-element and inherits the family from `.fab`/`.fas`/`.far`.
 * Restated so the icons never depend on that inheritance; keep these in step with any FA5 style
 * used in the markup.
 */
.fab:before {
  font-family: 'Font Awesome 5 Brands';
}
.fas:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
.far:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

/*
 * ===== Mobile header (below 1031px) =====
 *
 * The template hides `<header>` outright here and ships a second, hand-built bar (`.rspn-hdr`) as a
 * sibling of it. The port keeps ONE header at all widths — dcn's `nav_bar` pattern, where the block
 * renders both forms and CSS shows one per breakpoint — so the header is restyled into that bar
 * below.
 *
 * Only the bar's own layout is restated: the hamburger, the drawer and its close button carry the
 * template's class names, and the theme scopes none of those under `.rspn-hdr`, so `.cms-nav-toggle`
 * / `.cms-nav-drawer` / `.cms-nav-close` supply their whole look — including the drawer's slide-in and the
 * current item's accent — wherever the block renders them.
 *
 * Measured against the raw template at 800px: bar 70px tall, logo 125x24 at x=15, hamburger 40x40
 * pinned 20px from the right edge, and no topbar strip.
 */
.cms-nav-toggle {
  border: 0; /* the template's trigger is a <span>; the block renders a real button */
}
/*
 * Desktop: the bar itself is the menu. Not for a collapsed nav (`nav_collapsed`), whose hamburger
 * is the menu at every width and is shown by blocks.css. Under cascade layers this sheet beats
 * blocks.css whatever the specificity, so every rule here that hides or re-displays the menu
 * chrome has to leave a collapsed nav alone.
 */
.cms-nav:not([data-collapsed]) .cms-nav-toggle {
  display: none;
}

/*
 * The side menu is theme chrome that merely happens to be rendered inside a CMS cell — it is
 * `position: fixed` and fills the viewport edge, so the cell's column alignment has no business
 * reaching it. It inherits `text-align` all the same, so restate the template's own left-aligned
 * list here. The hamburger, by contrast, *is* placed by the cell (below).
 */
.cms-nav-drawer {
  text-align: left;
}
/* Keep the drawer inert on desktop even if it was left open across a resize — for a bar nav only;
   a collapsed nav's drawer is its menu at every width. */
@media (min-width: 1032px) {
  .cms-nav:not([data-collapsed]) .cms-nav-drawer {
    display: none;
  }
}

/*
 * A bar-copy submenu is `position: absolute` (see blocks.css) with no background of its own —
 * without one it's see-through over whatever scrolls underneath the sticky header. The rest of
 * this block restates the reference dropdown's own look (`nav ul ul` on the live site): a fixed
 * panel width rather than the generic min-width-of-trigger, row dividers instead of the bar's
 * uppercase/bold type, and the accent ink on hover.
 */
.cms-nav-list .cms-nav-submenu {
  background-color: var(--p4y-bg);
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.05);
  min-width: 14.625rem;
  white-space: normal;
}
/*
 * A fade + slide-down for the dropdown, in place of blocks.css's hard `display: none` / `block`
 * swap — `display` can't be transitioned, and starting from `none` leaves nothing to animate from.
 * Kept in the layout at all times instead (`display: block` here overrides the generic default) and
 * hidden via opacity/visibility/transform, the same shape the reference's own (now-neutralised,
 * see the drawer's `.cms-nav-submenu` override further down) `nav ul ul` transition used. The
 * `visibility` transition is delayed on the way out so closing still fades rather than vanishing,
 * but instant on the way in (no listed delay on the open rule) so hover/click feels responsive.
 */
.cms-nav-list .cms-nav-submenu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}
.cms-nav-list .cms-nav-item--has-submenu[data-submenu-open] .cms-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}
/* `header.cms-header` repeats the ancestor already in the DOM path — needed to out-specify the
   bar's own `header.cms-header .cms-nav-list .cms-nav-item` (uppercase/bold/Nunito), the same way
   the reference stylesheet's `nav ul ul` un-does its own `nav > div > ul > li`. */
header.cms-header .cms-nav-list .cms-nav-submenu .cms-nav-item {
  color: #1b1b1b;
  font-family: Montserrat, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5; /* the bar item's own 5.3125rem line-box (its 85px-tall click target) would
                       otherwise inherit down and space out a wrapped two-line title */
  text-transform: none;
}
.cms-nav-list .cms-nav-submenu .cms-nav-item:not(:first-child) {
  border-top: 1px solid #ececec;
}
/*
 * The bar's own top-level spacing rule (`header.cms-header .cms-nav-list .cms-nav-item:not(
 * :first-child) { margin-left: 2.1875rem }`, further below) is meant for the horizontal gap between
 * "ГЛАВНАЯ" / "О НАС" / "ДЕЯТЕЛЬНОСТЬ" — its descendant selector also matches a submenu's own nested
 * `.cms-nav-item`s, shoving every row but the first 35px to the right and breaking their left edges
 * out of line with each other. `.cms-nav-item--has-submenu` in the chain is what buys the extra
 * specificity to beat it (both rules are otherwise tied), not just decoration.
 */
header.cms-header
  .cms-nav-list
  .cms-nav-item--has-submenu
  .cms-nav-submenu
  .cms-nav-item {
  margin: 0;
}
header.cms-header .cms-nav-list .cms-nav-submenu .cms-nav-link {
  padding: 0.5rem 1.5625rem;
}
.cms-nav-list .cms-nav-submenu .cms-nav-link:hover,
.cms-nav-list .cms-nav-submenu .cms-nav-link:focus {
  color: var(--p4y-accent);
}
/* Breathing room between the title link and its toggle caret — the generic row has none, since
   that's left to each tenant (see blocks.css's SUBMENUS comment). Toggle-only rows (no url — the
   whole row is the `<button>`, title and caret both inside it) get the same spacing via the
   toggle's own gap, since `.cms-nav-item-row`'s gap only separates a *link* from a *sibling*
   toggle. */
.cms-nav-item-row {
  gap: 0.5rem;
}
.cms-nav-submenu-toggle {
  gap: 0.5rem;
}
/* The generic caret (blocks.css) turns from a down-chevron to an up-chevron on open — the
   reference's own FA chevron (`nav ul li.menu-item-has-children > a::before`) never rotates, so
   pin the open state back to the closed one's angle instead of letting it flip. */
.cms-nav-submenu-toggle[data-open] .cms-nav-submenu-caret {
  transform: rotate(45deg);
}
.cms-nav-submenu-caret {
  transition: none;
  /* Sits a couple px above the text's own vertical centre, by design — checked against the
     rendered text's bounding box (not the taller line-box) and nudged up further on request. */
  margin-top: -0.22em;
}

@media (max-width: 1031px) {
  /* The header itself stays visible below 1031px despite the template hiding every `header` —
     see play4you.important.css. */

  /*
   * renderNode's responsive arrangement wrappers switch at the shared grid's 991.98px, but this
   * theme's breakpoint is 1031px. Left alone, 992-1031px renders the *desktop* arrangement (here,
   * the header's authored `[1, 4]` tracks) already wearing the mobile chrome below — a 40px band
   * with a desktop grid and a hamburger. Realign them so the layout and the chrome switch together.
   */
  .cms-desktop-only {
    display: none;
  }
  .cms-mobile-only {
    display: block;
  }

  /*
   * The bar — `.lg-mn`'s 70px box. Applied to every header row rather than a positional one: what
   * is in the mobile bar is the page tree's call (it moves the socials down into it), and a row it
   * leaves empty never reaches the DOM, so counting rows here would break the moment the authoring
   * changes. Nothing is hidden for the same reason — a row that renders was authored to.
   */
  header.cms-header > .cms-container > .cms-row,
  header.cms-header > .cms-container > * > .cms-row {
    align-items: center;
    min-height: 4.375rem;
    /* `.lg-mn`'s 15px left inset. The template's bar is not inside a container, so it states that
     * gutter itself; here the shared `.cms-container` already contributes its own, and the two are
     * not the same width — make up the difference rather than inheriting whichever the CMS uses. */
    padding-left: max(0px, calc(0.9375rem - var(--cms-container-pad)));
  }

  /* The badge is desktop chrome: here the mark stands on its own, as in the template's bar. The dark
   * box, the angled tail, the overhang over a now-hidden strip and the h1-derived line-box all go —
   * the Logo block swaps in the CMS's mobile mark (the near-black colourway) for this bar, so the
   * box is no longer what makes it legible. `max-content` keeps the mark at the left edge of its
   * (wide) authored track rather than centred in it. */
  header.cms-header .logo.v2 {
    position: static;
    margin: 0;
    padding: 0;
    width: max-content;
    background: none;
  }
  header.cms-header .logo.v2::before,
  header.cms-header .logo.v2::after {
    display: none;
  }
  header.cms-header .logo.v2 .logo-mark {
    font-size: 0;
    line-height: 0;
  }
  header.cms-header .logo.v2 a {
    padding: 0;
  }

  /*
   * The theme paints social icons white unconditionally (`.social-links > a`) — in the template
   * they only ever sit on the dark topbar strip. Authored into the white mobile bar they would be
   * white-on-white, so they take the same dark ink as the logo's mobile colourway. Desktop is
   * untouched: on the strip they stay white.
   */
  header.cms-header .social-links > a {
    color: var(--p4y-secondary);
  }

  /* Bar menu out, hamburger in. */
  header.cms-header .cms-nav-list {
    display: none;
  }
  /*
   * The template pins the trigger to the header's right edge (`position: absolute; right: 1.25rem`,
   * centred with a negative margin). Here it flows inside its own grid cell instead, so the page
   * tree places it: the column's alignment becomes the cell's `text-align`, and an inline-block
   * button follows it. `inline-block` (not `block`) is what makes that alignment take effect; the
   * row's `align-items: center` handles the vertical centring the negative margin used to.
   */
  .cms-nav-toggle {
    position: static;
    margin-top: 0;
  }
  /* A collapsed nav keeps blocks.css's `inline-flex`, which is what centres the drawn bars in the
     box; the cell's `text-align` places an inline-flex box just the same. */
  .cms-nav:not([data-collapsed]) .cms-nav-toggle {
    display: inline-block;
  }
}

/*
 * The badge's height comes from the line-box of the `<h1>` the template wraps its image in
 * (55px/1.2 = 66px, plus the anchor's 1.55rem padding = the 116px box). The Logo block renders a
 * plain div instead — one h1 per page belongs to the content, not the chrome — so the metric is
 * restored here rather than by reintroducing the heading.
 */
.logo.v2 .logo-mark {
  font-size: 3.4375rem;
  line-height: 1.2;
  margin: 0;
}

/*
 * ===== Footer =====
 *
 * The slab's own classes are gone: the shared `footer` block emits `.cms-footer` / `.cms-footer-body`
 * and nothing else, so whatever `.style3`, `.dark-layer2` and `.pt-70` used to contribute is
 * restated at the foot of this file. The blocks *inside* the footer still carry their own template
 * classes (`.widget-box`, `.widget-title2`, `.contact-info-list`), so those are still the scoped
 * stylesheet's — `socials` is the one column already promoted to the shared block, so it is styled
 * against `.cms-socials` below (`===== Socials =====`) rather than here.
 */

/* `w-100` + `position-relative` on the footer slab. The position is load-bearing: `.dark-layer2`
 * paints its `#1A1A1A` through a `::before` at `z-index: -1`, which needs a positioned parent. */
footer .cms-footer-body {
  position: relative;
  width: 100%;
  /*
   * Own stacking context, exactly as the header needs for its topbar strip. Without it the slab's
   * `z-index: -1` backdrop escapes to the nearest one and can be painted over by an ancestor's
   * background, leaving the footer white and its white-on-dark type invisible.
   */
  isolation: isolate;
}

/*
 * The template's footer runs in a 1170px `.container` with no padding of its own — its columns get
 * their 15px gutters from the Bootstrap row/col pair. Under the CMS those gutters are the grid's
 * `gap`, so the container carries the full width and the gap supplies the 30px between columns.
 * Measured against the raw template at 1600px: four 270px columns starting at 215, 515, 815, 1115.
 */
footer .cms-container {
  /* 1170px of content inside a 15px gutter. Stated as width + padding rather than a bare 1170px
   * max-width so the gutter survives narrow viewports — with none, the columns run into the screen
   * edge and the copy is clipped. */
  max-width: 75rem;
  --cms-container-pad: 0.9375rem;
  --cms-grid-gap: 30px;
}

/*
 * Alignment follow-through. A column heading and a menu link each carry a marker pinned to their
 * left edge (the heading's accent bar, and the list's `a::before` arrow), and both boxes are
 * full-width blocks. Centre or end-align the column and the text travels while the marker stays at
 * the cell edge, stranded. Shrinking them to their content makes each carry its own marker.
 *
 * Keyed on the cell's authored alignment rather than a breakpoint: the theme does the same thing at
 * its 490px media query, but here it is the page tree, not the viewport, that decides. Left as
 * blocks when start-aligned, where there is nothing to fix and a full-width link is a bigger
 * target.
 */
.cms-col[data-align='center'] .cms-column-title,
.cms-col[data-align='end'] .cms-column-title,
.cms-col[data-align='center'] .cms-nav[data-shape='column'] .cms-nav-link,
.cms-col[data-align='end'] .widget-box ul:not(.contact-info-list) > li a {
  display: inline-block;
}

/* The widget list's `mb-0 list-unstyled w-100` (both the menu columns and the contact list). */
footer .widget-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

/*
 * The column copy. The theme styled it as `.widget-box.v2 > p`, a *direct* child — but the
 * description is CMS-authored HTML and renders through `HtmlRenderer`, which wraps it in a div.
 * Restated a level deeper rather than unwrapping the sanitiser; `.cms-cta-body` is that wrapper.
 */
.cms-footer-body .cms-cta .cms-cta-body p {
  margin-top: -8px;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7rem;
  color: #d7d7d7;
}

/*
 * ===== Footer bottom bar =====
 *
 * The template wraps it in `.bottom-bar.v3` — a full-width band, tinted over the slab, holding its
 * own container. Under the CMS it is simply a row, so the band is a full-bleed backdrop (the same
 * break-out the header's topbar strip uses) and the handful of `.bottom-bar.v3` declarations are
 * restated on the row.
 *
 * Identified by the copyright block it carries, never by row position — see Copyright.tsx.
 */
footer .cms-row:has(.cms-copyright),
footer .cms-row:has(.cms-socials) {
  position: relative;
  align-items: center;
  padding: 1rem 0;
}
footer .cms-row:has(.cms-copyright)::before,
footer .cms-row:has(.cms-socials)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.3); /* was `.bottom-bar.v3` */
  z-index: -1;
}
/*
 * Both halves of the bar carry the band, because the arrangement decides whether they share a row.
 * Desktop puts the copyright and the socials in one; the mobile tree splits them across two, and
 * banding only the copyright's left the socials sitting on the bare slab.
 *
 * When they are split, the pair still reads as one bar: the second row drops its top padding so the
 * two sit as a single block rather than as two stacked bars. Written for either order, since which
 * comes first is the tree's call.
 */
footer .cms-row:has(.cms-copyright) + .cms-row:has(.cms-socials),
footer .cms-row:has(.cms-socials) + .cms-row:has(.cms-copyright) {
  padding-top: 0;
}
/* `.bottom-bar.v3 p`, restated: the row can't carry the theme's class. */
.cms-copyright {
  margin: 0;
  font-family: Nunito, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/*
 * ===== Home: section bands and the featured banner =====
 *
 * The banner's markup used to wear the theme's own classes, so the scoped stylesheet styled it
 * directly and only the Bootstrap utilities needed restating. It is the shared `hero` block now and
 * emits `.cms-hero*`, so the theme's banner rules are transposed onto those names below — the
 * responsive ramp included — alongside the utilities and the carousel behaviour the template got
 * from Slick.
 */

/* `.cms-section` bands: full-bleed by default, content capped when authored as "Contained". */
.cms-section {
  width: 100%;
}
/*
 * The template's section rhythm — its content sections sit in a `.pt-40 … .pb-100` wrapper
 * (2.5rem / 6.25rem). Applied to CONTAINED bands only, which is the shape that wrapper has: a
 * full-width band is something like the banner, sized by its own content, and padding there would
 * push the hero down and open a gap above the footer. So the CMS `width` field decides, rather than
 * every section paying for it.
 */
.cms-section[data-width='contained'] {
  padding-top: 2.5rem;
  padding-bottom: 6.25rem;
}
.cms-section[data-has-image] {
  background-size: cover;
  background-position: center;
}

/*
 * Stacked rows inside a section. The mobile arrangement of a band is authored as two rows -- the
 * picture, then the copy -- and with nothing between them the image's bottom edge landed exactly on
 * the heading's top edge. In the template these two are one Bootstrap row whose columns stack on
 * small screens, so the separation came from the grid's own gutters; this port has no Bootstrap, the
 * same absence that left the hero button `display: inline`.
 *
 * `grid.css` has the mechanism -- `--cms-row-gap` -- but applies it only to rows holding a data
 * view, deliberately, so that dcn's breadcrumb strip stays tight under its page title. play4you
 * registers no `breadcrumbs` block and so has no such row to protect, which is why the selector can
 * be the plain one here. The value matches the 24px gutter the row already puts between columns, so
 * a band reads the same whether its parts sit side by side or stacked.
 */
.cms-section {
  --cms-row-gap: 1.5rem;
}
.cms-section .cms-row + .cms-row {
  margin-top: var(--cms-row-gap, 0);
}

/*
 * The banner. Was `.feat-wrap` > `.feat-item` > `.feat-img` + `.feat-cap-wrap` > `.feat-cap`, with
 * `.slick-*` classes for the carousel state; the shared block emits `.cms-hero*` and carries that
 * state on attributes, so the theme's rules for all of it are restated here against the new names.
 * Values are the template's own unless noted.
 */
.cms-hero {
  position: relative;
  width: 100%;
}
/* `.feat-item`/`.feat-img`'s `position-relative d-block w-100`. The template also darkened the
 * image with a 50%-black scrim; play4you shows its photographs unveiled, so that is not carried over. */
.cms-hero-slide,
.cms-hero-image {
  position: relative;
  display: block;
  width: 100%;
}
/*
 * Clip the slide to its own box. The zoom below scales the image to 1.3, which at this banner's
 * height renders ~103px taller than the slide at each end — and since the image is positioned with
 * `z-index: 1`, that overhang paints OVER whatever follows in the document, i.e. the footer, for the
 * two seconds the animation runs. The template never shows this because Slick wraps the track in
 * `.slick-list { overflow: hidden }`; with no carousel markup, nothing else contains it.
 */
.cms-hero-slide {
  overflow: hidden;
}

/* `.feat-img`: the banner's height, and the Ken Burns rest state. */
.cms-hero-image {
  min-height: 43.4375rem;
  max-height: 43.4375rem;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transform: scale(1.3);
  transition: all 2s cubic-bezier(0.7, 0, 0.3, 1);
}
@media (max-width: 1075px) {
  .cms-hero-slide {
    max-height: 40rem;
  }
  .cms-hero-image {
    min-height: 40rem;
    max-height: 40rem;
  }
}
@media (max-width: 770px) {
  .cms-hero-slide {
    max-height: 37rem;
  }
  .cms-hero-image {
    min-height: 37rem;
    max-height: 37rem;
  }
}
@media (max-width: 576px) {
  .cms-hero-slide {
    max-height: 35rem;
  }
  .cms-hero-image {
    min-height: 35rem;
    max-height: 35rem;
  }
}

/*
 * The zoom resolves for the slide that is showing — the theme hung that on `.slick-active`, and the
 * block marks the current slide `[data-active]` now. A banner that never rotates has no current
 * slide in the carousel sense, so its image is reset outright: otherwise the resting 1.3 would never
 * animate away and every image would sit permanently 30% overscaled.
 */
.cms-hero[data-carousel] > .cms-hero-slide[data-active] .cms-hero-image,
.cms-hero:not([data-carousel]) > .cms-hero-slide .cms-hero-image {
  transform: scale(1);
}
.cms-hero:not([data-carousel]) > .cms-hero-slide .cms-hero-image {
  transition: none;
}

/* The stacking and cross-fade are the shared block's (`components/cms/blocks.css`); what stays here
   is the theme's zoom, which is play4you's alone. */
/*
 * The arrows still work under a reduced-motion preference — only the auto-advance stops — so the
 * theme's 2s Ken Burns zoom has to be dropped here rather than left to the block. Without this a
 * user who asked for less motion would still get a full-width image scaling under every arrow press.
 * The cross-fade stays: an opacity change is not the motion this preference is about.
 */
@media (prefers-reduced-motion: reduce) {
  .cms-hero[data-carousel] > .cms-hero-slide .cms-hero-image {
    transform: scale(1);
    transition: none;
  }
}

/*
 * `.feat-cap-wrap`'s `d-flex flex-wrap position-absolute w-100`. The theme supplies the 73.125rem
 * cap, the centring transform and the bottom offset.
 *
 * NOT the raw markup's `justify-content-end`: the caption follows the column's alignment (below),
 * and with none authored it defaults left like every other cell. The CMS writes "left" as no value
 * at all, so a right-hand default would leave an explicitly left-aligned column with left-aligned
 * text and a right-hand box.
 */
.cms-hero-caption {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 73.125rem;
  left: 50%;
  bottom: 6.1875rem;
  z-index: 1;
  transform: translateX(-50%);
  /* So the cell's alignment reaches the copy. */
  text-align: inherit;
}
.cms-hero-copy {
  width: 100%;
  max-width: 35rem;
}

/*
 * The banner's type, which is NOT the theme's.
 *
 * play4you.ee sets the headline in Saira 46px and the line under it in Nunito, but neither comes
 * from the theme stylesheet — both are a per-widget override in Elementor's page CSS
 * (`post-6404.css`, keyed to one element id on one post). Restated here, scoped to the banner so it
 * stays its treatment rather than becoming a global heading rule. Saira comes from the revision's font link.
 *
 * The families apply throughout, but the 54px leading only above the theme's first banner
 * breakpoint: that Elementor override is not responsive, while the theme steps the headline down at
 * 430px with its own leading. Left unscoped, this would keep 54px under the reduced size — neither
 * the live site's look nor the theme's, just a broken hybrid.
 */
.cms-hero-title {
  margin: 0;
  font-family: Saira, sans-serif;
  font-size: 2.875rem;
  line-height: 3.75rem;
  font-weight: 700;
  color: #fff;
}
.cms-hero-subtitle {
  margin: 20px 0 0;
  font-family: Nunito, sans-serif;
  font-size: 1.125rem;
  color: #f3f3f3;
}
@media (min-width: 577px) {
  .cms-hero-title {
    line-height: 3.375rem;
  }
}
/* The theme steps the headline down twice. The 576 step lives in a grouped selector
   (`.feat-cap > h2, .sec-title3-inner > h2, …`), which is easy to miss reading the sheet for
   `.feat-cap` alone — it was, until the banner measured 46px where it had been 35.2px. */
@media (max-width: 576px) {
  .cms-hero-title {
    font-size: 2.2rem;
    line-height: 3.2rem;
  }
}
@media (max-width: 430px) {
  .cms-hero-title {
    font-size: 1.8rem;
    line-height: 1.4;
  }
}
.cms-hero-actions {
  margin-top: 1.875rem;
}

/*
 * Banner caption placement: vertically centred — a DELIBERATE departure from the template, which
 * pins it `bottom: 6.1875rem` — and horizontally placed by the page tree, like every other
 * positioned block in this port.
 *
 * The column's authored alignment reaches the caption's TEXT on its own, since the grid applies it
 * as the cell's `text-align` and that inherits. It cannot reach the caption BOX, which is a flex
 * item positioned by `justify-content` — so only that is mapped, and only for the two values that
 * differ from the left-hand default: the CMS stores "left" as no value at all, so there is no
 * `start` to match on.
 */
.cms-col[data-align='center'] .cms-hero-caption {
  justify-content: center;
}
.cms-col[data-align='end'] .cms-hero-caption {
  justify-content: flex-end;
}

/*
 * Below the template's banner breakpoint the caption spans the full width and centres its own copy;
 * above it, it is the centred 73.125rem box, vertically centred here rather than pinned to the
 * bottom. The template's 4.375rem right inset belongs to its bottom-right placement — it would skew
 * a left- or centre-aligned caption — so it is restored only for `end`, and never on mobile, where
 * the 15px gutter applies instead.
 */
@media (max-width: 1075px) {
  .cms-hero-caption {
    left: 0;
    top: 45%;
    bottom: auto;
    padding: 0 0.9375rem;
    text-align: center;
    justify-content: center;
    transform: translate(0, -50%);
  }
  /* The copy keeps its 35rem cap and shrinks to fit, so the flex centring above has something
     narrower than the wrap to centre. Widening it to the full wrap instead would re-flow the
     headline onto fewer lines and change the banner's height. */
  .cms-hero-copy {
    display: inline-block;
  }
}
@media (min-width: 1076px) {
  .cms-hero-caption {
    top: 50%;
    bottom: auto;
    padding-right: 0;
    transform: translate(-50%, -50%);
  }
  .cms-col[data-align='end'] .cms-hero-caption {
    padding-right: 4.375rem;
  }
  /*
   * The copy's 35rem cap is razor-thin for a real title: at the banner's 46px Saira bold, "Школа
   * кибер рыцарей" measures ~517px against a 560px (35rem) box — 43px of slack, 7.6%. That is not
   * "wraps today" but it is "wraps the moment a browser's font-loading fallback kicks in, kerning
   * differs by a few px, or the next title is a word longer" — the wrap this is fixing is one bad
   * font-load away, not hypothetical.
   *
   * Widened here, desktop only (this media block already exists for the caption's vertical
   * centring), rather than touching the 35rem cap ≤1075px keeps: below that breakpoint `.cms-hero-
   * copy` is `inline-block` specifically so the flex centring above it has something NARROWER than
   * the wrap to centre — see that rule's own comment. Growing the cap there would widen the box the
   * centring measures against, not just give the title room, and change the wrap point at the
   * banner's narrower heights. 40rem leaves ~120px of slack for this title while easily staying
   * inside the caption's own 73.125rem ceiling at every desktop width.
   */
  .cms-hero-copy {
    max-width: 40rem;
  }
}

/*
 * The CTA. `.thm-btn v2 mt-30 thm-bg brd-rd5` — the theme's button in its accent fill, plus the
 * three Bootstrap utilities this port does not load (see the note on `.thm-btn` above; the same
 * absence that once left it `display: inline` and painting over the subtitle).
 *
 * Including the hover, which this one was missing while `.cms-cta-button` had it: two black panels
 * that start 20% wide at each edge and grow to fill, painted behind the label by a negative
 * `z-index` inside the button's own stacking context. That is what the `position` and `overflow`
 * above are for. `:focus` gets the same treatment as `:hover`, as the theme has it — a keyboard
 * user should see what a pointer user sees.
 */
.cms-hero-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1.09375rem 1.8125rem;
  border-radius: var(--curve5, 5px);
  background-color: var(--p4y-accent, #9b5de5);
  color: #fff;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: initial;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1;
}
.cms-hero-button::before,
.cms-hero-button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  opacity: 0;
  background-color: #000;
  z-index: -1;
}
.cms-hero-button::before {
  left: 0;
}
.cms-hero-button::after {
  right: 0;
}
.cms-hero-button:hover::before,
.cms-hero-button:hover::after,
.cms-hero-button:focus::before,
.cms-hero-button:focus::after {
  opacity: 1;
  width: 100%;
}
.cms-hero-button:hover,
.cms-hero-button:focus {
  color: #fff;
}

/* `.thm-btn`'s own two steps down. */
@media (max-width: 995px) {
  .cms-hero-button {
    padding: 1rem 2rem;
  }
}
@media (max-width: 576px) {
  .cms-hero-button {
    padding: 1rem 2rem;
    font-size: 14px;
  }
}

/*
 * The arrows. `.slick-slider > button.slick-arrow` sized them and `.feat-caro` placed them; the
 * template's `.slick-prev`/`.slick-next` were inverted against both position and direction, so the
 * block wires each button to what its icon says and the placement is stated plainly here: `prev` on
 * the left of the pair, `next` on its right. The glyphs are the theme's Flaticon arrows.
 */
.cms-hero-arrow {
  position: absolute;
  z-index: 1;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background-color: #1a1a1a;
  /*
   * The template's glyph is `#444` at rest, which on a `#1a1a1a` button is all but invisible until
   * you hover it. We keep the arrows white throughout and let the hover be the fill alone.
   */
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  /* The template transitions nothing; the fill reads better eased than snapped. */
  transition: background-color 0.3s ease;
  bottom: 4.375rem;
}
/*
 * Hover/focus: the button fills with the accent. The glyph is already white, so the fill is the
 * whole effect.
 *
 * The template states that fill in its `.thm-bg` group — one rule with 63 selectors, of which
 * `.slick-slider.feat-caro > button.slick-arrow:hover` and `:focus` are two — so reading the sheet
 * for "slick-arrow:hover" turns up only its `color: #fff` rule and misses the fill entirely. The
 * template's resting `#1a1a1a` comes from the matching `.scndry-bg` group, the same way.
 */
.cms-hero-arrow:hover,
.cms-hero-arrow:focus {
  background-color: var(--p4y-accent, #9b5de5);
}
.cms-hero-arrow::before {
  font-family: Flaticon;
  font-style: normal;
}
.cms-hero-arrow[data-direction='prev']::before {
  content: '\f115';
}
.cms-hero-arrow[data-direction='next']::before {
  content: '\f116';
}
.cms-hero-arrow[data-direction='prev'] {
  right: 11.375rem;
}
.cms-hero-arrow[data-direction='next'] {
  right: 7.5rem;
}
@media (max-width: 1445px) {
  .cms-hero-arrow[data-direction='prev'] {
    right: 4.8rem;
  }
  .cms-hero-arrow[data-direction='next'] {
    right: 0.9375rem;
  }
}
@media (max-width: 1370px) {
  .cms-hero-arrow {
    bottom: 0.9375rem;
  }
}

/*
 * ===== Dynamic data: services grid =====
 *
 * The shared `CardGrid` renders every tenant's grid from the same markup (`.cms-view-card` →
 * media · title · excerpt); this is play4you's skin for it, matched to the template's `.serv-box2.v2`
 * card. It is a re-skin, not a re-implementation: no play4you view component exists, and the same
 * block on dcn keeps dcn's look.
 *
 * The card is an image with a dark plate straddling its lower edge, carrying the title. Measured
 * against the raw template: 402px image at 10px radius, plate 265x75 in #1A1A1A with 25.5/35px
 * padding, hanging 37px below the image.
 */
.cms-view-grid > .cms-view-card {
  position: relative;
  /* Room for the plate to hang past the image — the template's `.serv-box2.v2` padding. */
  padding-bottom: 2.3125rem;
  margin-bottom: 1.875rem;
}
/* The image well: rounded and clipped, so the hover zoom stays inside it. */
.cms-view-grid .cms-view-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--curve10, 10px);
}
/*
 * The template's picture proportions: 370x260, as its own service images are cut.
 *
 * Fixed rather than left to `height: auto`, because the thumbnail endpoint returns whatever aspect
 * each source happens to have (400x218 for the current set) — so the wells would take their shape
 * from the upload, and cards in a row would disagree in height whenever those differ. Stating the
 * ratio holds the template's proportions whatever is uploaded, and `object-fit: cover` crops to
 * fill it, so a picture is never stretched to fit the box.
 */
.cms-view-grid .cms-view-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 370 / 260;
  object-fit: cover;
  transition: transform 0.3s ease;
}
/* `.serv-box2:hover .serv-img2 > img` — the template's zoom-and-tilt. */
.cms-view-grid > .cms-view-card:hover .cms-view-media img {
  transform: scale(1.05) rotate(2deg);
}
/*
 * Hover affordance, as the template builds it on `.serv-img2`: a black scrim over the image and a
 * plus mark growing into the middle of it.
 *
 * Both are pseudo-elements because the shared `CardGrid` renders the image well as an image and
 * nothing else — the template has a real `<a><i class="flaticon-plus"></i></a>` in there, but that
 * anchor only exists to carry the same link the title already carries, so reproducing it as markup
 * would mean a second, redundant link to the same place on every card. Drawn instead, and kept out
 * of the pointer's way.
 */
.cms-view-grid .cms-view-media::before {
  content: '';
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s linear;
}
/* The scrim. `border-radius: inherit` keeps it inside the well's rounded corners. */
.cms-view-grid .cms-view-media::before {
  inset: 0;
  z-index: 1;
  background-color: #000;
  border-radius: inherit;
}
/*
 * The plus, drawn on the media's LINK rather than the media box — that is what lets the picture
 * carry a link while only the mark itself is clickable. `ItemMedia` wraps the image in the item's
 * link, so without this the whole photograph is a hit target; the link is switched off for pointers
 * and the mark switched back on, leaving the template's affordance: the picture reacts on hover,
 * but only the plus takes the click.
 */
.cms-view-grid .cms-view-media a {
  display: block;
  pointer-events: none;
}
.cms-view-grid .cms-view-media a::after {
  content: '\f12a';
  font-family: Flaticon;
  font-size: 1.875rem;
  width: 3.75rem;
  height: 3.75rem;
  line-height: 3.75rem;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  pointer-events: auto;
  transition: 0.3s linear;
  transform: translate(-50%, -50%) scale(0.5);
}
.cms-view-grid > .cms-view-card:hover .cms-view-media::before {
  opacity: 0.3; /* `.serv-box2.v2:hover .serv-img2:before` */
}
.cms-view-grid > .cms-view-card:hover .cms-view-media a::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* The title plate. `.cms-view-card-body` is the shared wrapper the title sits in, so the plate is
 * hung off that rather than off the heading, keeping the shared markup untouched. */
.cms-view-grid .cms-view-card-body {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 16.5625rem;
  width: 100%;
  z-index: 1;
  background-color: var(--p4y-secondary);
  padding: 1.59375rem 2.1875rem;
  border-bottom-left-radius: var(--curve10, 10px);
  transition: background-color 0.3s ease;
}
/*
 * The plate's angled tail: a clip-path wedge sitting just past its right edge, so the plate reads as
 * a cut ribbon rather than a rectangle. The template's own (`.serv-info2 > h3 a:before`) — 1.25rem
 * wide at `right: -1.2rem`, full height, `polygon(0 0, 0 100%, 100% 0)` — in the brand accent.
 *
 * `::after` rather than `::before`: the shared `.cms-view-card-body` is a tenant-agnostic element
 * and this must not collide with anything the shared sheet may hang off it later.
 */
.cms-view-grid .cms-view-card-body::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.2rem;
  width: 1.25rem;
  clip-path: polygon(0 0, 0 100%, 100% 0);
  background-color: var(--p4y-accent);
  transition: background-color 0.3s ease;
}
/*
 * Hover swaps the pair — the plate takes the accent, the tail the dark — so the cut stays visible
 * instead of the two merging into one accent block.
 *
 * Triggered by the PLATE, not the card. The template hangs this off `.serv-info2 > h3 a:hover`,
 * where the anchor fills the plate, so the colour answers the title alone; the scrim, plus mark and
 * image zoom above are the card-level `.serv-box2:hover` and stay that way. Crossing the image
 * should not light up the title.
 */
.cms-view-grid .cms-view-card-body:hover {
  background-color: var(--p4y-accent); /* `.serv-info2 > h3 a:hover` */
}
.cms-view-grid .cms-view-card-body:hover::after {
  background-color: var(--p4y-secondary);
}
.cms-view-grid .cms-view-title {
  margin: 0;
  font-family: Nunito, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.cms-view-grid .cms-view-title a {
  color: inherit;
  text-decoration: none;
}
/*
 * The template's card carries the title only — the teaser lives on the detail page. The text stays
 * in the DOM rather than being dropped in the block, so the same authored content still reaches the
 * list and carousel views (and assistive tech) on this tenant.
 */
.cms-view-grid .cms-view-excerpt {
  display: none;
}

/*
 * ===== `dynamic_data` section chrome =====
 *
 * play4you used to supply this as a React component (`dynamic-data-chrome.tsx`) rendering the
 * template's `.sec-title > .sec-title-inner` heading block. It is decoration, so it lives here now,
 * on the shared `DataSection`'s classes. The block ships no play4you code.
 *
 * WHY THE TEMPLATE'S DECLARATIONS ARE COPIED rather than its selectors reused: the heading's real
 * behaviour was spread across the scoped template sheet (`.sec-title-inner > p` is `inline-block`
 * with `max-width: 90%`; `> h2 + p` sets the 8px gap; `.sec-title-with-btns .sec-title-inner` is
 * held at 55%) and none of it was restated in this file — it worked because the markup wore the
 * template's class names. Keeping that would mean the shared component emitting play4you's
 * vocabulary, which is the coupling this phase removes. So the declarations that actually won are
 * transcribed below, verified against the live page at 375 / 900 / 1280.
 *
 * `display: contents` on the root: the CMS `section` container already supplies this tenant's band
 * and gutter, so the block's own wrapper must not become a box in the grid cell — the heading and
 * the view stay siblings, exactly as the old fragment left them.
 */
.cms-data-section {
  display: contents;
}

/*
 * The heading row. Always a flex row: with CTAs it is the template's `.sec-title-with-btns` (copy
 * one side, links the other); with none there is a single full-width child, which lays out exactly
 * as the old block-level `.sec-title` did. `3.125rem` is the template's `.sec-title` margin-bottom.
 */
.cms-data-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 3.125rem;
  /* The theme hard-centres the heading below 995px; the authored cell alignment wins instead, the
     same correction the old `.sec-title` rules made. */
  text-align: inherit;
}
/*
 * The row's flex placement follows the cell's authored alignment too, not just its text. This is
 * what puts the CTA line under a centred heading once the row wraps; without it the links sit at
 * the start of the line. (The old rules needed `!important` to beat the theme's 995px override —
 * nothing competes for the new class name, so these are plain.)
 */
.cms-col[data-align='center'] .cms-data-section-head {
  justify-content: center;
}
.cms-col[data-align='end'] .cms-data-section-head {
  justify-content: flex-end;
}

/*
 * Copy beside the links: the template's 55% column, full width once the row wraps at 995px. Without
 * CTAs the copy is the only child and takes the whole row.
 */
.cms-data-section-copy {
  /*
   * Full width by default, which is what pushes the CTA row onto its own line — the template's
   * `@media (max-width: 995px)` behaviour, and also the right answer when there are no CTAs at all.
   * `flex: 1 1 auto` would instead let the copy shrink to its content and share the line.
   */
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 995.02px) {
  .cms-data-section-head:has(.cms-data-section-ctas)
    .cms-data-section-copy {
    flex: 0 0 55%;
    max-width: 55%;
  }
}

/*
 * The title, as the live site sets it rather than as the theme defaults it — Roboto 800/2.2rem over
 * the theme's Nunito 46px, the same per-page Elementor override the banner headline has. The 430px
 * step is the theme's own (`font-size: 1.8rem !important`), restated because the class it hung on
 * is gone.
 *
 * No `text-align` on purpose: it inherits from the cell, so the section's authored alignment moves
 * the title and subtitle along with the cards below them.
 */
.cms-data-section-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 2.2rem;
  line-height: 3.125rem;
  font-weight: 800;
  color: #222222;
}
@media (max-width: 430px) {
  .cms-data-section-title {
    font-size: 1.8rem;
  }
}

/*
 * The subtitle. `inline-block` + `max-width: 90%` is the template's, and it is what makes the line
 * shrink-wrap and centre under a centred title instead of running the full column width.
 */
.cms-data-section-subtitle {
  display: inline-block;
  max-width: 90%;
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.6rem;
  color: #4f4f4f;
}
/* The template releases the 90% cap on phones, where it would only force an extra wrapped line. */
@media (max-width: 576px) {
  .cms-data-section-subtitle {
    max-width: 100%;
  }
}

/*
 * The CTA row (`.sec-title-btns`) and its links (`.simple-link.scndry-clr`): underlined Nunito 800
 * in the template's secondary ink. Once the row wraps below 995px the links get their own line.
 */
.cms-data-section-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: inherit;
}
@media (max-width: 995px) {
  .cms-data-section-ctas {
    margin-top: 1.25rem;
  }
}
@media (max-width: 490px) {
  .cms-data-section-ctas {
    justify-content: center;
    text-align: center;
  }
}
.cms-data-section-cta {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid currentcolor;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  line-height: 1;
  color: var(--p4y-secondary);
}
/*
 * `.simple-link.scndry-clr:hover, :focus` — the link goes accent, rule and all. The port had no
 * hover here at all, so the link was inert under the pointer. The border follows from
 * `currentcolor` above, which is the one declaration the template needs two for.
 */
.cms-data-section-cta:hover,
.cms-data-section-cta:focus {
  color: var(--p4y-accent, #9b5de5);
}

/*
 * ===== The album detail page's section title =====
 *
 * Suppressed on this tenant only. `gallery/album/:id` is authored with a hero whose headline is
 * context-bound to the album's `title`, and the `dynamic_data` block below it heads its media grid
 * with the same record title — so the album's name landed on the page twice, once in the banner and
 * again immediately under the breadcrumbs.
 *
 * This is a tenant decision rather than a fix to the block: the section title is the right heading
 * for a page laid out WITHOUT a hero, and other tenants (and other play4you album pages, should one
 * be authored that way) still want it. What makes it redundant here is the hero, which is authored
 * data — so the correction belongs to the sheet that knows how this tenant lays the page out.
 *
 * `:has(> .cms-media-grid)` is what narrows this to DETAIL mode. Both album modes emit
 * `[data-source='galleryAlbums'][data-view='grid']` on the section — the list page's card grid and
 * the detail page's media grid are indistinguishable by the section's own attributes — and only the
 * detail branch puts `MediaGrid` inside it. The child combinator matters: `.cms-media-grid` carries
 * `.cms-view` and its own `data-view`/`data-source`, so an unanchored `:has()` would be looser than
 * it looks. Matching still works through the `display: contents` above, which drops the section from
 * the box tree but not from the DOM tree selectors walk.
 */
.cms-data-section[data-source='galleryAlbums']:has(> .cms-media-grid)
  .cms-data-section-title {
  display: none;
}
/*
 * ...and with the title gone the head is usually empty, so it must not keep spending its 3.125rem
 * bottom margin on nothing. Collapsed only when nothing else is in it — an album that carries a
 * description, or a block given CTAs, keeps the row and the spacing below it.
 */
.cms-data-section[data-source='galleryAlbums']:has(> .cms-media-grid)
  > .cms-data-section-head:not(:has(.cms-data-section-subtitle, .cms-data-section-ctas)) {
  display: none;
}

/*
 * ===== Detail-page sidebar ("Активный отдых", "Последние новости") =====
 *
 * The related-records list beside a detail view — the services list on a service page and the blog
 * list on a post page. Restyled to match the live site's "Последние новости" mini-posts widget
 * (`.widget-box.v3.bg-color6` + `.mini-post-box`, verified at play4you.ee) instead of the generic
 * section-heading + MediaList look used elsewhere: a soft blue card, a purple-accented heading, and
 * compact thumbnail-left rows. The date line is the one difference between the two — a service has
 * none, a post does — so it is typeset in the blog-only follow-up block below rather than by
 * forking this one.
 *
 * Scoped to `:is([data-source='services'], [data-source='blog'])[data-view='list']` — the sidebar
 * block specifically — so the shared `DataSection`/`MediaList` styling for other datasources (and
 * other services/blog views) is untouched. `:is()` takes its specificity from its most specific
 * argument, and both are plain attribute selectors, so admitting blog shifts nothing else in the
 * cascade. Selecting through `.cms-data-section`'s own attributes rather than a `:has()` sibling
 * check works because `display: contents` only drops an element from the box tree, not the DOM tree
 * that selector matching walks.
 */
.cms-data-section:is([data-source='services'], [data-source='blog'])[data-view='list']
  > .cms-data-section-head {
  margin-bottom: 0;
  padding: 50px var(--p4y-card-gutter) 20px;
  background: var(--p4y-card);
  border-radius: var(--p4y-card-radius) var(--p4y-card-radius) 0 0;
}
/*
 * The card heading, shared by both blocks that sit in this column: the services list's section
 * title and the Dynamic Form card's own. Grouped rather than duplicated — they are stacked
 * cards in the same family, so one of them drifting is a bug rather than a possibility worth
 * leaving open.
 *
 * Bringing the form title in also settles the two small mismatches that showed once they became
 * neighbours: it was weight 700 against 800, and line-height 1.5 against 1.3. The second is what
 * the bullet actually depends on — `top: 0.45em` is measured against this line box, so a title
 * with a different one would sit the square off-centre.
 */
.cms-data-section:is([data-source='services'], [data-source='blog'])[data-view='list']
  .cms-data-section-title,
.cms-form[data-mode='modal'] .cms-form-title {
  position: relative;
  padding-left: 20px;
  font-family: Nunito, sans-serif;
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 800;
  color: #1a1a1a;
}
.cms-data-section:is([data-source='services'], [data-source='blog'])[data-view='list']
  .cms-data-section-title::before,
.cms-form[data-mode='modal'] .cms-form-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background: var(--p4y-accent);
}
.cms-view-list:is([data-source='services'], [data-source='blog']) {
  background: var(--p4y-card);
  padding: 0 var(--p4y-card-gutter) 50px;
  border-radius: 0 0 var(--p4y-card-radius) var(--p4y-card-radius);
  --cms-view-list-gap: 20px;
  --cms-view-list-row-gap: 20px;
  --cms-view-list-media: 72px;
  --cms-view-title-size: 1rem;
  --cms-view-title-weight: 700;
  --cms-view-title-color: #222222;
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media {
  border-radius: 5px;
  overflow: hidden;
}
/*
 * `.mini-post-box + .mini-post-box` on the live site: a hairline between rows, sitting on top of the
 * `--cms-view-list-row-gap` spacing already between them (its own `margin-top` matched that gap, so
 * only the border + the padding pushing content below it need restating here).
 */
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-list-item
  + .cms-view-list-item {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* The original widget's thumbnails are square (72x72); the shared view defaults to the source's own
   ratio (no `crop` prop from `MediaList`), so the square is forced here instead. */
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s linear;
}
/*
 * `.mini-post-box:hover > a` on the live site: a black scrim fades in over the thumbnail, an icon
 * grows into its centre, and the picture zooms-and-tilts. The live widget's own icon glyph is empty
 * (verified on the live page) — a gap in the original — so the plus mark from the services grid
 * card's identical hover affordance (`.cms-view-grid .cms-view-media a::after` above) is reused here
 * instead, just sized down for the 72px thumbnail rather than the grid's full card image.
 */
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media {
  position: relative;
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}
/* Only the icon should be clickable, not the whole darkened thumbnail — same rationale as the grid
   card: the title already carries this link, so the image link is muted and the mark re-enabled. */
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media a {
  display: block;
  pointer-events: none;
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-media a::after {
  content: '\f12a';
  font-family: Flaticon;
  font-size: 0.875rem;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  opacity: 0;
  pointer-events: auto;
  transition: 0.3s linear;
  transform: translate(-50%, -50%) scale(0.5);
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-list-item:hover
  .cms-view-media::before {
  opacity: 0.5;
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-list-item:hover
  .cms-view-media a::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.cms-view-list:is([data-source='services'], [data-source='blog'])
  .cms-view-list-item:hover
  .cms-view-media img {
  transform: scale(1.05) rotate(2deg);
}
@media (max-width: 576px) {
  .cms-data-section:is([data-source='services'], [data-source='blog'])[data-view='list']
    > .cms-data-section-head {
    padding: 30px 25px 20px;
  }
  .cms-view-list:is([data-source='services'], [data-source='blog']) {
    padding: 0 25px 30px;
  }
}

/*
 * The date line, which only the blog half of that card carries — `serviceToItem` maps no date, so
 * a services row has nothing in this slot and these tokens would be inert there anyway. Split out
 * rather than folded into the block above so the shared skin stays the thing both datasources
 * genuinely have in common.
 *
 * `.mini-post-info > h5 + span` on the live site: 7px under the title (the template's one explicit
 * declaration for this widget), typeset small and in the muted ink so the row reads title-first.
 */
.cms-view-list[data-source='blog'] {
  --cms-view-meta-size: 0.8125rem;
  --cms-view-meta-gap: 7px;
  --cms-view-meta-color: var(--p4y-muted);
}

/*
 * ===== Page band: image + copy + CTA (`call_to_action` beside `gallery`) =====
 *
 * The template's `.online-portal-wrap`: a slab of the brand accent laid over a photograph, with the
 * picture, the copy and the button on one centred line.
 *
 * The accent layer is keyed to the section carrying a background image, which is how the CMS
 * authors this band — `bg_image` set on the section. `isolation` is load-bearing: the layer is a
 * `z-index: -1` backdrop, and without its own stacking context it escapes and is painted over by
 * the page background, exactly as the footer slab did.
 */
.cms-section[data-has-image] {
  position: relative;
  isolation: isolate;
  padding-top: 4.375rem; /* `.pt-70` */
  padding-bottom: 4.375rem; /* `.pb-70` */
}
.cms-section[data-has-image]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--p4y-accent); /* `.thm-layer` */
  opacity: 0.9; /* `.opc9` */
  z-index: -1;
}
/* Picture, copy and button share one centred line. */
.cms-section[data-has-image] .cms-row {
  align-items: center;
}

/*
 * The copy. The theme colours these white only under a `.thm-layer` ancestor, a class the shared
 * section markup cannot carry, so the two declarations are restated against the band instead.
 */
.cms-section .cms-cta .cms-column-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: #fff;
}
.cms-section .cms-cta .cms-cta-body p {
  margin: 7px 0 0;
  font-size: 1rem;
  line-height: 1.75rem;
  color: #fff;
}
/* `.thm-btn.scndry-bg` — the dark button on the accent slab. Sits below the copy in this port,
 * where the template gives it a column of its own; the CMS authors copy and CTA as one block. */
.cms-section .cms-cta .cms-cta-button {
  background-color: var(--p4y-secondary);
  color: #fff;
}
/*
 * The wipe on this one is the accent, not the black the base button uses — a black wipe over a
 * black button being no hover at all. The theme says so in its accent group, where
 * `.thm-btn.scndry-bg:before` and `:after` sit among the 63 selectors painted `#9B5DE5`.
 */
.cms-section .cms-cta .cms-cta-button::before,
.cms-section .cms-cta .cms-cta-button::after {
  background-color: var(--p4y-accent, #9b5de5);
}

/*
 * Gallery images — the template's `.online-portal-video` frame, now worn by the image itself.
 *
 * That frame used to be a wrapper div (`brd-rd5 position-relative overflow-hidden` around an
 * `.img-fluid w-100`), and the shared block does not emit one. It does not need to: `border-radius`
 * clips an image's own content, so the rounded corners never depended on a parent's `overflow`.
 *
 * A fixed 400x400 square. `cover` fills it without distorting whatever aspect the upload happens to
 * have, and `max-width` keeps the square from overflowing a narrow column.
 */
.cms-gallery-image {
  display: block;
  width: 25rem;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--curve5, 5px);
}

/*
 * ===== Dynamic data: news cards =====
 *
 * The blog datasource renders the same `CardGrid` markup as services, but the template gives it a
 * different card: `.news-box2` — the picture with an info panel beneath it, both clipped inside one
 * 10px-radius box, the panel on the section's pale blue with a navy Saira title and the date under
 * it. Measured against the raw template: card 360 wide, image 360x260, panel padded 37/40/40/35.
 *
 * Told apart by `data-source`, which the shared `CardGrid` emits on the view root. This used to key
 * off `:has(.cms-view-meta)` — i.e. on whether the item happened to carry a date — because the
 * markup exposed no identity to select on. That was wrong in both directions: a post published
 * without a date would render as a service card, and a datasource that later gained a date would
 * silently take the news skin. Selecting on what the view IS costs the same and cannot drift.
 *
 * These override the service skin above; the hover scrim, plus mark and image zoom carry over,
 * which matches the template — it uses the same treatment on news images. Specificity is unchanged
 * from the `:has()` form ((0,4,0)), so nothing else in the cascade shifts.
 */
.cms-view[data-source='blog'] > .cms-view-card {
  padding-bottom: 0;
  text-align: start;
  border-radius: var(--curve10, 10px);
  overflow: hidden; /* the panel's corners come from the card, as `.news-box2` does it */
}
/* The picture loses its own rounding — the card clips both halves as one box. */
.cms-view[data-source='blog'] > .cms-view-card .cms-view-media {
  border-radius: 0;
}
/*
 * The panel returns to the flow beneath the picture: no plate, no wedge. A flex column because the
 * shared markup emits meta before title, and the template shows the title first.
 */
.cms-view[data-source='blog'] > .cms-view-card .cms-view-card-body {
  display: flex;
  flex-direction: column;
  position: static;
  max-width: none;
  margin: 0;
  padding: 2.3125rem 2.5rem 2.5rem 2.1875rem;
  /* White, not the template's `.bg-color6` tint: that tint is the same colour the section behind
   * these cards is authored with, so the panels dissolved into the band. */
  background-color: #fff;
  border-radius: 0;
}
.cms-view[data-source='blog']
  > .cms-view-card
  .cms-view-card-body::after {
  content: none;
}
.cms-view[data-source='blog'] > .cms-view-card .cms-view-title {
  order: 1;
  font-family: Saira, sans-serif;
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 600;
  color: #003566;
}
/* The date, which the service card has nothing to put in. `order` places it under the title. */
.cms-view[data-source='blog'] > .cms-view-card .cms-view-meta {
  order: 2;
  display: block;
  margin-top: 1.3125rem;
  font-size: 0.9375rem;
  color: #003566;
}

/*
 * The whole title plate takes the click, not just the words. The template gets this by making the
 * anchor the plate itself (`.serv-info2 > h3 a { display: block; padding: … }`); here the plate is
 * the shared `.cms-view-card-body`, so the link is stretched across it instead — same target, and
 * the shared markup stays as it is.
 *
 * Services only: a news card's title is a normal line of text in a panel that also carries its date,
 * so stretching the link over it would swallow the whole panel. Named by `data-source` rather than
 * by the absence of a date, so it stays put if a service ever gains one.
 */
.cms-view[data-source='services']
  > .cms-view-card
  .cms-view-title
  a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Service and post detail pages: the Hero banner above already carries the record's title, so the
   shared Detail view's own <h1> here is a redundant repeat — hide it rather than fork the shared
   component. Scoped to these two detail views so artist/release detail titles are unaffected. */
.cms-view-detail:is([data-source='services'], [data-source='blog'])
  .cms-view-title {
  display: none;
}

/* The hidden title (above) no longer occupies any box, but the cover image still carries the
   shared `--cms-view-detail-media-gap-top` (30px, views.css) meant to separate it FROM that title
   — with nothing above it now, that gap just reads as dead space under the breadcrumbs. */
.cms-view-detail:is([data-source='services'], [data-source='blog'])
  .cms-view-detail-media {
  margin-top: 0;
}

/*
 * Post detail only: the header — the "Blog" back-link and the date — moves BELOW the cover, where
 * the template puts a post's byline. With the title hidden it would otherwise be the one thing
 * left above the picture, a stray line where the heading used to be.
 *
 * A flex column plus `order`, the same device the blog card above uses to lift its title over its
 * date: the shared `Detail` owns the DOM order (head → title → media → body) and this only
 * restyles it, so nothing here depends on the component keeping a shape it never promised. The
 * cover stays at the implicit `order: 0`; the hidden title is out of the box tree entirely.
 *
 * Services need none of this — `serviceToItem` maps no date and the block passes no eyebrow, so
 * that detail view renders no header at all.
 */
.cms-view-detail[data-source='blog'] {
  display: flex;
  flex-direction: column;
  /* `.post-feat-img`'s own `margin-bottom` on the live post, in place of the shared 24px. */
  --cms-view-detail-media-gap: 27.2px;
  --cms-view-meta-size: 0.8125rem;
  /* The pill's height is measured from this: `normal` gives the 17.5px line box that, with the
     padding below, adds up to the live pill's 34.5px. The shared default (1.5) would inflate it. */
  --cms-view-meta-line: normal;
}
/*
 * `ul.meta3` on the live post: the row sits 27.2px under the picture, and the copy starts 32px
 * below it. That 32px is the first paragraph's own `margin-top` there, collapsed against the row's
 * smaller `margin-bottom`; here the head is a flex item, which collapses no margins at all, so the
 * 16px left over after the paragraph's contribution is what this declares.
 */
.cms-view-detail[data-source='blog'] .cms-view-detail-head {
  order: 1;
  margin-bottom: 1rem;
}
/*
 * The date itself: `.post-detail-date.rounded-pill.scndry-bg` — a dark pill in the tenant's
 * secondary, read off the live page (`#1a1a1a`, which is exactly `--p4y-secondary`). Nunito 700 at
 * 13px, white, on the template's `.rounded-pill` radius; the size and line box come from the meta
 * tokens above so the slot stays the thing that types itself.
 */
.cms-view-detail[data-source='blog'] .cms-view-detail-time {
  padding: 9px 20px 8px;
  font-family: Nunito, sans-serif;
  font-weight: 700;
  color: #fff;
  background: var(--p4y-secondary);
  border-radius: 800px;
}
.cms-view-detail[data-source='blog'] .cms-view-detail-body {
  order: 2;
}
/*
 * The back-link is hidden, leaving the date alone in that row. The breadcrumbs directly above the
 * article already lead back to the index as "БЛОГ" — in the site's own language, where this one
 * was the page's only untranslated string.
 *
 * Hidden here rather than dropped at the source: the eyebrow is `DETAIL_BACKLINKS` in the shared
 * `blocks/DynamicData`, which every tenant's blog detail goes through, so removing it there would
 * be this tenant's preference imposed on all of them.
 */
.cms-view-detail[data-source='blog'] .cms-view-detail-eyebrow {
  display: none;
}

/* The detail view's meta row is a `<header>` too, and stays visible below 1031px for the same
   reason — see play4you.important.css. */

/*
 * ===== Logo (`blocks/Logo`) =====
 *
 * Was the template's `.logo.v2.z1.scndry-bg > .logo-mark`, so the whole badge arrived from the
 * scoped stylesheet. Transcribed here onto the shared component's classes, read off the live
 * cascade rather than the sheet — several of these are template rules this file already overrode,
 * and only the winning values are kept.
 *
 * The badge is the dark box that hangs out of the header's top-left, with the angled tail drawn by
 * the two pseudo-elements: `::before` continues the dark box into a triangle, `::after` is the
 * accent sliver rotated under it. Below 1031px the header becomes the mobile bar and the whole
 * badge treatment is dropped — that is also the width the component swaps the mark at, and the two
 * have to agree.
 */
.cms-logo {
  position: absolute;
  z-index: 1;
  text-align: center;
  background-color: var(--p4y-secondary);
  /* The template pulls the badge left by a fixed 16.5625rem; under the CMS the gutter is a real
     grid track, so it only needs to clear the container's own padding. */
  margin-top: -2.0625rem;
  margin-bottom: -0.9375rem;
  margin-left: calc(-1 * var(--cms-container-pad));
}
.cms-logo::before,
.cms-logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.cms-logo::before {
  background-color: inherit;
  height: 2.1875rem;
  right: -0.5px;
  bottom: -2.15rem;
}
.cms-logo::after {
  background-color: var(--p4y-accent);
  height: 12px;
  left: -5px;
  right: -1px;
  bottom: -1.6875rem;
  transform: rotate(11deg);
}
.cms-logo-mark {
  margin: 0;
  /* The template wraps the mark in an <h1> and this line-box is what gave the badge its height;
     the block renders a plain div, because the page's h1 belongs to the content, not the chrome. */
  font-size: 3.4375rem;
  line-height: 1.2;
}
.cms-logo-link {
  display: block;
  padding: 1.55rem 1.5rem;
}
.cms-logo-image {
  width: 125px;
  max-width: 100%;
  height: auto;
}

/* Below the theme's own breakpoint the badge collapses to a plain mark in the mobile bar. */
@media (max-width: 1031px) {
  .cms-logo {
    position: static;
    width: max-content;
    margin: 0;
    padding: 0;
    background: none;
  }
  .cms-logo::before,
  .cms-logo::after {
    display: none;
  }
  .cms-logo-mark {
    font-size: 0;
    line-height: 0;
  }
  .cms-logo-link {
    padding: 0;
  }
}

/*
 * ===== Socials (`blocks/Socials`) =====
 *
 * Was the template's `.social-links` strip in the header and `.social-links3` row in the footer —
 * two markup trees the block chose between by whether `socials_title` happened to be set. What
 * actually differs is placement, so the shared block emits one tree and the two skins are selected
 * by ancestor here, which is what the old block's own docstring said the right answer was.
 *
 * Glyphs stay this theme's Font Awesome 5 Brands, drawn from `data-social`; the block's inline SVG
 * is hidden underneath. Codepoints lifted from the scoped template sheet.
 */
.cms-socials-link svg {
  display: none;
}
.cms-socials-link::before {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  font-style: normal;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
}
.cms-socials-link[data-social='facebook']::before {
  content: '\f39e';
}
.cms-socials-link[data-social='telegram']::before {
  content: '\f3fe';
}
.cms-socials-link[data-social='instagram']::before {
  content: '\f16d';
}
.cms-socials-link[data-social='youtube']::before {
  content: '\f167';
}

/* Header strip: bare glyphs on the dark topbar, inverting to the secondary ink once the header
   becomes the light mobile bar. */
header .cms-socials,
header .cms-socials-list {
  display: inline-flex;
  align-items: center;
}
/* The template spaced these with `a + a { margin-left: 1.7rem }`; the shared list uses a gap. */
header .cms-socials-list {
  --cms-socials-gap: 1.7rem;
}
/*
 * The label. `.cms-socials-title` is `display: block` by default (blocks.css) so a theme that never
 * places it beside the icons still gets a legible stack; the header makes `.cms-socials` itself
 * `inline-flex` above, and a flex container lays out its children in a row regardless of each
 * child's own `display` — so the title already sits inline before anything here runs.
 *
 * What it did not have was a colour or the gap the template gives it. Unset, it fell back to the
 * tenant's ambient text colour (`--p4y-text`, near-black) — legible on the white nav bar, but this
 * strip is `--p4y-secondary` (`rgb(26, 26, 26)`, via the `::before` backdrop above), so dark-on-dark
 * put the label a hair from invisible while the icon right beside it, which DOES carry an explicit
 * white below, read fine. Margin restates `.topbar-right > div + a { margin-left: 2.1875rem }` —
 * the template's own spacing between a topbar label and the control after it — since the shared
 * block's title and list sat flush with no gap of their own.
 */
header .cms-socials-title {
  margin-right: 2.1875rem;
  color: #ffffff;
}
header .cms-socials-link {
  color: #ffffff;
  font-size: 1rem;
  /* The old strip's anchors were block-level and took the theme's 1.5 line box; the shared link is
     an inline-flex with `line-height: 1`, so the box height is restated. */
  line-height: 1.5;
}
@media (max-width: 1031px) {
  header .cms-socials-title,
  header .cms-socials-link {
    color: var(--p4y-secondary);
  }
}

/* Footer row: a label beside 3rem tiles on their own translucent plates, flush against each other. */
footer .cms-socials {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  vertical-align: middle;
}
footer .cms-socials-list {
  /* `a + a { margin-left: 5px }` in the template — the tiles sit almost flush. */
  --cms-socials-gap: 5px;
}
footer .cms-socials-link {
  display: block;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}
footer .cms-socials-title {
  margin: 0 1.5625rem 0 0;
  font-size: 1rem;
  font-weight: 500;
  /* Was an `<h3>`, whose 1.2 line box the `<p>` does not inherit. */
  line-height: 1.2;
  color: #ffffff;
}
@media (max-width: 770px) {
  footer .cms-socials-link {
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
  }
}
/* Below these the label takes its own line above the tiles. */
@media (min-width: 576px) and (max-width: 731px) {
  footer .cms-socials-title {
    width: 100%;
    margin: 0 0 10px;
  }
}
@media (max-width: 490px) {
  footer .cms-socials-title {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 0 1.25rem;
  }
}


/*
 * ===== Restated from the scoped template sheet =====
 *
 * The header and footer used to wear `.style2`, `.style3`, `.dark-layer2` and `.pt-70`, and the
 * template sheet styled them through those. The shared `header`/`footer` blocks emit `.cms-header`
 * and `.cms-footer-body` instead, so every template rule that reached this markup by way of those
 * classes is restated here against the new ones.
 *
 * This is a transcription, not a redesign: each rule below is the template's own declaration with
 * the class token swapped. Some of them target markup the port no longer renders and are dead
 * today; they are carried anyway rather than guessed at, and can be dropped once someone measures
 * which still match.
 */

/* --- The footer slab (was `.pt-70` + `.dark-layer2`) --- */
.cms-footer-body {
  padding-top: 4.375rem; /* `.pt-70` */
}
.cms-footer-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #1a1a1a; /* `.dark-layer2::before`, via `--color7` */
}

/* --- Contents of the slab, which took their ink from `.dark-layer2` / `.style3` --- */
.cms-footer-body .widget-title,
.cms-footer-body .cms-column-title,
.cms-footer-body .widget-box > h3,
.cms-footer-body .widget-box > p,
.cms-footer-body .bottom-bar p {
  color: #ffffff;
}
.cms-footer-body .widget-box ul > li {
  color: #d7d7d7;
}
.cms-footer-body .footer-data {
  margin-bottom: 0;
}
.cms-footer-body .top-links > li a:hover {
  color: #1a1a1a;
}
@media (max-width: 1031px) {
  .cms-footer-body .widget-box ul.contact-info-list li span {
    max-width: 5rem;
  }
}

/* --- The header's menu, which took its type and spacing from `header.style2` --- */
header.cms-header .cms-nav-list .cms-nav-item {
  color: var(--color3);
  font-family: Nunito;
  line-height: 5.3125rem;
}
header.cms-header .cms-nav-list .cms-nav-link {
  padding: 0;
}
header.cms-header .cms-nav-list .cms-nav-item:not(:first-child) {
  margin-left: 2.1875rem;
}
header.cms-header .cms-nav-list .cms-nav-item:not(:first-child)::before {
  display: none;
}
@media (max-width: 1370px) {
  header.cms-header .cms-nav-list .cms-nav-item:not(:first-child) {
    margin-left: 2rem;
  }
}
@media (max-width: 1290px) {
  header.cms-header .cms-nav-list .cms-nav-item:not(:first-child) {
    margin-left: 1.8rem;
  }
}
@media (min-width: 1031px) and (max-width: 1075px) {
  header.cms-header .cms-nav-list .cms-nav-item:not(:first-child) {
    margin-left: 1.3rem;
  }
}


/*
 * ===== Contact column (was `.widget-box.widget` + `.widget-title2` + `.contact-info-list`) =====
 *
 * The shared `contact_info` block emits `.cms-contact`, `.cms-column-title`, `.cms-contact-list`,
 * `.cms-contact-item` and `.cms-contact-label`, so the template's contribution is restated against
 * those. Every value below was measured off the column before the swap rather than read out of the
 * sheet, because two of them do not come from where the selectors suggest: the row's size is
 * `footer .widget li { font-size: 0.9rem }` beating the more specific
 * `.widget-box ul.contact-info-list li { font-size: 1rem }`, and the row's ink came through
 * `.widget-box`. Both classes are gone from the markup now, so both are restated here.
 *
 * The heading's leading icon is not carried over. It was an `<i class="flaticon-pharmacy">`, and
 * measured in place it renders *nothing*: its `::before` resolves to an empty string because the
 * element computes `font-family: Roboto`, not Flaticon. It occupied an empty 22px box inside the
 * 2.1875rem indent the heading already reserves, so dropping the element changes no pixels.
 */
.cms-contact {
  margin: 0 0 60px;
}
/*
 * Below 1031px this column is stacked, one per `.cms-row`, rather than sitting beside its siblings
 * in one row — the CMS gives the footer its own mobile arrangement, same mechanism as any other
 * container (renderNode's `.cms-mobile-only`). The 60px above is sized for the desktop case, where
 * it is mostly invisible: the columns sit side by side, so only the tallest one's tail actually
 * shows, as the gap before the bottom bar. Stacked, EVERY column's tail is now a gap in the reading
 * flow, and 60px between every pair reads as too much air — the annotated screenshot this was
 * reported against showed exactly that, between the brand paragraph and "Полезные ссылки".
 */
@media (max-width: 1031px) {
  .cms-contact {
    margin-bottom: 2.5rem;
  }
}
/*
 * The accent bar is dcn's, in play4you's purple: `border-width: 0 3px` flanking the heading, losing
 * the right-hand bar at 768px so it reads as a single rule down the left of a wide column. Same
 * geometry on both tenants, each in its own colour, so the two footers are recognisably one system.
 *
 * It also replaces the 2.1875rem the heading used to hold open for an icon that rendered nothing —
 * the indent is now the bar's, and the space is doing something.
 */
.cms-column-title {
  display: inline-block;
  padding: 0 15px;
  border: solid #9b5de5;
  border-width: 0 3px;
  font-size: 1.625rem;
  font-weight: 700;
  margin-bottom: 1.875rem;
}
@media (min-width: 768px) {
  .cms-column-title {
    display: block;
    padding-right: 0;
    border-right-width: 0;
  }
}
footer .cms-column-title {
  margin-bottom: 1.2rem;
  font-weight: 600;
  font-family: 'Roboto';
}
.cms-footer-body .cms-column-title {
  color: #ffffff;
}
.cms-contact-item {
  font-size: 0.9rem;
  font-weight: 500;
}
.cms-footer-body .cms-contact-item {
  color: #d7d7d7;
}
.cms-contact-item:not(:first-child) {
  margin-top: 0.75rem;
}
.cms-contact-label {
  display: inline-block;
  max-width: 6.875rem;
  width: 100%;
}
@media (max-width: 1031px) {
  .cms-footer-body .cms-contact-label {
    max-width: 5rem;
  }
}
.cms-col[data-align='center'] .cms-column-title,
.cms-col[data-align='end'] .cms-column-title {
  display: inline-block;
}

/*
 * ===== Contacts page: the contact-info BAND (was `.contact-info` + `.contact-info-box`) =====
 *
 * The same `contact_info` block as the footer column above and the about band below, in its third
 * shape: the template's `contact_info` Elementor widget, which is what the original contacts page
 * opens with. A centred section heading, then the kinds laid ACROSS the band as tiles — a rounded
 * white icon square over the value — with a dashed connector between each pair.
 *
 * WHICH BAND THIS IS. The block has no variant field, so the three shapes are told apart by where
 * they sit: the footer column is `.cms-footer-body`, the about band's rows are the block sharing a
 * section with the copy (`:has(.cms-richtext)`, the scope the rules further down use), and this one
 * is the block standing alone as the band. Hence `:has(.cms-contact):not(:has(.cms-richtext))` —
 * the exact complement of the about band's scope, so a page can never match both. It is on the
 * SECTION rather than the row because a container renders a separate row set per breakpoint, the
 * same reason the about band gives.
 *
 * Every value below was measured off the running original rather than read out of the theme sheet,
 * because Elementor's own widget CSS overrides it in two places that matter: the heading is
 * Roboto 36/700 (`.sec-title3-inner > h3` says Montserrat 800), and the value lines are Saira 17/400
 * in #555 (`.contact-info-box > span` says Nunito 18/600).
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) {
  /* `.contact-info.pt-100.pb-30`, plus the 30px tail every tile carries — 60px in total. The band
     replaces the section's own 2.5rem/6.25rem rhythm: it opens the page under the banner, where the
     template gives it a full 100px, and closes 60px above the form band. */
  padding-top: 6.25rem;
  padding-bottom: 3.75rem;
}
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact {
  /* The footer column's 60px tail is the band's padding here. */
  margin: 0;
  text-align: center;
}

/*
 * The heading, as `.sec-title3` rather than the footer's `.widget-title2`: centred, uppercase, and
 * without the accent bar the column heading wears. The bar is the FOOTER's idiom — three columns
 * side by side, each needing its own left edge — and a single centred band heading with a purple
 * rule hanging off one side of it reads as a fragment of that layout rather than as a title.
 *
 * `margin-top: -8px` is the template's own optical correction on `.sec-title3`, kept because the
 * 100px above is measured with it in place.
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-column-title {
  display: block;
  margin: -8px 0 3.125rem;
  padding: 0;
  border: 0;
  font-family: Roboto, sans-serif;
  font-size: 2.25rem; /* 36px */
  line-height: 1.2; /* 43.2px, the theme's global heading ratio */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--p4y-text);
}

/*
 * The tiles. `col-md-4 col-sm-6 col-lg-4` in the template — one up, two from 576px, three from
 * 768px — and `.row.mrg30`'s 30px gutter, which the connectors below are positioned against.
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.875rem;
}
@media (min-width: 576px) {
  .cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * One tile: the icon box on its own line, the value under it. A column flex box rather than plain
 * centred inline content, because the icon is a generated box that has to sit ABOVE the value and
 * stay 84px wide however long the value wraps — the address runs to two lines at every width the
 * band is three across.
 *
 * `position: relative` is the connector's anchor; `margin: 0` drops the 0.75rem the footer rows put
 * between themselves, which the grid gap now owns.
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 1.25rem; /* `.contact-info-box` */
  font-family: Saira, sans-serif;
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.5rem; /* 24px */
  /* The template's #555 — this sheet's muted token to within a hair, and already the ink every
     other secondary line on the tenant is set in. */
  color: var(--p4y-muted);
}
/*
 * THE LABEL IS HIDDEN, NOT DROPPED — the same reading the about band's rows take. A tile shows the
 * glyph and the value and nothing else, but "Email:" / "Tel." is what tells a screen reader which
 * value is which, and an icon font's glyph tells it nothing. Clipping keeps both: the eye gets the
 * icon, assistive tech keeps the word. Out of flow, so it is not a line of the tile's column either.
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* A kind can carry more than one line (the original lists two phone numbers); the block renders one
   value per row, so this only matters the day a second is authored — 4px apart, as the template. */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-value {
  display: block;
}
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) a.cms-contact-value:hover,
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) a.cms-contact-value:focus {
  color: var(--p4y-accent);
}

/*
 * THE GLYPH IS CHOSEN BY THE KIND — `data-contact`, which the block lower-cases from the authored
 * type — and matched on a substring so an editor's exact wording is not load-bearing: "Email",
 * "E-mail", "Telephone", "Phone" and "Address" all land on the right glyph. Same mechanism the
 * about band uses, but Font Awesome rather than Flaticon: these three are the widget's own icons
 * (`fas fa-envelope` / `fa-home` / `fa-phone-alt`), and the family ships with the ported template's
 * `@font-face` rules. The solid face is weight 900 — at 400 the box renders empty.
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item[data-contact*='mail'] {
  --p4y-contact-icon: '\f0e0';
}
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item[data-contact*='addr'] {
  --p4y-contact-icon: '\f015';
}
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item[data-contact*='tel'],
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item[data-contact*='phone'] {
  --p4y-contact-icon: '\f879';
}
/*
 * Generated ONLY for a kind that mapped a glyph above: with the property unset, `var()` is invalid
 * at computed-value time and `content` falls back to its initial `normal` — which is no
 * pseudo-element at all, rather than an empty 84px box holding space for a missing icon. The tile
 * then degrades to a centred value line, which is the right answer for a kind this sheet has never
 * seen. (Same guard as the about band's rows; see that block's note.)
 */
.cms-section:has(.cms-contact):not(:has(.cms-richtext)) .cms-contact-item::before {
  content: var(--p4y-contact-icon);
  display: block;
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: 1.375rem; /* `.contact-info-box > i + span` */
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(193, 193, 193, 0.2);
  font-family: 'Font Awesome 5 Free';
  font-size: 2.25rem; /* 36px */
  font-weight: 900;
  line-height: 5.25rem;
  text-align: center;
  color: var(--p4y-secondary);
}

/*
 * THE CONNECTOR — a dashed rule with a dot near its top, in the gutter before every tile but the
 * first. Three decorations (icon box, rule, dot) and only two pseudo-elements, so the rule and the
 * dot are two background LAYERS of one `::after` rather than the template's `:before` + `:after`
 * pair: a 1px repeating gradient down the centre, and a 16px circle over it, 2px proud of the
 * rule's top edge — which is exactly the offset the template's two absolute boxes work out to
 * (`margin-top: -50px` against `-52px`).
 *
 * `left: -1.4375rem` puts the 16px box centred in the 30px gap: half the gap (15px) plus half the
 * box (8px). The template arrives at the same number through Bootstrap's gutters.
 *
 * THREE ACROSS ONLY. A connector between tiles that are two across points at the tile ABOVE as
 * often as the one beside it, and stacked it points at nothing, so it is scoped to the width where
 * the row is the one the template drew. (The original leaves it on at every width; that is the
 * template's bug, not its intent.)
 *
 * The colour is the tenant's accent, not the template's `#044552` — the arrow theme's leftover
 * teal, replaced by the accent everywhere else in this sheet, the about band's glyphs and the map
 * pin included.
 */
@media (min-width: 768px) {
  .cms-section:has(.cms-contact):not(:has(.cms-richtext))
    .cms-contact-item:not(:first-child)::after {
    content: '';
    position: absolute;
    left: -1.4375rem;
    width: 1rem;
    /*
     * THE BOX IS THE DOT'S, NOT THE RULE'S — 102px starting 52px above the tile's middle, so the
     * rule still spans the template's 50%±50px while the 2px the dot stands proud of its top edge
     * has box to live in. Sized and placed to the rule, it did not: a background layer is clipped to
     * its element, so the circle came out with a flat top. This is also why the box is not centred
     * with a transform any more — the two layers are no longer symmetric about the middle.
     */
    top: calc(50% - 3.25rem);
    height: 6.375rem;
    /* The dot's stops are 7.5px/8px rather than one hard edge at the radius: two stops at the same
       position leave the circle to the rasteriser unantialiased, and a 16px one comes out visibly
       lumpy. The half-pixel feather is the whole difference. */
    background-image:
      radial-gradient(circle at 50% 50%, var(--p4y-accent) 7.5px, transparent 8px),
      repeating-linear-gradient(to bottom, var(--p4y-accent) 0 3px, transparent 3px 6px);
    background-size:
      1rem 1rem,
      1px 6.25rem;
    background-position:
      50% 0,
      50% 0.125rem;
    background-repeat: no-repeat;
  }
}


/*
 * ===== Nav: what the template gave the menu through markup that no longer exists =====
 *
 * The bar's look arrived via `nav > div > ul > li` and the drawer's via `.rsnp-mnu` / `.rspn-mnu-*`.
 * The shared block emits `.cms-nav*`, so every rule of theirs that still has something to style is
 * restated here. The chain mattered: `nav > div > ul > li` is where the items got their 5.3125rem
 * line-box, and with it the header's 85px bar and 135px total height.
 *
 * All of it was measured off the running page before the swap — the values below are what the
 * template actually computed, not what its stylesheet appears to say.
 */

/*
 * The scoped raw template stylesheet (`style.scoped.css`) still carries its own dropdown mechanics
 * for the OLD markup, keyed structurally on "a `ul` nested in a `ul` inside a `nav`" rather than on
 * a class — `nav ul ul { opacity: 0; visibility: hidden; transform: scaleY(0); position: absolute;
 * top: 100%; left: 0; width: 14.625rem; background: #fff; … }`, meant to be revealed by a sibling
 * `:hover` rule. The new block's drawer copy is a real `<nav>` wrapping a real nested `<ul>`
 * (`.cms-nav-drawer > .cms-nav-drawer-list > li > .cms-nav-submenu`), so that old rule still
 * structurally matches it: the panel stayed invisible no matter what `display`/`[data-submenu-open]`
 * said, and — once the visibility/opacity/transform above are undone — floats as an absolutely
 * positioned white panel instead of the inline accordion row the drawer wants. Restated here rather
 * than edited in the scoped file, which is a straight port and not meant to be hand-edited.
 */
.cms-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* The bar copy legitimately wants that same legacy rule's `position: absolute` panel (see
   blocks.css and the dropdown restyle above) — only the drawer copy needs it undone, back to the
   inline flow `.cms-nav-drawer-list .cms-nav-submenu`'s own `padding-left: 1em` accordion. */
.cms-nav-drawer-list .cms-nav-submenu {
  position: static;
  width: auto;
  background-color: transparent;
  box-shadow: none;
  z-index: auto;
}
/*
 * An accordion slide, in place of blocks.css's hard `display: none` / `block` swap — same reasoning
 * as the bar dropdown's fade above, but a slide-down (`max-height`) reads as the natural motion for
 * a row pushing the rows below it down, rather than a popover fading in over them. The `30rem` cap
 * is just "comfortably more than any real submenu" — the eased transition still lands on the
 * content's own height when it's shorter, it only over-budgets the timing function's tail.
 */
.cms-nav-drawer-list .cms-nav-submenu {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.cms-nav-drawer-list .cms-nav-item--has-submenu[data-submenu-open] .cms-nav-submenu {
  max-height: 30rem;
  opacity: 1;
}

/* --- The bar (was `nav > div > ul > li`) --- */
header.cms-header .cms-nav-list .cms-nav-item {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
}
/* The bar link's own type. It came from the template's `nav > div > ul > li > a`, so it is the
   link's and not the item's — the item is Nunito 700, the link Montserrat 600, and without this
   restated the link would simply inherit the item and change typeface. */
header.cms-header .cms-nav-list .cms-nav-link {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* --- The hamburger (was `.rspn-mnu-btn`) --- */
.cms-nav-toggle {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color1);
  color: #ffffff;
  text-align: center;
}
.cms-nav-toggle:hover,
.cms-nav-toggle:focus {
  background-color: #9b5de5;
}

/* --- The drawer (was `.rsnp-mnu`) ---
 *
 * The template's own panel is 21.875rem wide and pinned to the right, going full-width under 430px.
 * Both the width and the edge stay authored: the edge is `nav_collapsed_aligment`, handled by the
 * shared sheet, so what is left here is the panel's substance. `top`/`bottom` are the shared rule's.
 */
.cms-nav-drawer {
  width: 100%;
  max-width: 21.875rem;
  padding: 5.3125rem 2.5rem 3.125rem;
  background-color: #0c0c0c;
  text-align: left;
  z-index: 99999;
}
@media (max-width: 430px) {
  .cms-nav-drawer {
    max-width: 100%;
  }
}

/* The template has no scrim behind its panel. Keeping the overlay transparent leaves the look
   untouched while still giving the drawer a click-outside target, which it never had. */
.cms-nav-overlay {
  background: transparent;
  z-index: 99998;
}

.cms-nav-drawer-list {
  width: 100%;
  overflow-y: auto;
}
.cms-nav-drawer .cms-nav-item {
  width: 100%;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.cms-nav-drawer .cms-nav-item:not(:first-child) {
  margin-top: 1.25rem;
}
.cms-nav-drawer .cms-nav-item:hover > .cms-nav-link,
.cms-nav-drawer .cms-nav-item[data-active] > .cms-nav-link,
.cms-nav-drawer .cms-nav-link:focus {
  color: #9b5de5;
}

/* A parent row's caret, drawer copy only: push it to the row's right edge instead of hugging the
   title, so every parent's caret lines up in one column regardless of title length. The row is
   already full width (`.cms-nav-item` above); `space-between` just spends that width between the
   title and the caret instead of leaving it unused after a content-sized toggle. A toggle-only row
   (no url — see blocks.css's SUBMENUS comment) is its row's *only* child, so it needs its own
   `flex: 1` first before `space-between` has anything to spend on. */
.cms-nav-drawer-list .cms-nav-item-row {
  justify-content: space-between;
}
.cms-nav-drawer-list .cms-nav-submenu-toggle:only-child {
  flex: 1;
  justify-content: space-between;
}
/* Flush against the drawer's edge, the caret's rotated paint (see blocks.css: a 0.4em box turned
   45deg) bleeds ~0.08em past its own layout box — invisible with room to spare elsewhere, but the
   drawer's `overflow-y: auto` forces `overflow-x` to `auto` too (the CSS rule for a lone axis), so
   here that overspill was getting clipped. A little breathing room from the edge fixes it. */
.cms-nav-drawer-list .cms-nav-submenu-caret {
  margin-right: 0.15em;
}

/* A submenu row nested inside the drawer accordion (was `.rsnp-mnu > ul ul > li`): the template
   drops these a size, un-bolds and un-capitalises them, so a child row reads as subordinate to
   its parent instead of repeating the same heavy uppercase treatment. Ink stays the drawer's own
   white — the template's dimmed grey read too low-contrast against the dark panel. */
.cms-nav-drawer-list .cms-nav-submenu .cms-nav-item {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 300;
  text-transform: none;
  /* The drawer's own top-level rows (`.cms-nav-drawer .cms-nav-item:not(:first-child)`) carry a
     1.25rem margin-top meant for THAT vertical rhythm — its descendant selector reaches these
     nested rows too, stacking with their own link padding into a gap much bigger than an accordion
     sub-row wants. Zero it and let the link's padding alone (below) set the rhythm. */
  margin-top: 0;
}
/* The scoped template stylesheet also draws a row divider between submenu rows (`nav ul ul li +
   li { border-top: 1px solid #ececec }`, leaked the same structural way as everything else in this
   section) — wanted for the bar dropdown (see the restyle above), not for the drawer's own accordion
   rows. */
.cms-nav-drawer-list .cms-nav-submenu .cms-nav-item + .cms-nav-item {
  border-top: 0;
}
/* The scoped template stylesheet also colours and bolds the anchor directly (`nav ul ul li a {
   color: #1b1b1b; font-weight: 600; font-family: Montserrat }`, structurally leaked the same way
   as the visibility rule above) — a direct match on the element beats the item's own inherited
   white/400 regardless of specificity, so both have to be undone on the link itself too. */
.cms-nav-drawer-list .cms-nav-submenu .cms-nav-link {
  color: #ffffff;
  font-weight: 300;
}

/* --- The close button (was `.rspn-mnu-cls`) --- */
.cms-nav-close {
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  background-color: #303030;
  color: #ffffff;
  text-align: center;
}
.cms-nav-close:hover,
.cms-nav-close:focus {
  background-color: #9b5de5;
}


/* --- The footer's menu columns (was `.widget-box.widget_nav_menu ul.menu`) ---
 *
 * A footer `nav_bar` is a `column`, and the template dressed that shape through the widget markup
 * the shared block no longer emits: the row spacing, the indent, and the small arrow before each
 * link. Its ink came from `.dark-layer2 .widget-box ul > li`, so without this restated the links
 * fall back to near-black on a near-black slab — the same trap dcn's contact column fell into.
 *
 * The arrow is the one Flaticon glyph in this theme that does render, because this rule names the
 * family itself. The footer heading's icon relied on `[class^="flaticon-"]` supplying it, which
 * never applied — which is why that one was dropped and this one is kept.
 */
/* Every footer column was a `.widget-box`, which carried this gap; the contact column already
   restates it, and a menu column is the same kind of column. */
.cms-footer-body .cms-nav[data-shape='column'] {
  margin: 0 0 60px;
}
/* Same mobile reduction as `.cms-contact` above, for the same reason — see its comment. */
@media (max-width: 1031px) {
  .cms-footer-body .cms-nav[data-shape='column'] {
    margin-bottom: 2.5rem;
  }
}
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -7px;
}
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-item {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 7px;
  font-size: 1rem;
  color: #d7d7d7;
}
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-link {
  position: relative;
  display: block;
  padding-left: 1.875rem;
}
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-link::before {
  content: '\f116';
  font-family: Flaticon;
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  font-size: 13px;
  color: #b9b9b9;
}
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-link:hover::before,
.cms-footer-body .cms-nav[data-shape='column'] .cms-nav-link:focus::before {
  color: inherit;
}


/*
 * ===== Call to action: what the template gave it through markup that is gone =====
 *
 * The block used to pick its own markup — `.online-portal-desc` for a page band, `.widget-box.v2`
 * for a footer column — on whether it had buttons. dcn settles that that never generalised (its
 * footer column has buttons too), so the shared block emits one tree and the placement is read
 * here, where it is actually knowable: `.cms-section` is a band, `.cms-footer-body` is a column.
 *
 * The button's whole look came from `.thm-btn`, which the markup no longer carries, so it is
 * restated on `.cms-cta-button` — including the hover wipe, a pair of pseudo-elements that grow
 * from the button's edges and the reason it needs `position` and `overflow` at all.
 *
 * Those three box properties are not in `.thm-btn`, or in any other rule the theme ships: the
 * template puts them in the markup, as `d-inline-block position-relative overflow-hidden` beside
 * `thm-btn`. Restating the class alone therefore leaves the button `static`, and an absolute
 * pseudo-element in a `static` parent resolves against whatever ancestor happens to be positioned
 * — here a section-sized box, so hovering painted a slab across the whole band instead of a wipe
 * inside the button.
 */
.cms-cta-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1.09375rem 1.8125rem;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: initial;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
  border-radius: 5px;
  z-index: 1;
}
.cms-cta-button::before,
.cms-cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  opacity: 0;
  background-color: #000000;
  z-index: -1;
}
.cms-cta-button::before {
  left: 0;
}
.cms-cta-button::after {
  right: 0;
}
.cms-cta-button:hover::before,
.cms-cta-button:hover::after,
.cms-cta-button:focus::before,
.cms-cta-button:focus::after {
  opacity: 1;
  width: 100%;
}
/* `.thm-btn:hover, .thm-btn:focus` — the label goes white as the wipe closes over it. */
.cms-cta-button:hover,
.cms-cta-button:focus {
  color: #fff;
}

/* The band's own box, and its CTA sitting a clear gap below the copy. */
.cms-section .cms-cta {
  padding: 0 40px;
}

/* Same `.widget-box` gap the contact and menu columns restate. */
.cms-footer-body .cms-cta {
  margin: 0 0 60px;
}
/* Same mobile reduction as `.cms-contact` above, for the same reason — see its comment. */
@media (max-width: 1031px) {
  .cms-footer-body .cms-cta {
    margin-bottom: 2.5rem;
  }
}
.cms-section .cms-cta .cms-cta-actions {
  margin-top: 1.875rem;
}

/*
 * A band heading is not a column heading. It carries `.cms-column-title` because that is the one
 * heading class a shared block emits, so the accent bar the footer columns wear is cancelled here
 * rather than the class being avoided — the alternative is a second heading class that means
 * "the same heading, somewhere else", which is how the two tenants ended up with four of them.
 */
.cms-section .cms-cta .cms-column-title {
  padding: 0;
  border: 0;
}

/*
 * ===== Page title band (a `hero` that is a title and nothing else) =====
 *
 * The template's page-title strip: `w-100 pt-80 black-layer opc7 pb-80` over a `.fixed-bg`
 * photograph, with `.page-title-inner > h1` centred on it. The CMS authors it as a `hero`, and as
 * data that is exactly what it is — one slide, a background image, a title, nothing to navigate to.
 *
 * IDENTITY. `:not([data-carousel])` alone is not enough: a single-slide *feature* banner is also
 * not a carousel, and it would take the short band with it. So the caption's contents settle it —
 * a page title is a hero whose copy is a heading and NOTHING else, no subtitle and no CTAs, which
 * is the design rule said out loud rather than inferred from a slide count. The home banner has
 * both, so the two never collide.
 *
 * What this undoes is the feature banner's geometry: the fixed 43.4375rem image box and the
 * absolutely-placed caption. Here the caption is the box — its padding is the band's height, the
 * way `pt-80`/`pb-80` are the template's — and the image drops behind it as a backdrop.
 */
.cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
  .cms-hero-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  max-height: none;
}
/*
 * Back into normal flow, and back to the page gutter. Every offset here cancels one the feature
 * banner sets — including the two the 1075/1076 breakpoints restate, which is why `top` and
 * `bottom` are named as well as `left`.
 */
.cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
  .cms-hero-caption {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0 auto;
  padding: 5rem 0.9375rem; /* `.pt-80` / `.pb-80`, plus the container's gutter */
  transform: none;
  justify-content: center;
  text-align: center;
}
.cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
  .cms-hero-copy {
  max-width: 100%;
}
/*
 * `.page-title-inner > h1`. Nunito rather than the banner's Saira: that family is a per-widget
 * Elementor override on the home banner alone (see the note on `.cms-hero-title` above), and this
 * strip is the theme's own heading type.
 */
.cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
  .cms-hero-title {
  font-family: Nunito, sans-serif;
  font-size: 2.5rem;
  line-height: 1.3;
  font-weight: 700;
  /* Cased here rather than in the data, so an editor writes the page's name once, in sentence case,
     and it still reads as a name everywhere else it is used — the `<title>`, a share card, a menu. */
  text-transform: uppercase;
}
/* The template steps this one down at 770, not at the banner's 576/430. */
@media (max-width: 770px) {
  .cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
    .cms-hero-title {
    font-size: 2rem;
  }
  .cms-hero:not([data-carousel]):has(.cms-hero-copy > .cms-hero-title:only-child)
    .cms-hero-caption {
    padding: 3.75rem 0.9375rem;
  }
}

/*
 * ===== Breadcrumbs (`component_type: "breadcrumbs"`) =====
 *
 * The block existed and rendered content, but nothing in this file keyed off `.cms-breadcrumbs` —
 * play4you's block registry (`cms/components.ts`) had never registered the `breadcrumbs` type at
 * all, so `renderNode` silently skipped every instance of it (its documented behavior for an
 * unregistered type). That is the actual fix; this is just the look, since the live play4you.ee site
 * never used breadcrumbs itself and left no styling to port — a plain horizontal trail in the site's
 * own tokens, sitting directly under the page-title band above.
 *
 * RESET NOTE. The raw scraped theme sheet (`styles/style.scoped.css`) carries bare, un-namespaced
 * selectors off the legacy markup shape — `nav ul li a {display: block}` and
 * `nav > div > ul > li > a {padding: 0 1.2rem}` — that match this block's `<nav><div><ul><li><a>`
 * just as well as the real menu's, since neither selector is scoped by a class of its own. Those
 * declarations otherwise win unopposed (this sheet's higher-specificity rules below never
 * competed on `display`/`padding`/`line-height` at all), leaving the crumbs sized like 65px-tall
 * header nav items. Reset explicitly rather than chase the template sheet's specificity.
 */
.cms-breadcrumbs {
  padding: 14px 0;
  background: var(--p4y-bg-soft);
}
.cms-breadcrumbs-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/*
 * The column's authored alignment (`GridRow`'s inline `text-align` + `--cms-align`, same as
 * `.cms-data-section-head` below) only reaches inline content — a flex container ignores
 * `text-align` for positioning its own items, so the row's `justify-content` has to restate it.
 */
.cms-col[data-align='center'] .cms-breadcrumbs-path {
  justify-content: center;
}
.cms-col[data-align='end'] .cms-breadcrumbs-path {
  justify-content: flex-end;
}
.cms-breadcrumb {
  display: flex;
  align-items: center;
  font-family: Nunito, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--p4y-muted);
}
.cms-breadcrumb a {
  display: inline;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}
.cms-breadcrumb a:hover,
.cms-breadcrumb a:focus {
  color: var(--p4y-accent);
}
/* The current page, unlinked — read in the page's own ink rather than the muted trail colour. */
.cms-breadcrumb[aria-current='page'] {
  color: var(--p4y-text);
}
/*
 * A chevron between crumbs, matching dcn's breadcrumb separator (`content: '\f14f'` in Material
 * Design Icons) — but dcn's icon font isn't loaded for this tenant, so this is Font Awesome 5 Free's
 * equivalent glyph (`\f054`, fa-chevron-right), the icon font play4you already loads elsewhere
 * (e.g. the map-marker mark above).
 *
 * THE FIRST FIVE DECLARATIONS ARE A RESET, not a look. The template's own top-nav separator — a
 * 1x11px grey hairline — targets this same `nav > div > ul > li:not(:first-child):before` shape,
 * and this block's `<nav><div><ul><li>` markup matches it exactly. Overriding `content` does not
 * displace the rest of that rule: a higher-specificity rule only wins the properties it actually
 * states, so `position`, `background-color`, `width` and `height` all still arrive from the
 * template unless they are restated here.
 *
 * `background: none` in particular is worth spelling out, because leaving it out fails silently.
 * The hairline's `width: 1px` only takes effect while the pseudo is blockified — which it is
 * inside a flex `.cms-breadcrumb`, so the grey plate is one pixel wide and invisible behind the
 * glyph. The moment a crumb becomes a block (as the truncating last crumb does below 1031px)
 * its `::before` is inline again, `width`/`height` stop applying, the box grows to the glyph, and
 * the plate surfaces as a grey rectangle behind the chevron. Resetting all three keeps the
 * chevron's box its own size in either formatting context.
 */
.cms-breadcrumb + .cms-breadcrumb::before {
  content: '\f054';
  position: static;
  background: none;
  width: auto;
  height: auto;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.6875rem;
  line-height: 0.7rem;
  margin: 0 20px;
  color: var(--p4y-muted);
}

/*
 * MOBILE: one line, with the current page truncated rather than wrapped.
 *
 * The trail's last crumb is the page title, so on a phone it is routinely longer than the row and
 * the wrapping path above stacked into two or three lines — a band three times its designed height
 * sitting between the hero and the cover. Below the template's own mobile switch (1031px, the width
 * every other mobile rule in this sheet keys off) the path stops wrapping and the last crumb takes
 * the ellipsis instead.
 *
 * WHY THE LAST CRUMB TURNS INTO A BLOCK. `text-overflow` acts on an element's own inline content;
 * on the flex box `.cms-breadcrumb` is by default, the crumb's text is an anonymous flex item and
 * never gets ellipsised. `display: block` puts the title — and the `::before` chevron, which lays
 * out inline ahead of it — back in an inline formatting context, where the clip can produce the '…'.
 *
 * The leading crumbs keep their intrinsic width (`flex: 0 0 auto`) so only the title gives ground;
 * `min-width: 0` is what lets the title shrink below its own min-content width at all, flex items
 * being floored there otherwise. `overflow: hidden` on the path is the backstop for a trail whose
 * leading crumbs alone overrun the gutter: it clips rather than letting the band scroll the page
 * sideways. Halving the separator margin buys ~40px of that width back for the title.
 */
@media (max-width: 1031px) {
  .cms-breadcrumbs-path {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .cms-breadcrumb {
    flex: 0 0 auto;
  }
  .cms-breadcrumb:last-child {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .cms-breadcrumb + .cms-breadcrumb::before {
    margin: 0 10px;
  }
}

/*
 * ===== About band: rich text beside a picture, with a card under it =====
 *
 * The template's `.about-wrap3` — `.about-desc.v2` in one column, `.sn-about-img` in the other, and
 * `.about-info` laid over the picture's corner. The CMS authors that third piece as its own
 * `call_to_action` in the row BELOW, so here it is a card under the picture rather than an overlay;
 * everything else transposes rule for rule.
 *
 * THE BAND IS IDENTIFIED BY THE BLOCK IN IT, `:has(.cms-richtext)`, the way dcn selects its
 * spotlight rows. Row position is not identity: a row whose blocks are all hidden never reaches the
 * DOM, so anything selected as "the second row" moves the day something above it is hidden.
 */
.cms-section:has(.cms-richtext) {
  padding-top: 4.6875rem; /* `.pt-75` */
  padding-bottom: 7.5rem; /* `.pb-120` */
}

/*
 * ===== …and how its four blocks are arranged side by side =====
 *
 * THE CMS AUTHORS THE BAND AS TWO ROWS — copy | picture, then the contact rows | the card — and a
 * row is a grid, so the two cells of each share one row line. That is the wrong axis for this band.
 * The picture is 200px taller than the copy, so the line between the rows lands at the PICTURE's
 * bottom, and the contact rows went with it: they belong directly under the copy, where the
 * template carried the same two lines (`.header-contact`'s phone, `.sn-about-time`'s hours), and
 * instead they sat 230px lower with the left column's white space above them.
 *
 * So the two rows are flattened into ONE grid — `display: contents` on each row, the four cells
 * placed by hand — and the picture is given both rows to span. The left column then stacks as its
 * own flow (copy, then contacts) and the right column is the picture with the card on it; neither
 * column's height reaches across to the other any more.
 *
 * CELLS ARE PLACED BY WHAT THEY HOLD, never by their position in the tree — the same reasoning that
 * makes the band itself `:has(.cms-richtext)`. A row whose blocks are all hidden never reaches the
 * DOM at all, and this band's mobile arrangement already orders the four differently, so anything
 * written as "the second row's first cell" breaks on the first edit. A fifth block added to the
 * band is auto-placed into the free cell under the contacts rather than landing on another.
 *
 * ROW 2 IS `1fr` SO THE PICTURE CANNOT PUSH THE CONTACTS BACK DOWN. A spanning item taller than the
 * tracks it covers hands the excess to them, split evenly when both are `auto` — which would have
 * dropped the contact rows by half the picture's overhang and quietly reintroduced the gap this
 * arrangement exists to close. An item crossing a FLEXIBLE track gives all of it to that track
 * instead, so row 1 stays exactly the copy's height and row 2 absorbs the slack below the contacts,
 * where there is nothing to push.
 *
 * THE COLUMN WEIGHTS ARE RESTATED HERE. `display: contents` drops the row boxes, and the authored
 * `grid-template-columns` is an inline style ON those boxes, so it goes with them. `1fr 1fr` is what
 * both rows carry today; it is the one thing this arrangement takes out of the author's hands, so a
 * band authored with uneven columns would need this rule to be told.
 *
 * 1032px, NOT the theme's 1031: at exactly 1031 the mobile arrangement is the one showing and the
 * desktop wrapper is still `display: none` — which a `display: grid` here would beat, rendering both
 * arrangements at once. Above the gate the container is capped anyway, so this layout is frozen.
 */
@media (min-width: 1032px) {
  /*
   * Whichever element is actually holding the rows: the band authors a mobile arrangement, so
   * renderNode wraps the desktop rows in `.cms-desktop-only` — but drop that arrangement and the
   * rows become children of the container itself. `:has(> .cms-row …)` asks which one has them
   * rather than naming one and silently doing nothing the day it changes.
   */
  .cms-section:has(.cms-richtext)
    :is(.cms-container, .cms-desktop-only):has(> .cms-row .cms-richtext) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--cms-grid-gap);
    /* `.sn-about-time`'s own `margin-top`: the air the template left between the copy and the
       opening hours is the air this row line now provides. */
    row-gap: 2.2rem;
  }
  .cms-section:has(.cms-richtext) .cms-row {
    display: contents;
  }
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-richtext) {
    grid-area: 1 / 1;
  }
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-contact) {
    grid-area: 2 / 1;
  }
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-gallery) {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
  /* In flow under the picture, across the whole column — what the card looks like until the overlap
     below takes it over at 1200. Its own row, so it clears the left column's stack as well. */
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-cta) {
    grid-area: 3 / 2;
  }
}

/*
 * The copy. `.about-desc` is a dozen child-combinator rules over an authored body, which is the
 * whole reason `richtext` emits its hook on the sanitised container and not on a wrapper around it.
 *
 * MARGINS ARE ZEROED FIRST because the template's rules assume they are: it was authored against
 * Bootstrap's reboot, which this tenant does not ship, so without this every gap below is added to
 * a UA default rather than replacing it.
 */
.cms-richtext > * {
  margin: 0;
}
/*
 * `.about-desc.v2`'s right inset — the gap between the copy and the picture beside it, and so only
 * worth having while there IS a picture beside it. Stacked into one column the inset buys nothing
 * and only shortens the measure. Scoped rather than set and then reset, so there is one rule to read
 * instead of two that disagree.
 *
 * 1031px, NOT the shared grid's 991.98px: this theme realigns `.cms-desktop-only`/`.cms-mobile-only`
 * to its own breakpoint further up this sheet, so a band's arrangement switches at 1031 here. Gating
 * on the grid's number would leave 992-1031px stacked and still inset.
 */
@media (min-width: 1031px) {
  .cms-richtext {
    padding-right: 1.5625rem;
  }
}
/*
 * The eyebrow — `.about-desc > span:not(.about-time)` at the `.v2` size, minus that rule's
 * `border-bottom`. The accent alone is enough to set the line apart from the title under it.
 *
 * `inline-block` stays: the template makes this a `<span>` and an author writes a heading, so
 * without it the line would be a full-column block, and anything later given to it (a background,
 * a rule of its own) would stretch the width of the column rather than sit under the words.
 */
.cms-richtext > h3:first-child {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: var(--p4y-accent);
}
.cms-richtext > h3:first-child + h2 {
  margin-top: 1.25rem;
}
.cms-richtext > h2 {
  font-size: 2.425rem;
  line-height: 2.9rem;
  font-weight: 400;
}
.cms-richtext > h2 + p {
  margin-top: 1.25rem;
}
/*
 * The copy's type is NOT the theme's, in the same way the home banner's headline is not: the theme
 * sets `p { font-family: Arimo; font-size: 1.0625rem; line-height: 1.875rem }` and `.about-desc > p`
 * only resizes it, while the live page runs Nunito 20/500/27 — a per-widget Elementor override on
 * this page, not something any theme rule produces.
 *
 * Restated on the BLOCK rather than on `p`, so it stays rich text's treatment instead of becoming a
 * global paragraph rule for the tenant. `max-width` is `.about-desc > p`'s own.
 */
.cms-richtext > p {
  font-family: Nunito, sans-serif;
  font-size: 1.25rem; /* 20px */
  font-weight: 500;
  line-height: 1.6875rem; /* 27px */
  max-width: 95%;
}
/*
 * `max-width` shrinks the paragraph's own BOX, not just its wrapped lines, and a block box with no
 * horizontal margins stays flush against the start edge regardless of `text-align` — that property
 * only places the inline content inside the box, never the box itself. So on the desktop column
 * (left-aligned, no `data-align`) the 5% slack lands where it reads correctly, as ragged space on
 * the right. Authored centered — which this page's mobile arrangement does, `data-align="center"`
 * on the column — the same box stayed pinned left while the heading and eyebrow above it (both
 * full-width, so centering their text also centers what little the eye compares against) read
 * centered, leaving the paragraphs visibly offset from the rest of the block.
 */
.cms-col[data-align='center'] .cms-richtext > p {
  margin-inline: auto;
}
.cms-richtext > p + p {
  margin-top: 1.25rem;
}
/*
 * THE OPENING HOURS ARE NO LONGER PART OF THE COPY. They were the template's `.sn-about-time` — a
 * clock glyph, a "Часы работы" label and the hours, authored as a heading after the last paragraph
 * — and this sheet drew them as `> p + h3::before`, the template's own `> p + span` logic. The page
 * now authors them as a `contact_info` row in the band's second row, beside the phone, so that rule
 * matched nothing; its treatment (the Flaticon clock in the accent, in a 50px column) moved to the
 * contact rows further down — `===== About band: the contact rows =====`.
 *
 * Removed rather than left standing: `> p + h3` is a shape an editor's toolbar produces at any
 * point in an authored body, so the first subheading someone writes mid-copy would be stamped with
 * a clock and uppercased.
 */

/*
 * Lists and links: not in the authored body today, but an editor's toolbar produces them and rich
 * text is the one block whose markup is the author's. `.sn-list-style`'s marker is a Flaticon glyph
 * this port does not load, so it is the accent bullet instead.
 */
.cms-richtext > ul,
.cms-richtext > ol {
  margin-top: 1.125rem;
  padding-left: 1.875rem;
}
.cms-richtext > ul > li {
  position: relative;
  margin-bottom: 3px;
  list-style: none;
}
.cms-richtext > ul > li::before {
  content: '\2022';
  position: absolute;
  left: -1.125rem;
  font-weight: 700;
  color: var(--p4y-accent);
}
.cms-richtext a {
  color: var(--p4y-accent);
}

/*
 * A record's own body (the service detail description, currently) goes through `HtmlRenderer`
 * rather than the `richtext` block, so `.cms-richtext`'s list styling above never reaches it — and
 * the raw template's bare `ul { padding-left: 0 }` (`styles/style.scoped.css`, written for its own
 * nav/widget lists, each of which restates its own spacing) reaches every `<ul>` regardless, leaving
 * an authored bullet list's markers flush against the edge with no room to hang. Same treatment as
 * the richtext block's list, so the two kinds of authored content agree.
 */
.cms-view-detail-body ul,
.cms-view-detail-body ol {
  margin-top: 1.125rem;
  padding-left: 1.875rem;
}
.cms-view-detail-body ul > li {
  position: relative;
  margin-bottom: 3px;
  list-style: none;
}
.cms-view-detail-body ul > li::before {
  content: '\2022';
  position: absolute;
  left: -1.125rem;
  font-weight: 700;
  color: var(--p4y-accent);
}

/*
 * The picture, whole and filling its column — the template's `img-fluid w-100`.
 *
 * THE SQUARE IS CSS'S, NOT THE SERVER'S, which is what makes this fixable here at all. The
 * thumbnail endpoint FITS an image inside the box it is asked for rather than cropping to it: this
 * 3:4 portrait comes back 3:4 from a `400x400` request, at 300x400. What cut its top and bottom off
 * was the home band's frame — `aspect-ratio: 1` + `object-fit: cover` on `.cms-gallery-image` — so
 * undoing those two gives the whole picture back at its own proportions.
 *
 * Scoped to the SECTION, not to `.cms-row:has(.cms-richtext)`: a container renders a separate row
 * set per breakpoint, so the moment this band is given a mobile arrangement the picture is in a row
 * of its own and a row-scoped rule would silently stop matching there.
 */
.cms-section:has(.cms-richtext) .cms-gallery-image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
}

/*
 * ===== About band: the contact rows =====
 *
 * The phone and the opening hours, authored as a `contact_info` block in the band's second row.
 * The same block builds the footer's contact column, where every row is a labelled pair — "Tel." in
 * a 6.875rem column, then the value — which is a footer table's idiom. Here the block sits under the
 * copy, where the template carried these two lines as an icon and a value instead: the header's
 * phone (`.header-contact`, `<i class="flaticon-telephone">` at 30px in the accent, the line inset
 * 45px) and the copy's hours (`.sn-about-time`, the same shape with `.flaticon-clock` at 50px). So
 * in this band the label gives way to the glyph, and the type is the header line's Nunito 17/600
 * rather than the footer row's 14.4/500.
 *
 * SCOPED TO THE SECTION, like the picture above and the card below, and for the same reason: a
 * container renders a separate row set per breakpoint, and this band has a mobile arrangement, so a
 * `.cms-row`-scoped rule would silently stop matching under 1031px.
 *
 * THE GLYPH IS CHOSEN BY THE KIND — `data-contact`, which the block lower-cases from the authored
 * type. Matched on a substring so the exact wording an editor types is not load-bearing: "Telephone",
 * "Phone", "Opening Hours" and "Часы работы" all land on the right glyph. A kind with none mapped
 * renders as a bare value line rather than an empty icon column; see the `::before` below.
 */
.cms-section:has(.cms-richtext) .cms-contact {
  /* The footer column's tail (60px, 2.5rem stacked). In a band the row gap already does that. */
  margin-bottom: 0;
}
.cms-section:has(.cms-richtext) .cms-contact-item[data-contact*='tel'],
.cms-section:has(.cms-richtext) .cms-contact-item[data-contact*='phone'] {
  --p4y-contact-icon: '\f10e'; /* flaticon-telephone, the header's own phone glyph */
}
.cms-section:has(.cms-richtext) .cms-contact-item[data-contact*='hours'],
.cms-section:has(.cms-richtext) .cms-contact-item[data-contact*='часы'] {
  --p4y-contact-icon: '\f13e'; /* flaticon-clock, `.sn-about-time`'s own */
}
/*
 * A flex line, so the glyph is a COLUMN and not a hanging indent: a value that wraps — the hours, in
 * the narrow half-width column — keeps its second line with its first instead of running back under
 * the icon. `align-items: center` sets the 30px glyph against the line, the way the template centres
 * the header contact's; the glyph's 1.875rem box plus the gap is `.sn-about-time`'s 50px inset.
 */
.cms-section:has(.cms-richtext) .cms-contact-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: Nunito, sans-serif;
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  line-height: 1.96875rem; /* both `.header-contact`'s */
}
/* The footer's 0.75rem, opened up: these rows are a 30px glyph tall, not a line of 14.4px text. */
.cms-section:has(.cms-richtext) .cms-contact-item:not(:first-child) {
  margin-top: 1.25rem;
}
/*
 * Generated ONLY for a kind that mapped a glyph above: with the property unset, `var()` is invalid
 * at computed-value time and `content` falls back to its initial `normal` — which is no
 * pseudo-element at all, rather than an empty 30px column holding space for a missing icon.
 */
.cms-section:has(.cms-richtext) .cms-contact-item::before {
  content: var(--p4y-contact-icon);
  flex: none;
  width: 1.875rem;
  font-family: Flaticon;
  font-size: 1.875rem; /* 30px, the size the template draws both of these at */
  font-weight: 400;
  line-height: 1;
  /* Not the template's `#c0a964` — the arrow theme's leftover gold, replaced by the tenant's accent
     everywhere else in this sheet, the map pin included. */
  color: var(--p4y-accent);
}
/*
 * THE LABEL IS HIDDEN, NOT DROPPED. "Tel." / "Opening Hours" is what tells a screen reader which
 * value is which, and an icon font's private-use glyph tells it nothing — so clipping rather than
 * `display: none` keeps both readings right: the eye gets the icon, assistive tech keeps the word.
 * Out of flow, so it is not a flex item of the row either.
 */
.cms-section:has(.cms-richtext) .cms-contact-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The phone is a `tel:` link. The band is light, so the footer's `#d7d7d7` never reaches these rows
   and the page's own ink is right; only the hover needs saying. */
.cms-section:has(.cms-richtext) a.cms-contact-value:hover,
.cms-section:has(.cms-richtext) a.cms-contact-value:focus {
  color: var(--p4y-accent);
}
/*
 * A CENTRED (or end-aligned) COLUMN. `text-align` places inline content inside a box; it cannot
 * place a FLEX ITEM, and the rows above are flex lines — so a column authored `align: center`, which
 * is what the mobile arrangement gives this block, centred the copy and the card around it while
 * these two rows stayed packed against the start edge. Authored alignment that visibly does nothing
 * reads as a broken block, and it is this sheet's flex row that took it away, so it is this sheet's
 * to give back.
 *
 * THE LIST IS WHAT MOVES, NOT EACH ROW: it is shrunk to its widest row and placed by auto margins,
 * so the glyphs stay in one column under each other. Centring the rows themselves
 * (`justify-content: center`) centres each icon-and-value pair on its own, and with two values of
 * different lengths — a phone number and a span of hours — the icons step in and out by the
 * difference, which reads as a misalignment rather than as centring. `max-width` keeps a long value
 * wrapping inside the column instead of running out of it.
 */
.cms-section:has(.cms-richtext) .cms-col[data-align='center'] .cms-contact-list,
.cms-section:has(.cms-richtext) .cms-col[data-align='end'] .cms-contact-list {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.cms-section:has(.cms-richtext) .cms-col[data-align='end'] .cms-contact-list {
  margin-inline-end: 0;
}

/*
 * `.about-info` — the dark card, its type and its full-bleed button. It overlays the picture in the
 * template and sits under it here, which is the one thing the authored tree decides rather than
 * this sheet: the block is in the row below, in the picture's column.
 *
 * The band rules above already paint the heading and copy white, which is what this fill wants; the
 * button is the exception, since the band's dark `.thm-btn.scndry-bg` would vanish into the card.
 * The template's card carries the accent one (`.thm-bg`), so that is restated.
 */
.cms-section:has(.cms-richtext) .cms-cta {
  position: relative; /* the pin below hangs off this */
  padding: 5.625rem 2.8125rem 0;
  background-color: var(--p4y-secondary);
  border-radius: 5px;
  /*
   * `.sn-about-img .about-info { text-align: center }` — the card's own value on this very page,
   * and the one thing about it this port had not carried over. The heading and the address sat
   * against the card's left edge under a pin centred over them, and the button below them was
   * centred already (`.thm-btn`'s own), so the card read as two alignments stacked.
   *
   * ON THE CARD, NOT ON ITS COLUMN: the template centres `.about-info` itself, whatever it is
   * sitting in. The mobile arrangement authors this column `align: center` and so looked right
   * already; stating it here is what makes the desktop card agree, and keeps the two the same card
   * rather than one that happens to be centred at one width.
   */
  text-align: center;
}
/*
 * The map pin — `.sn-about-img .about-info > i`, a 5.625rem disc hung over the card's top edge.
 *
 * The template puts it in the markup, as `<i class="fas fa-map-marker-alt">`. The block emits no
 * such element and should not: it is decoration on one tenant's one card, which is a stylesheet's
 * business, so it is drawn on `::before` from the Font Awesome 5 this port already ships — the same
 * way the socials row and the menu arrows are drawn (see the family note under the header).
 *
 * The disc is the TENANT'S ACCENT, not the template's `#BB9457`. That is the arrow theme's leftover
 * brand, and this sheet has replaced it with play4you's own everywhere it appears — the pager's
 * active pill was the last one.
 *
 * The card's `padding-top` above is what the disc costs: it reaches 4.375rem past the card's edge,
 * so the heading starts clear of it rather than being lifted over it on a `z-index` the way the
 * template does.
 */
.cms-section:has(.cms-richtext) .cms-cta::before {
  content: '\f3c5'; /* fa-map-marker-alt */
  position: absolute;
  left: 50%;
  top: -1.25rem;
  width: 5.625rem;
  height: 5.625rem;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 5.625rem;
  text-align: center;
  color: #fff;
  background-color: var(--p4y-accent);
  border-radius: 50%;
  transform: translateX(-50%);
}
.cms-section:has(.cms-richtext) .cms-cta .cms-column-title {
  /* Nunito, not the Roboto the page bands set: this card's heading is the theme's own
     (`.about-info > h3`), while that rule restates the banner-adjacent band treatment. */
  font-family: Nunito, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}
.cms-section:has(.cms-richtext) .cms-cta .cms-cta-body p {
  margin-top: 0.675rem;
  font-family: Nunito, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}
/* `.about-info > a.thm-btn`: full-bleed to the card's edges, which is what the negative inline
   margins are — the card's own 2.8125rem padding, given back. */
.cms-section:has(.cms-richtext) .cms-cta .cms-cta-actions {
  display: block;
  margin: 1.0625rem -2.8125rem 0;
}
.cms-section:has(.cms-richtext) .cms-cta .cms-cta-button {
  display: block;
  width: 100%;
  padding: 1.15625rem 3.0625rem;
  font-size: 1.0625rem;
  /* Follows the card's own corners rather than being clipped to them: `overflow: hidden` on the
     card would take the pin's overhang with it. */
  border-radius: 0 0 5px 5px;
  background-color: var(--p4y-accent);
  color: #fff;
}
/*
 * THE WIPE, BACK TO BLACK — this button had no visible hover at all until now.
 *
 * The band rule above paints these panels the accent, and correctly: that band's button is the dark
 * `.scndry-bg` one, and a black wipe over black is no hover. This card's button is the inverse — it
 * IS the accent — so it inherited an accent wipe over an accent fill, which computed and animated
 * and changed nothing on screen.
 *
 * The template settles the pairing itself rather than leaving it to be guessed: `.scndry-bg
 * .thm-btn.thm-bg:before, .scndry-bg .thm-btn.thm-bg:after { background-color: #000 }` — an
 * accent-filled button inside a secondary-filled box wipes to black. That is exactly this card.
 * Black rather than `--p4y-secondary` for the same reason: the card is the secondary colour, so a
 * wipe to it would make the button recede into the card instead of reading as a press target.
 *
 * The label is already `#fff` and the base rule keeps it there, so it stays legible as the wipe
 * closes over it.
 */
.cms-section:has(.cms-richtext) .cms-cta .cms-cta-button::before,
.cms-section:has(.cms-richtext) .cms-cta .cms-cta-button::after {
  background-color: #000000;
}

/*
 * ===== …and laid over the picture's bottom edge =====
 *
 * `.about-info` is `position: absolute` inside `.sn-about-img` at `bottom: -1.875rem`, so the
 * template's card sits ON the picture with its own bottom edge hanging 1.875rem below it. The CMS
 * authors the card as a `call_to_action` in the row BELOW the picture, so in flow it lands under it
 * instead. These declarations put it back, with neither block learning where it is.
 *
 * HOW: the card's cell is placed in the PICTURE'S OWN grid area — the two rows the arrangement above
 * gives the photograph — and aligned to its end, which puts the card's bottom edge on the picture's.
 * `translateY(1.875rem)` then hangs it that far past, which is `.about-info`'s `bottom` read
 * straight across. Both halves are independent of what the card holds: an address that wraps to a
 * second line grows the card upward from the same edge, where a hand-placed offset would have to be
 * re-measured. (This replaces a zero-height row the card was hung upward out of by its own height,
 * which the arrangement above dissolved along with every other row box.)
 *
 * WIDE LAYOUTS ONLY — and the gate is 1200px, not the template's `col-lg-6` 992px, because being
 * side by side is not the condition. The condition is that THE PICTURE IS THE TALLER COLUMN: the
 * area's end is the bottom of whichever column is taller, so the moment the copy wins the card stops
 * tracking the photograph's bottom edge and floats below it over white space.
 *
 * The two columns move in opposite directions as the viewport narrows — the picture shrinks with its
 * column, the copy grows as it re-wraps — so they cross. Re-measured now that the contact rows are
 * part of the left column's stack, which costs it their height and the 2.2rem above them: the
 * picture leads by 81px everywhere the container is capped (viewport ≥ 1140), by 54px at 1100 and by
 * 14px at 1080, and trails by 53px at 1060. The crossover is around 1075 — it was around 1050 when
 * the copy stood alone — and 1200 remains the nearest standard breakpoint clear of it, with room for
 * the copy to be edited without silently breaking the arrangement.
 *
 * Below the gate the card renders full-width under the picture in normal flow, in a row of its own
 * (see the arrangement above) — the same treatment it gets on mobile, and a coherent one rather than
 * a degraded overlap.
 */
/*
 * STACKED, THE PIN NEEDS ROOM OF ITS OWN. Below the gate the card is in flow under whatever precedes
 * it — the contact rows on mobile, the picture between 1032 and 1200 — with the band's 1.5rem
 * between the two. But that 1.5rem is measured to the card's BOX, and the pin hangs 1.25rem above
 * it: what was left between the opening hours and a 5.625rem purple disc was 4px, so the disc read
 * as attached to the line above it rather than as the card's own.
 *
 * The overhang is given back and then some. 1.25rem restores the gap the arrangement intended; the
 * 1.5rem on top of it is because what is being cleared here is not a line of text but that disc, and
 * it wants the air a heading would get, not the air a row gets. 48px between the hours and the pin,
 * measured.
 *
 * On the card's CELL rather than the card, so it stays out of the way of the transform that hangs the
 * card off the picture above the gate — where the pin has the photograph behind it and needs nothing.
 */
@media (max-width: 1199.98px) {
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-cta) {
    margin-top: 2.75rem; /* 1.25rem of pin + 1.5rem of air */
  }
}

@media (min-width: 1200px) {
  .cms-section:has(.cms-richtext) .cms-col:has(.cms-cta) {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: end;
  }
  /*
   * Already `position: relative` for the pin, so it paints over the picture without a `z-index` —
   * and it is the later of the two in the tree, the picture's row being the first.
   *
   * NARROWER THAN THE PICTURE, AND HUNG OFF ITS LEFT EDGE — `.about-info`'s `min-width: 17.8125rem`
   * and `left: -1.875rem`. The template's card is `position: absolute`, so its width is shrink-to-fit
   * with that minimum as a floor rather than a fixed measure; `max-content` is the in-flow spelling
   * of the same thing, and `max-width` keeps it inside the column when an address is long enough to
   * ask for more. Breaking the picture's rectangle on one side is the whole point of the shape — a
   * card spanning the full column reads as a caption bar instead.
   *
   * `-1.875rem` IS `.about-info`'s OWN VALUE, not the `-5rem` that `.sn-about-img` overrides it to.
   * That override is tuned to a picture inset 50px from its column (`.sn-about-img { padding-left }`),
   * so the wider overhang lands in the picture's own gutter; this port's picture fills its column, and
   * a 5rem overhang left just 5px between the card and a line of the copy across this whole range —
   * the 1140px container caps at 1164px, so the layout stops changing above that and 5px is the
   * steady state, not an edge case. One copy edit and it collides.
   *
   * AND THE INSET CANNOT SIMPLY BE ADDED BACK, which is worth recording because it is the obvious
   * next move. Insetting the picture makes it SHORTER, and the area this card aligns to ends at
   * whichever column is taller — inset far enough and the left column wins, at which point the card
   * stops hanging off the picture's bottom edge and drops below it. Measured: a 3.125rem inset put
   * the card 97px clear of the photograph instead of the template's 30, and padding the copy's right
   * edge to clear the card did the same thing from the other direction, at 120px. Moving the card is
   * the only lever here that does not disturb either column's height.
   */
  .cms-section:has(.cms-richtext) .cms-cta {
    width: max-content;
    min-width: 17.8125rem;
    max-width: 100%;
    margin-left: -1.875rem;
    transform: translateY(1.875rem);
  }
}

/*
 * ===== Forms (`blocks/DynamicForm`) =====
 *
 * The whole `cms-form-*` vocabulary, from scratch. Unlike dcn there was nothing here to restyle —
 * the game-clubs registration is the first form play4you ever rendered, and every rule below is new
 * rather than transcribed off a template class the markup used to carry. (The contacts page's band,
 * at the foot of this file, IS transcribed off one: it has an original to match.)
 *
 * Which means there is no "what the template gave it through markup that is gone" story to tell:
 * the raw Redux template has no form on any ported page. So this is built from the tenant's own
 * tokens instead — Nunito at the CTA's weights, `--p4y-accent` for focus and choice controls, and
 * the `.thm-btn` wipe on the two buttons so a form's calls to action match every other one on the
 * site. Verified against the modal at 375 / 900 / 1280.
 *
 * The block reuses the same class tree as dcn's, so anything added here is a play4you look for a
 * shared structure, never a second structure.
 */
.cms-form {
  padding: 3.75rem 0;
}
@media (min-width: 768px) {
  .cms-form {
    padding: 5rem 0;
  }
}
/* Inside a modal the section band is gone — the panel IS the box, and its own padding spaces it. */
.cms-form-panel .cms-form-body {
  padding: 0;
}

.cms-form-head {
  margin-bottom: 1.875rem;
}
.cms-form-title {
  margin: 0 0 0.5rem;
  font-family: Nunito, sans-serif;
  font-weight: 700;
  color: var(--p4y-text);
}
.cms-form-intro {
  color: var(--p4y-muted);
}
.cms-form-intro p {
  margin: 0;
}

/*
 * The field grid. Two columns from 768px, with `data-span="full"` (textarea, radio groups)
 * breaking across both — the same `data-span` contract dcn reads, so the block stays one tree.
 */
.cms-form-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .cms-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cms-form-field[data-span='full'] {
    grid-column: 1 / -1;
  }
}

.cms-form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--p4y-text);
}

.cms-form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--p4y-text);
  background-color: var(--p4y-bg);
  border: 1px solid #dfe3ea;
  border-radius: 5px;
  /* Matches the tenant's inputs elsewhere and, on a select, removes the UA arrow — redrawn below. */
  appearance: none;
}
.cms-form-control:focus {
  outline: none;
  border-color: var(--p4y-accent);
  box-shadow: 0 0 0 3px rgba(155, 93, 229, 0.18);
}
.cms-form-control::placeholder {
  color: var(--p4y-muted);
}
.cms-form-control[data-control='textarea'] {
  min-height: 8.75rem;
  resize: vertical;
}
.cms-form-control[data-control='select'] {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6270' stroke-width='2'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.875rem 0.875rem;
}
/* An empty date/time input collapses shorter than its text siblings; the picker icon is restored
   because `appearance: none` above hides it in WebKit. */
.cms-form-control[data-control='date'],
.cms-form-control[data-control='time'] {
  min-height: 2.9375rem;
}
.cms-form-control[data-control='date']::-webkit-calendar-picker-indicator,
.cms-form-control[data-control='time']::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
}
.cms-form-control[aria-invalid='true'] {
  border-color: #d64545;
}
.cms-form-control[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18);
}

/*
 * A radio group is a `<fieldset>` that happens to carry `.cms-form-control` — so it inherits the
 * field box above: border, padding, white ground. That reads as a text input containing radios,
 * which is exactly wrong (a box like that promises you can type in it). `blocks.css` already
 * resets the fieldset, but the field-box rule above outranks it and the template layer wins, so the
 * reset has to be restated here.
 */
.cms-form-control[data-control='radio'] {
  padding: 0;
  border: 0;
  background: none;
}

/* Choice controls carry their own text, so they take the label's type, not the control's box. */
.cms-form-choice {
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  color: var(--p4y-text);
}
.cms-form-control[data-control='radio'] .cms-form-choice + .cms-form-choice {
  margin-top: 0.5rem;
}
.cms-form-choice input {
  accent-color: var(--p4y-accent);
  width: 1rem;
  height: 1rem;
}
/*
 * The scoped template ships a GLOBAL custom checkbox: `[type="checkbox"]` is parked at
 * `left: -9999px` and the box is drawn as `::before`/`::after` on an ADJACENT SIBLING label
 * (`[type="checkbox"] + label`, style.scoped.css "Input Checkbox Styling").
 *
 * The shared block wraps its input INSIDE the label with the text in a `<span>`, so there is no
 * `+ label` to draw on — the custom box never appears and the real one is off-screen. The result
 * is a required consent row with no visible control at all, which is how it shipped until it was
 * caught in the browser: nothing in the DOM or the tests can see it, since the element is present,
 * 16px, and `visibility: visible` the whole time.
 *
 * Restating the box here rather than reshaping the block's markup: the tenant sheet adapts to the
 * shared tree, never the other way round. Radios are unaffected — the template's rule is
 * checkbox-only.
 */
.cms-form-choice input[type='checkbox'] {
  position: static;
  left: auto;
}
/* A fieldset has no box for the invalid border, so a failed radio group is flagged on its legend. */
.cms-form-control[data-control='radio'][aria-invalid='true'] > .cms-form-label {
  color: #d64545;
}

.cms-form-error {
  margin-top: 0.375rem;
  font-family: Nunito, sans-serif;
  font-size: 0.8125rem;
  color: #d64545;
}

.cms-form-alert {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1.125rem;
  border-radius: 5px;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
}
.cms-form-alert[data-state='success'] {
  background-color: #e8f6ee;
  color: #1c6b41;
}
.cms-form-alert[data-state='error'] {
  background-color: #fceaea;
  color: #a32626;
}

/*
 * The two buttons wear the template's `.thm-btn` wipe, restated the same way `.cms-cta-button`
 * restates it — two pseudo-elements growing in from the edges, which is why they need `position`
 * and `overflow` (see that block's note; the template put those in the markup, not the class).
 *
 * The submit is full-width inside the form's own grid, the trigger is inline: a full-bleed button
 * in the middle of a page band reads as a divider rather than a call to action.
 */
.cms-form-submit,
.cms-form-trigger {
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: 1.5rem;
  padding: 1.09375rem 1.8125rem;
  border: 0;
  border-radius: 5px;
  background-color: var(--p4y-secondary);
  color: #fff;
  font-family: Nunito, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: initial;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.cms-form-submit {
  display: block;
  width: 100%;
}
.cms-form-trigger {
  display: inline-block;
  width: auto;
}
.cms-form-submit::before,
.cms-form-submit::after,
.cms-form-trigger::before,
.cms-form-trigger::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  opacity: 0;
  background-color: var(--p4y-accent);
  z-index: -1;
  transition: width 0.3s, opacity 0.3s;
}
.cms-form-submit::before,
.cms-form-trigger::before {
  left: 0;
}
.cms-form-submit::after,
.cms-form-trigger::after {
  right: 0;
}
.cms-form-submit:hover::before,
.cms-form-submit:hover::after,
.cms-form-submit:focus::before,
.cms-form-submit:focus::after,
.cms-form-trigger:hover::before,
.cms-form-trigger:hover::after,
.cms-form-trigger:focus::before,
.cms-form-trigger:focus::after {
  opacity: 1;
  width: 100%;
}
/* A submit in flight must not read as hoverable; the wipe is suppressed with the cursor. */
.cms-form-submit:disabled {
  opacity: 0.65;
  cursor: default;
}
.cms-form-submit:disabled::before,
.cms-form-submit:disabled::after {
  opacity: 0;
  width: 20%;
}

/* Modal panel tokens (structure is in cms/blocks.css). Rounded and roomier than the default box. */
.cms-form-dialog {
  --cms-form-dialog-width: 600px;
}
.cms-form-panel {
  --cms-form-panel-pad: 2rem;
  --cms-form-panel-radius: 10px;
  --cms-form-panel-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  --cms-form-close-color: var(--p4y-muted);
  --cms-form-heading-size: 1.5rem;
  --cms-form-heading-weight: 700;
}
.cms-form-panel .cms-form-heading {
  font-family: Nunito, sans-serif;
  color: var(--p4y-text);
  /* Clear of the close button, which is inset 8px in the same corner. */
  padding-right: 2rem;
}

/*
 * The modal form as a sidebar card.
 *
 * In modal mode the block is not a form at all on the page — it is a heading, a line of intro and
 * a button. Beside the services list it reads as another widget in that column, so it wears the
 * same soft blue card: `--p4y-card`, the same 10px radius and the same 45px gutter, all shared
 * with `.cms-view-list[data-source='services']` above rather than restated.
 *
 * Keyed on `data-mode='modal'` rather than on the column, because that attribute is what actually
 * describes the shape being styled. The block's own DOM says whether it is a compact promo (a
 * trigger) or a full form band, whereas "is it in a sidebar" is not something a CMS column tells
 * CSS — the grid emits `.cms-col` for every column at every width, so any selector reaching for
 * position would be guessing. A full-width modal instance elsewhere gets the card too, which is
 * the right answer for a block that is a call to action wherever it sits.
 *
 * The band padding goes to zero and the card's gutter replaces it: the `.cms-form` section
 * padding exists to space a full-width band off its neighbours, and inside a card it would just
 * sit outside the blue.
 */
.cms-form[data-mode='modal'] {
  padding: 0;
  background: var(--p4y-card);
  border-radius: var(--p4y-card-radius);
}
.cms-form[data-mode='modal'] > .cms-container {
  /* A card, not a page gutter — the container must not cap or re-inset its own contents. */
  max-width: none;
  padding: var(--p4y-card-gutter);
}
/*
 * Tightened against the band spacing: the head's 30px and the trigger's 24px were sized for a
 * full-width section, and inside a card they leave it looking hollow.
 */
.cms-form[data-mode='modal'] .cms-form-head {
  margin-bottom: 1.25rem;
}
.cms-form[data-mode='modal'] .cms-form-trigger {
  margin-top: 0;
}

/*
 * ===== Contacts page: the form band ("Свяжитесь с нами") =====
 *
 * The second half of the original contacts page: a dark full-bleed slab with a centred uppercase
 * heading and a single narrow column of fields under it. The template builds it out of an Everest
 * Forms instance wearing the theme's `.wpcf7` skin inside a `.contact-form` wrapper; here it is the
 * decorative `form` block, which posts what a visitor writes to the contact endpoint — the same
 * thing the original's does, one step shorter.
 *
 * SCOPED TO THAT BLOCK, not to the page. `dynamic_form` emits `data-form="dynamic"` on the same
 * section, so `:not([data-form='dynamic'])` reaches the decorative one and only it. On this tenant
 * that IS the contacts band — `form` is registered for this page and nothing else authors one (see
 * `play4you/cms/components.ts`) — and it is the block's own DOM saying which shape it is, rather
 * than a selector guessing at a page from its columns. The registration-form rules above are
 * untouched: that instance is `data-form="dynamic"` and `data-mode="modal"`.
 *
 * THE SLAB IS THE SHEET'S, NOT THE AUTHOR'S. A section's `bg_color` is authored data and normally
 * the sheet leaves it alone, but this band's ink is white — the template paints the heading through
 * `.thm-layer`, a class the shared markup cannot carry, so it has to be restated — and white ink
 * over an authored colour is one field away from an invisible heading. Painting both here keeps the
 * pair consistent by construction. Same move, and the same `::before` mechanism, as the accent slab
 * `[data-has-image]` wears; `#1a1a1a` is the tenant's own dark, already the footer's fill, where the
 * template reaches for a flat `#000`.
 *
 * WHICH DARK. Not the footer slab's flat `#1a1a1a` but the footer's BOTTOM BAR — the same
 * `rgba(0, 0, 0, 0.3)` the copyright row lays over that slab, which composites to `#121212`. The
 * band sits directly on top of the footer, and at the slab's own value the two ran together into one
 * unbroken dark field with the page's last edge lost somewhere inside it. A step darker separates
 * them while keeping the page's foot one family.
 *
 * Stated as the overlay rather than as `#121212`, so it stays the same arithmetic the bottom bar
 * does: the tenant's dark, and 30% black over it. Change `--p4y-secondary` and both surfaces move
 * together, which is the whole reason the bar is written that way in the first place (line ~667).
 *
 * So the section carrying this block needs NO background authored on it.
 */
.cms-section:has(.cms-form:not([data-form='dynamic'])) {
  position: relative;
  isolation: isolate; /* the slab is a z-index:-1 backdrop; without this it escapes — see the CTA band */
  /* `.pt-100 .pb-100`, replacing the contained section's own 2.5rem/6.25rem rhythm. */
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}
.cms-section:has(.cms-form:not([data-form='dynamic']))::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--p4y-secondary);
  /* the bottom bar's `rgba(0, 0, 0, 0.3)`, as a layer over the slab — one element, two coats */
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  z-index: -1;
}

/* The block's own band padding and inner gutter both go: the section above is the band now, and the
   page gutter is already spent by the section's container. Same reasoning as the modal card. */
.cms-form:not([data-form='dynamic']) {
  padding: 0;
}
.cms-form:not([data-form='dynamic']) > .cms-container {
  max-width: none;
  padding: 0;
}

/*
 * The head — `.sec-title4`, which is `.sec-title3`'s bigger sibling: 42px against 36px, and 17px of
 * air under it against 50px, because a form follows it rather than a row of tiles. Measured off the
 * running original, where Elementor's widget CSS puts it in Roboto 700 rather than the theme
 * sheet's Montserrat 800.
 */
.cms-form:not([data-form='dynamic']) .cms-form-head {
  margin-bottom: 1.0625rem;
  text-align: center;
}
.cms-form:not([data-form='dynamic']) .cms-form-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 2.625rem; /* 42px */
  line-height: 1.1667; /* 49px */
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}
.cms-form:not([data-form='dynamic']) .cms-form-intro {
  color: #fff;
}

/*
 * The form itself: one narrow centred column, 605px, every field full width. The block pairs
 * `data-span="half"` fields two per row from 768px — the right default for a registration with
 * eight questions, and the wrong one here, where the original stacks name, e-mail, subject and
 * message in a single column that is narrower than half this band. 10px between rows, which is the
 * template's `input { margin-bottom: 10px }` rather than a grid gap; the submit repeats it below.
 */
.cms-form:not([data-form='dynamic']) .cms-form-body {
  max-width: 37.8125rem; /* `.contact-form .wpcf7` */
  margin-inline: auto;
}
.cms-form:not([data-form='dynamic']) .cms-form-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
}

/*
 * A field's own type starts at its box's edge, whatever the column is aligned to. The band is
 * authored `align: center` — which is right for the head, and for the 605px column of fields, and
 * wrong INSIDE a field: a centred label over a left-aligned input (the control keeps the UA's
 * `start`) reads as a caption rather than as that box's name. The error line under a box is the
 * same case.
 */
.cms-form:not([data-form='dynamic']) .cms-form-field {
  text-align: start;
}

/* The slab is dark, so any label left standing has to be light: the base rule paints one in the
   page's near-black ink, which on this band is an invisible line above an empty box. */
.cms-form:not([data-form='dynamic']) .cms-form-label {
  color: #fff;
}

/*
 * THE LABEL GIVES WAY TO THE PLACEHOLDER — but only where there is a placeholder to give way to.
 * The original's fields are labelled inside the box ("Имя*", "Email*"), the plugin hiding the real
 * label; the block emits both, so the label is clipped rather than dropped, keeping the name a
 * screen reader reads out. `:has()` is what makes this safe: a field whose placeholder an editor
 * left blank keeps its visible label instead of becoming an unlabelled box.
 */
.cms-form:not([data-form='dynamic'])
  .cms-form-field:has(.cms-form-control[placeholder]:not([placeholder='']))
  .cms-form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The field box: the template's `.contact-form .wpcf7 input` metrics over the tenant's own colours,
   which already agree with it on the 5px corner and the hairline border. */
.cms-form:not([data-form='dynamic']) .cms-form-control {
  min-height: 3.875rem; /* 62px */
  padding: 0.625rem 1.875rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
}
.cms-form:not([data-form='dynamic']) .cms-form-control[data-control='textarea'] {
  min-height: 7.5rem; /* 120px */
  padding: 1.25rem 1.875rem 0.625rem;
}

/*
 * The submit keeps the base button's shape and wipe and swaps the two colours: the accent fill the
 * template gives this one (`.thm-btn.thm-bg`), with the wipe in black rather than the accent, since
 * an accent wipe over an accent button is no hover at all. The theme says exactly that — its accent
 * group carries `.thm-btn.thm-bg:before/:after { background-color: #000 }`.
 *
 * `margin-top` drops to the 10px the fields are spaced by: in this band the button is the last row
 * of the form, not a call to action set apart from it.
 */
.cms-form:not([data-form='dynamic']) .cms-form-submit {
  margin-top: 0.625rem;
  background-color: var(--p4y-accent);
}
.cms-form:not([data-form='dynamic']) .cms-form-submit::before,
.cms-form:not([data-form='dynamic']) .cms-form-submit::after {
  background-color: #000000;
}
/*
 * ...except that 10px is not the same distance in the two shapes this form can take, and the button
 * is the one row that can tell them apart.
 *
 * With placeholders authored — the original's shape — the labels are clipped, every row IS just a
 * box, and 10px is the whole rhythm: 10px between boxes, 10px under the last one. The rule above.
 *
 * With a label drawn, that same 10px stops being the distance between two BOXES, because the label
 * line and its 6px now sit inside it: one box to the next is 38.5px. The button carries no label, so
 * at 10px it lands hard against the last field while every other box floats clear — which is the
 * gap this corrects. It takes the full box-to-box distance instead, written as its three parts
 * rather than as one number, because each part is stated elsewhere in this sheet and has to follow
 * if it changes there.
 *
 * The selector reads "a body holding a control with no placeholder, or with an empty one" — i.e. at
 * least one label is being drawn. Written as a two-branch list rather than as the negation the clip
 * rule above uses, because that negation would need a `:has()` inside a `:has()`, which is invalid:
 * the browser drops the whole rule, silently and with the page still rendering. Half-authored
 * placeholders land here too, which is the right answer — one visible label is enough to put the
 * whole form in the taller rhythm.
 */
.cms-form:not([data-form='dynamic'])
  .cms-form-body:has(.cms-form-control:not([placeholder]), .cms-form-control[placeholder=''])
  .cms-form-submit {
  /* the row gap, the label's line box (0.9375rem × the tenant's 1.5), and the label's own margin */
  margin-top: calc(0.625rem + 1.40625rem + 0.375rem);
}

/* An alert lands above the fields, on the slab. Both surfaces are pale, so only their width needs
   saying — the band is 605px wide here, not the form's full section. */
.cms-form:not([data-form='dynamic']) .cms-form-alert {
  text-align: center;
}
}

/* src/components/play4you/play4you.important.css */
@layer template-important {
/*
 * play4you's `!important` overrides of its own raw template, in the `template-important` layer.
 *
 * Why a separate file and layer: for `!important` declarations the cascade layer order is
 * REVERSED — an earlier layer's `!important` beats a later one's. So a token-sheet rule in
 * `template-theme` can no longer out-`!important` the raw template (`template`) the way it did by
 * source order. `template-important` is declared first (src/styles/layers.css), which makes it the
 * strongest layer for `!important` and the weakest for everything else — so put ONLY `!important`
 * declarations here.
 *
 * Both rules undo the same template rule: its mobile switch hides the desktop site header
 * wholesale below 1031px (`header, .sticky-menu { display: none !important }`, style.scoped.css).
 * That part of the sheet is the raw template, so it is corrected here rather than there.
 */
@media (max-width: 1031px) {
  /* The theme hands over to its own `.rspn-hdr` there; here the header *is* the mobile bar, so it
     stays. */
  header.cms-header {
    display: block !important;
  }

  /*
   * `Detail` emits its meta row as a `<header>`, so the template's element selector was taking the
   * post's date off the page at every width the mobile bar is used. Not scoped to blog — this is
   * the element-selector collision, not a blog decision, and it would catch any other datasource's
   * detail header the same way.
   */
  .cms-view-detail .cms-view-detail-head {
    display: flex !important;
  }
}
}