@charset "UTF-8";

/* 01. Import Section
---------------------------------------------------------------------- */
@import url("bootstrap-grid.css");					/* Default Reset, Typography, Forms, Responsive Grid etc. */
@import url("icons.css");							/* Webfont Icons: FontAwesome, Line, Simple Line */
@import url("plugins/revolutionslider.css");		/* Revolution Slider Style Sheets */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:500,600,700');

/* Forms Reset & Styles
------------------------------------- */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
	height: 51px;
	line-height: 51px;
	padding: 0 20px;
	outline: none;
	font-size: 15px;
	color: #808080;
	margin: 0 0 16px 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	display: block;
	background-color: #fff;
	border: 1px solid #dbdbdb;
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
	font-weight: 500;
	opacity: 1;
	border-radius: 3px;
}

input:-webkit-autofill:focus,
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #808080 !important;
}

select {
	padding: 15px 18px;
	cursor: pointer;
}

input {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
	color: #808080;
	transition: box-shadow 0.2s !important;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
	border: 1px solid #d8d8d8;
	opacity: 1;
}

input[type="submit"] {
  border: none;
  padding: 11px 18px;
  width: auto;
}

input[type="checkbox"] { display: inline; }

input[type="radio"] {
	width: 15px;
	height: 15px;
	cursor: pointer;
	box-shadow: none;
}

/* Input Placeholder Color */
::-webkit-input-placeholder { /* WebKit browsers */
	color: #888;
	opacity: 1;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #888;
	opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #888;
	opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #888;
	opacity: 1;
}

textarea {
	height: auto;
	line-height: 27px;
	padding: 20px;
	min-height: 130px;
	transition: none !important;
	min-width: 100%;
}

label,
legend {
	display: block;
	font-weight: bold;
	font-size: 15px;
	font-weight: normal;
	margin-bottom: 8px;
}

label span,
legend span {
	font-weight: normal;
	font-size: 14px;
	color: #444;
}

fieldset {
    padding: 0;
    border: none;
}

a, button { outline: none !important; }
a:focus,
a:hover { text-decoration: none; color: #333;}
img { max-width: 100%; }

/* Header
------------------------------------- */
#logo { display: inline-block; margin-top: 3px; }

#logo img { max-height: 38px; width: auto; transform: translate3d(0,0,0); }
img.footer-logo { max-height: 38px; width: auto; }

#header {
	position: relative;
	z-index: 999;
	padding: 18px 0 8px 0;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
	font-size: 16px;
}

/* Header Widget */
.header-widget {
	position: relative;
	top: -1px;
	height: 54px;
}

.header-widget .button,
.header-widget .button.border {
	margin-right: 0;
	min-width: 130px;
	text-align: center;
	position: relative;
	line-height: 26px;
	font-weight: 500;
}

.header-widget .button.border i {
	font-size: 17px;
	padding: 0px 0 0 4px;
	top: 2px;
	display: inline-block;
	position: relative;
}

.header-widget .sign-in {
	position: relative;
	color: #333;
	margin-right: 25px;
	top: 10px;
	display: inline-block;
	vertical-align: top;
}

.header-widget .sign-in i { padding-right: 4px; font-size: 15px; }
.header-widget .sign-in:hover { color: #66676b; }

/* Desktop "My Account" (dashboard pages only, where the user is
   already logged in) shows the user's real avatar photo instead of
   the generic person icon — same image + circular treatment as the
   mobile dashboard trigger's .el-dash-menu-avatar (~L20269), so
   desktop and mobile headers now agree on how the logged-in user is
   represented. Marketing pages keep the plain "Sign In" link/icon
   for logged-out visitors, unaffected by this rule.
   No `top` override here: the real (later, higher-specificity)
   `.header-widget .sign-in` rule at ~L21366 already makes this an
   `inline-flex` row with `align-items: center; height: 44px; top: 0`
   specifically so it sits on the same baseline as the nav links
   beside it — adding a `top` offset on this 3-class selector would
   win over that rule and push the whole pill down again. The avatar
   is a plain flex child (no manual vertical-align/negative margin
   needed) so it centers automatically with the "My Account" text. */
.header-widget .sign-in .el-header-avatar {
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: none;
}
.header-widget .sign-in .el-header-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #ececef;
}

/* Full Width Header */
header.fullwidth .container {
	width: 100%;
	margin: 0;
	padding: 0 40px;
}

.left-side {
	float: left;
	width: 65%;
	display: inline-block;

}

.right-side {
	float: right;
	width: 35%;
	display: inline-block;
}

/* mobile fix */
@media (min-width: 1025px) and (max-width: 1239px)  {
	.right-side {
		width: auto;
		display: inline-block;
		margin-top: -126px;
		position: relative;
	}

	.left-side {
		width: 100%;
		display: inline-block;
	}
}

#logo,
#navigation { float: left; }

#logo { margin-right: 50px; }

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

/* Sticky Header
------------------------------------- */
#header.cloned {
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 999;
}

#header.cloned { background-color: #fff; }

/* Sticky header styles */
#header.cloned #logo img { transform: translate3d(0,0,0); max-width: 120px; margin-top: 1px; }
#header.cloned { padding: 18px 0 7px 0; }

.sticky-logo { display: none; }

#header.cloned.unsticky {
	opacity: 1;
	visibility: hidden;
    pointer-events: none;
	transform: translate(0,-100%) scale(1);
	transition: 0.3s;
}

#header.cloned.sticky {
	opacity: 1;
	visibility: visible;
	transform: translate(0,0) scale(1);
	transition: 0.3s;
}

/* Footer
------------------------------------- */
#footer {
	padding: 70px 0 0 0;
	background-color: #fff;
	border-top: 1px solid rgba(0,0,0,0.09);
	font-size: 16px;
}

#footer.sticky-footer { box-shadow: none; }
#footer.dark { border-top: none; }

#footer h4 {
	color: #333;
	font-size: 21px;
	margin-bottom: 25px;
}

.footer-shadow {
	width: 100%;
	display: block;
	background: #fff;
	height: 200px;
	margin-top: -200px;
	position: relative;
	z-index: -1;
	box-shadow: 0 20px 40px -20px rgba(0,0,0,0.06);
}

.text-widget span { color: #707070; }
.text-widget span.address { display: block; margin-bottom: 10px;}

#footer a {
	color: #66676b;
}

/*  Links  */
#footer ul.footer-links {
	margin: 0 0 15px 0;
	padding: 0;
	width: 50%;
	box-sizing: border-box;
	display: inline-block;
	float: left;
}

#footer .footer-links li { position: relative; list-style: none; }

#footer .footer-links li a {
	padding: 0 0 9px 16px;
	display: inline-block;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #707070;
	line-height: 21px;
}

#footer .footer-links li a:hover {
	padding-left:22px;
	color: #66676b;
}

#footer .footer-links li:before {
	font-family: "FontAwesome";
	font-size: 20px;
	content: "\f105";
	position: absolute;
	left: 0;
	top: -2px;
	padding: 0 7px 0 0;
	color: #ccc;
}

/* Footer Bottom */
.copyrights {
	color: #707070;
	border-top: 1px solid rgba(0,0,0,0.09);
	margin-top: 60px;
	text-align: center;
	padding: 40px 0;
	display: inline-block;
	width: 100%;
}

#footer.alt .copyrights {
	margin-top:0;
	border: none;
	padding: 25px;
}

.copyrights a { color: #707070; }

/* Dark Styles */
#footer.dark {
	background: #222;
	color: #aaa;
}

#footer.dark a,
#footer.dark h4,
#footer.dark a:hover {
	color: #fff;
}

#footer.dark .text-widget,
#footer.dark .text-widget span,
#footer.dark .footer-links li a {
	color: #aaa;
}

#footer.dark .footer-links li a:hover { color: #fff; }
#footer.dark .footer-links li:before { color: #666; }

#footer.dark .copyrights {
	color: #aaa;
	border-top: 1px solid rgba(255,255,255,0.09);
}

#footer .social-icons li a {
    opacity: 0.8;
    transition: opacity 0.35s;
}

#footer .social-icons li a:hover { opacity: 1; }

/* Back to top
------------------------------------- */
#backtotop {
	position: fixed;
	right: 0;
	opacity: 0;
	visibility: hidden;
	bottom: 25px;
	margin: 0 25px 0 0;
	z-index: 999;
	transition: 0.35s;
	transform: scale(0.7);
}

#backtotop.visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

#backtotop a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 46px;
	height: 46px;
	background-color: #66676b;
	opacity: 1;
    transition: all 0.3s;
    border-radius: 50%;
    text-align: center;
    font-size: 26px
}

body #backtotop a { color: #fff; }

#backtotop a:after {
	content: "\f106";
	font-family: "FontAwesome";
	position: relative;
	display: block;
	top: 50%;
	-webkit-transform: translateY(-55%);
	transform: translateY(-55%);
}

/* Navigation
------------------------------------- */

#navigation {
	position: relative;
	display: block;
}

#navigation ul {
	list-style: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}

#navigation ul a {
	display: block;
	text-decoration: none;
}

#navigation ul li {
	position: relative;
	float: left;
	margin: 0;
	padding: 0
}

#navigation ul li ul {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0;
	z-index: 99999;
}

#navigation ul ul li { float: none; }

#navigation ul ul ul {
	top: 0;
	left: 100%;
	margin: 0;
}

#navigation ul ul {
	margin: 10px 0 0 15px;
}

#navigation ul ul:before {
	content: "";
	position: absolute;
	left: 0;
	top: -10px;
	background: rgba(255,255,255,0);
	width: 100%;
	height: 10px;
}

#navigation ul ul ul:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 100%;
	left: -10px;
	top: 0;
	opacity: 0;
}

#navigation ul li:hover > ul {
	opacity: 1;
	visibility: visible;
}

/* Indicator Arrow */
#navigation ul li a:after,
#navigation ul ul li a:after {
	font-family: "FontAwesome";
	opacity: 0.5;
}

#navigation ul li a:after { content: '\f107'; padding-left: 7px; }
#navigation ul ul li a:after {
	content: '\f105';
	position: absolute;
	right: 15px;
	top: 7px;
}

#navigation ul li a:only-child:after { content: ''; padding: 0; }
#navigation ul ul li a:only-child:after { content: '';}

/* Dropdown Styles
------------------------------------- */
#navigation ul ul {
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	border-radius: 4px;
	font-size: 15px;
}

#navigation ul ul li { border-radius: 4px; }
#navigation ul ul li:last-child { border-bottom: none; }

#navigation ul li:hover ul a,
#navigation ul ul a {
	line-height: 27px !important;
	padding: 4px 40px 4px 15px !important;
	line-height: 24px !important;
}

body #navigation ul ul {
	padding: 12px 10px;
	box-sizing: border-box;
}

#navigation ul ul li { width: 180px; }

#navigation ul ul li:hover {
	border-radius: 0;
}

#navigation ul ul li:first-child { border-radius: 4px 4px 0 0; }
#navigation ul ul li:last-child { border-radius: 0 0 4px 4px; }

#navigation ul ul {
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s;
	transform: translate3d(0,15px,0);
}

#navigation ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0,0,0);
}

/* Menu
------------------------------------- */
#navigation.style-1 .current {
	background-color: transparent;
	color: #66676b;
}

#navigation.style-1 { margin-top: 1px; }

#navigation.style-1 .current:after { opacity: 1; }

#navigation.style-1 ul li {
	transition: all 0.25s;
}

#navigation.style-1 ul li a { color: #444; cursor: pointer; }
body .user-menu ul li a:hover,
#navigation.style-1 ul li:hover a { color: #66676b; }

#navigation.style-1 ul a {
	line-height: 32px;
	padding: 5px 15px;
}

#navigation.style-1 ul li { margin: 0 5px; }

#navigation.style-1 ul ul li { margin: 0; border-radius: 0; }

#navigation.style-1 ul ul li:first-child { border-radius: 4px 4px 0 0; }
#navigation.style-1 ul ul li:last-child { border-radius: 0 0 4px 4px; }

/* Indicator Arrow */
#navigation ul ul li a:after {
	opacity: 0.5;
	transition: all 0.25s;
	transform: translateX(-5px);
}

#navigation ul ul li:hover a:after {
	opacity: 1;
	transform: translateX(0);
}

/* Menu Hovers */
#navigation.style-1 ul li a {
	transition: 0.4s;
	border-radius: 50px;
	font-size: 15px;
}

#navigation.style-1 > ul > li > a.current,
#navigation.style-1 > ul > li:hover > a { 
	background: rgba(102, 103, 107, 0.06);
	color: #66676b;
}

#navigation.style-1 ul li li a { background: #fff !important }
#navigation.style-1 ul a {padding: 2px 15px;}
#navigation ul ul { margin: 10px 0 0 0; }
#navigation.style-1 ul li { margin: 0 3px; }
#navigation.style-1 { margin-top: 4px; }

body #navigation ul .mega-menu:not(.mm-panel) ul a,
body #navigation.style-1 ul ul li { opacity: 1; }

body #navigation.style-1 ul ul li a:after,
body #navigation.style-1 ul li:hover ul li a,
body #navigation.style-1 ul li:hover ul li:hover li a,
body #navigation.style-1 ul li:hover ul li:hover li:hover li a,
body #navigation.style-1 ul ul li:hover ul li a { color: #666; }

body #navigation.style-1 ul ul li:hover a:after,
body #navigation.style-1 ul li:hover ul li:hover a,
body #navigation.style-1 ul li:hover ul li:hover li:hover a,
body #navigation.style-1 ul li:hover ul li:hover li:hover li:hover a,
body #navigation.style-1 ul ul li:hover ul li a:hover { color: #66676b; }

/* Mega Menu
------------------------------------- */
.mega-menu {
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s;
	position: absolute;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	border-radius: 4px;
	font-size: 15px;
	display: flex;
	top: 100%;
	left: 0;
	padding: 20px 0;
	box-sizing: border-box;
	font-size: 14px;
	margin-top: -2px;
	background-color: #fff;
	width: 200px;
	z-index: 99;
	transform: translate3d(-42%,24px,0);
}

.mega-menu:before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	display: block;
	width: 100%;
	height: 12px;
	opacity: 0;
}

#navigation ul li .mega-menu ul { 
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0,0,0);
	position: relative;
	display: inline-block;
	flex: 1;
	padding: 0;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
	top: auto;
	left: auto;
	background-color: transparent;
}

#navigation ul li:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translate3d(-42%,12px,0);
}

#navigation ul li:hover .mega-menu ul {
	opacity: 1;
	visibility: visible;
}

#navigation .mega-menu ul,
#navigation .mega-menu ul li {
	width: 100%;
	opacity: 1 !important;
}

.mega-menu.two-columns    { width: 429px;}
.mega-menu.three-columns  { width: 643px;}
.mega-menu.four-columns   { width: 857px;}

#navigation ul .mega-menu ul a {
	color: #444;
	padding: 0 !important;
	display: block;
	margin-left: 0;
	-wekkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity: 0.8;
}

#navigation ul .mega-menu ul a:hover {
	opacity: 1;
}

#navigation ul li:hover .mega-menu ul a, 
#navigation ul .mega-menu ul a {
    padding: 5px 0 !important;
    line-height: 22px !important;
    transform: translate3d(0,0,0) !important;
}

#navigation .mega-menu ul li {
	padding: 0 30px;
}

#navigation ul li a i {
	font-size: 14px;
	position: relative;
	top: 0;
	padding-right: 5px;
}

.mega-menu-section {
	display: inline-block;
	float: left;
	width: 214px;
	padding: 0;
	border-right: 1px solid #e9e9e9;
}

.mega-menu .mega-menu-section:last-child { border: none; }

.mega-menu-headline {
	color: #222;
	opacity: 1 !important;
	font-weight: 600;
	display: block;
	padding: 8px 30px !important;
	letter-spacing: 0;
	font-size: 14px;
	line-height: 21px;
}

/* Some mega menu styles for mobile nav */
.mobile-styles .mm-listview { margin: 0px -20px !important; }
.mobile-styles .mm-listview .mega-menu-headline { color: #fff; padding: 15px 20px !important; background: #222 !important; }
.mobile-styles .mm-listview li a i { padding-right: 5px; }
.mobile-styles.mm-panel:before { height: 10px !important; }

/* Flickering Fix */
#navigation ul li .mega-menu ul,
#navigation ul li ul { z-index: 100; }
#navigation ul li:hover .mega-menu,
#navigation ul li:hover ul { z-index: 200; }

/* User Menu
------------------------------------- */
.user-menu {
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin-right: 25px;
	top: 9px;
	vertical-align: top;
	padding-left: 25px;
	margin-left: 25px;
}

.user-menu .user-name { transition: 0.2s; }

/*
.user-menu .user-name {
	transition: 0.2s;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}*/

.user-menu .user-name:after {
	content: "\f107";
	font-family: "FontAwesome";
	transition: 0.2s;
	transform: rotate(0deg);
	display: inline-block;
	margin-left: 6px;
	color: #aaa;
}

.user-menu.active .user-name:after,
.user-menu:hover .user-name:after,
.user-menu.active .user-name,
.user-menu:hover .user-name {
	color: #66676b;
}

.user-menu.active .user-name:after { transform: rotate(180deg); }

/* username links straight to the dashboard — no dropdown, no caret */
.user-menu.no-dropdown { cursor: pointer; }
.user-menu.no-dropdown .user-name:after { display: none; }
.user-menu.no-dropdown ul { display: none !important; }

/* Avatar */
.user-name span img {
	width: 100%;
	display: inline-block;
	border-radius: 50%;
	image-rendering: -webkit-optimize-contrast;
}

.user-name span {
	display: inline-block;
	width: 38px;
	height: 38px;
	margin-right: 10px;
	border-radius: 50%;
	position: absolute;
	left: -22px;
	top: -5px;
}

.user-menu ul {
	float: left;
	text-align: left;
	position: absolute;
	top: 45px;
	right: 0;
	list-style: none;
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	border-radius: 4px;
	display: inline-block;
	width: 180px;
	font-size: 15px;
	transform: translate3d(0,15px,0);
	padding: 12px 10px;
	box-sizing: border-box;
	transition: 0.25s;
	visibility: hidden;
	opacity: 0;
	z-index: 110;
}

.user-menu ul li a {
	padding: 6px 15px;
	line-height: 22px;
	display: inline-block;
	color: #696969;
	transition: 0.2s;
}

.user-menu ul li a:hover {
	color: #444;
}

.user-menu ul li a i {
	width: 20px;
	position: relative;
	display: inline-block;
}

.user-menu.active ul {
	visibility: visible;
	opacity: 1;
	transform: translate3d(0,0,0);
}

.user-name span:after {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    background-color: #38b653;
    bottom: 0;
    right: 0;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    border-radius: 50%;
}

/* User Menu Avatar Border */
.user-name span img {
    border: 3px solid #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    box-sizing: content-box;
}

.user-name span {
	width: 35px;
	height: 35px;
	left: -28px;
	top: -8px;
}

.user-name span:after {
    bottom: -6px;
    right: -6px;
}

@media (max-width: 380px) {
    .user-name span:after {
        bottom: -3px;
        right: -6px;
    }   
}

body .dashboard-nav ul li a i.fa.fa-calendar-check-o:before,
body .user-menu ul li a i.fa.fa-calendar-check-o:before {
	content: "\e040";
	font-family: "simple-line-icons"
}

@media (max-width: 360px) {
	.user-menu .user-name {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    max-width: 0;
	}
}

/*!
 * mmenu.js
 * mmenujs.com
 *
 * Copyright (c) Fred Heusschen
 * frebsite.nl
 *
 * License: CC-BY-NC-4.0
 * http://creativecommons.org/licenses/by-nc/4.0/
 */

:root {
    --mm-line-height: 18px;
    --mm-listitem-size: 44px;
    --mm-navbar-size: 44px;
    --mm-offset-top: 0;
    --mm-offset-right: 0;
    --mm-offset-bottom: 0;
    --mm-offset-left: 0;
    --mm-color-border: #404040;
    --mm-color-button: rgba(255,255,255,0.8);
    --mm-color-text: rgba( 255, 255, 255, 0.75);
    --mm-color-text-dimmed: rgba( 255, 255, 255, 0.4);
    --mm-color-background: #2a2a2a;
    --mm-color-background-highlight: rgba( 255, 255, 255, 0.2);
    --mm-color-background-emphasis: rgba( 255, 255, 255, 0.15);
    --mm-shadow: none;
}

.mm-hidden {
    display: none!important
}

.mm-wrapper {
    overflow-x: hidden;
    position: relative
}

.mm-menu {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f3f3f3;
    border-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    line-height: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: var(--mm-offset-top);
    right: var(--mm-offset-right);
    bottom: var(--mm-offset-bottom);
    left: var(--mm-offset-left);
    z-index: 0;
    background: var(--mm-color-background);
    border-color: var(--mm-color-border);
    color: var(--mm-color-text);
    line-height: var(--mm-line-height);
    -webkit-tap-highlight-color: var(--mm-color-background-emphasis);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.mm-menu a,
.mm-menu a:active,
.mm-menu a:hover,
.mm-menu a:link,
.mm-menu a:visited {
    text-decoration: none;
    color: #fff;
}

[dir=rtl] .mm-menu {
    direction: rtl
}

.mm-panel {
    background: #f3f3f3;
    border-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    z-index: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--mm-color-background);
    border-color: var(--mm-color-border);
    color: var(--mm-color-text);
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;

}

.mm-panel:after {
    height: 44px
}

.mm-panel:not(.mm-hidden) {
    display: block
}

.mm-panel:after {
    content: '';
    display: block;
    height: var(--mm-listitem-size)
}

.mm-panel_opened {
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-panel_opened-parent {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0)
}

.mm-panel_highest {
    z-index: 2
}

.mm-panel_noanimation {
    -webkit-transition: none!important;
    -o-transition: none!important;
    transition: none!important
}

.mm-panel_noanimation.mm-panel_opened-parent {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-panels>.mm-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.mm-panel__content {
    padding: 20px 20px 0
}

.mm-panels {
    background: #f3f3f3;
    border-color: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    position: relative;
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    overflow: hidden;
    background: var(--mm-color-background);
    border-color: var(--mm-color-border);
    color: var(--mm-color-text);
}

[dir=rtl] .mm-panel:not(.mm-panel_opened) {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

[dir=rtl] .mm-panel.mm-panel_opened-parent {
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0)
}

.mm-listitem_vertical>.mm-panel {
    display: none;
    width: 100%;
    padding: 10px 0 10px 10px;
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important
}

.mm-listitem_vertical>.mm-panel:after,
.mm-listitem_vertical>.mm-panel:before {
    content: none;
    display: none
}

.mm-listitem_opened>.mm-panel {
    display: block
}

.mm-listitem_vertical>.mm-listitem__btn {
    height: 44px;
    height: var(--mm-listitem-size);
    bottom: auto
}

.mm-listitem_vertical .mm-listitem:last-child:after {
    border-color: transparent
}

.mm-listitem_opened>.mm-listitem__btn:after {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    right: 19px
}

.mm-btn {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50px;
    padding: 0
}

.mm-btn:after,
.mm-btn:before {
    border: 2px solid rgba(0, 0, 0, .3);
    border: 2px solid var(--mm-color-button)
}

.mm-btn_next:after,
.mm-btn_prev:before {
    content: '';
    border-bottom: none;
    border-right: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    width: 6px;
    height: 6px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0
}

.mm-btn_prev:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 23px;
    right: auto
}

.mm-btn_next:after {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 23px;
    left: auto
}

.mm-btn_close:after,
.mm-btn_close:before {
    content: '';
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    width: 5px;
    height: 5px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.mm-btn_close:before {
    border-right: none;
    border-bottom: none;
    right: 18px
}

.mm-btn_close:after {
    border-left: none;
    border-top: none;
    right: 25px
}

[dir=rtl] .mm-btn_next:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 23px;
    right: auto
}

[dir=rtl] .mm-btn_prev:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 23px;
    left: auto
}

[dir=rtl] .mm-btn_close:after,
[dir=rtl] .mm-btn_close:before {
    right: auto
}

[dir=rtl] .mm-btn_close:before {
    left: 25px
}

[dir=rtl] .mm-btn_close:after {
    left: 18px
}

.mm-navbar {
    min-height: 44px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background: #f3f3f3;
    color: rgba(0, 0, 0, .3);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: var(--mm-navbar-size);
    border-bottom: 1px solid var(--mm-color-border);
    background: var(--mm-color-background);
    color: var(--mm-color-text-dimmed);
    text-align: center;
    opacity: 1;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease;
    background: #262626;
}

.mm-navbar>* {
    min-height: 44px
}

@supports ((position:-webkit-sticky) or (position:sticky)) {
    .mm-navbar_sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1
    }
}

.mm-navbar>* {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mm-navbar__btn {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0
}

.mm-navbar__title {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden
}

.mm-navbar__title:not(:last-child) {
    padding-right: 0
}

.mm-navbar__title>span {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
	font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.mm-navbar__btn:not(.mm-hidden)+.mm-navbar__title {
    padding-left: 0
}

.mm-navbar__btn:not(.mm-hidden)+.mm-navbar__title:last-child {
    padding-right: 50px
}

[dir=rtl] .mm-navbar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.mm-listview {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0
}

.mm-listitem {
    color: rgba(0, 0, 0, .75);
    border-color: transparent;
    color: var(--mm-color-text);
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.mm-listitem:after {
    content: '';
    border-color: inherit;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: block;
    position: absolute;
    left: 20px;
    right: 0;
    bottom: 0
}

.mm-listitem a,
.mm-listitem a:hover {
    text-decoration: none
}

.mm-listitem__btn,
.mm-listitem__text {
    padding: 12px;
    display: block;
    padding: calc((var(--mm-listitem-size) - var(--mm-line-height))/ 2);
    padding-left: 0;
    padding-right: 0;
    color: inherit
}

.mm-listitem__text {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 65px;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    border-bottom: 1px solid transparent;
   border-bottom-color: var(--mm-color-border);
   font-size: 14px;
   color: #fff;
}

.mm-listitem__btn {
    background: rgba(3, 2, 1, 0);
    border-color: inherit;
    width: auto;
    padding-right: 50px;
    position: absolute;
    width: 100%;
}

/*.mm-listitem__btn {
    background: rgba(3, 2, 1, 0);
    border-color: inherit;
    width: auto;
    padding-right: 50px;
    position: relative
}*/

.mm-listitem__btn:not(.mm-listitem__text) {
    border-left-width: none;
    border-left-style: solid
}

.mm-listitem_selected>.mm-listitem__text {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

.mm-listitem_opened>.mm-listitem__btn,
.mm-listitem_opened>.mm-panel {
    background: rgba(0, 0, 0, .05);
    background: var(--mm-color-background-highlight)
}

[dir=rtl] .mm-listitem:after {
    left: 0;
    right: 20px
}

[dir=rtl] .mm-listitem__text {
    padding-left: 10px;
    padding-right: 20px
}

[dir=rtl] .mm-listitem__btn {
    padding-left: 50px;
    border-left-width: 0;
    border-left-style: none
}

[dir=rtl] .mm-listitem__btn:not(.mm-listitem__text) {
    padding-right: 0;
    border-right-width: 1px;
    border-right-style: solid
}

.mm-page {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

.mm-slideout {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    z-index: 1
}

.mm-wrapper_opened {
    overflow-x: hidden;
    position: relative
}

.mm-wrapper_opened .mm-page {
    min-height: 100vh
}

.mm-wrapper_background .mm-page {
    background: inherit
}

.mm-menu_offcanvas {
    position: fixed;
    right: auto;
    z-index: 0
}

.mm-menu_offcanvas:not(.mm-menu_opened) {
    display: none
}

.mm-panels,
.mm-panel,
.mm-menu_offcanvas {
    width: 80vw;
    min-width: 240px;
    max-width: 440px;
}

.mm-wrapper_opening .mm-menu_offcanvas~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_offcanvas~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:550px) {
    .mm-wrapper_opening .mm-menu_offcanvas~.mm-slideout {
        -webkit-transform: translate3d(440px, 0, 0);
        transform: translate3d(440px, 0, 0)
    }
}

.mm-wrapper__blocker {
    background: rgba(3, 2, 1, 0);
    overflow: hidden;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.mm-wrapper_blocking {
    overflow: hidden
}

.mm-wrapper_blocking body {
    overflow: hidden
}

.mm-wrapper_blocking .mm-wrapper__blocker {
    display: block
}

.mm-sronly {
    border: 0!important;
    clip: rect(1px, 1px, 1px, 1px)!important;
    -webkit-clip-path: inset(50%)!important;
    clip-path: inset(50%)!important;
    white-space: nowrap!important;
    width: 1px!important;
    min-width: 1px!important;
    height: 1px!important;
    min-height: 1px!important;
    padding: 0!important;
    overflow: hidden!important;
    position: absolute!important
}

.mm-menu_autoheight:not(.mm-menu_offcanvas) {
    position: relative
}

.mm-menu_autoheight.mm-menu_position-bottom,
.mm-menu_autoheight.mm-menu_position-top {
    max-height: 80%
}

.mm-menu_autoheight-measuring .mm-panel {
    display: block!important
}

.mm-menu_autoheight-measuring .mm-panels>.mm-panel {
    bottom: auto!important;
    height: auto!important
}

.mm-menu_autoheight-measuring .mm-listitem_vertical:not(.mm-listitem_opened) .mm-panel {
    display: none!important
}

[class*=mm-menu_columns-] {
    -webkit-transition-property: width;
    -o-transition-property: width;
    transition-property: width
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel {
    right: auto;
    -webkit-transition-property: width, -webkit-transform;
    transition-property: width, -webkit-transform;
    -o-transition-property: width, transform;
    transition-property: width, transform;
    transition-property: width, transform, -webkit-transform
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_opened,
[class*=mm-menu_columns-] .mm-panels>.mm-panel_opened-parent {
    display: block!important
}

[class*=mm-panel_columns-] {
    border-right: 1px solid;
    border-color: inherit
}

.mm-menu_columns-1 .mm-panel_columns-0,
.mm-menu_columns-2 .mm-panel_columns-1,
.mm-menu_columns-3 .mm-panel_columns-2,
.mm-menu_columns-4 .mm-panel_columns-3 {
    border-right: none
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_columns-0 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu_columns-0 .mm-panels>.mm-panel {
    z-index: 0
}

.mm-menu_columns-0 .mm-panels>.mm-panel else {
    width: 100%
}

.mm-menu_columns-0 .mm-panels>.mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.mm-menu_columns-0 {
    width: 80%;
    min-width: 240px;
    max-width: 0
}

.mm-wrapper_opening .mm-menu_columns-0~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-0~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:0px) {
    .mm-wrapper_opening .mm-menu_columns-0~.mm-slideout {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_columns-0.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-0.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:0px) {
    .mm-wrapper_opening .mm-menu_columns-0.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_columns-1 {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.mm-menu_columns-1 .mm-panels>.mm-panel {
    z-index: 1;
    width: 100%
}

.mm-menu_columns-1 .mm-panels>.mm-panel else {
    width: 100%
}

.mm-menu_columns-1 .mm-panels>.mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0)
}

.mm-menu_columns-1 {
    width: 80%;
    min-width: 240px;
    max-width: 440px
}

.mm-wrapper_opening .mm-menu_columns-1~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-1~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:550px) {
    .mm-wrapper_opening .mm-menu_columns-1~.mm-slideout {
        -webkit-transform: translate3d(440px, 0, 0);
        transform: translate3d(440px, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_columns-1.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-1.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:550px) {
    .mm-wrapper_opening .mm-menu_columns-1.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-440px, 0, 0);
        transform: translate3d(-440px, 0, 0)
    }
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_columns-2 {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0)
}

.mm-menu_columns-2 .mm-panels>.mm-panel {
    z-index: 2;
    width: 50%
}

.mm-menu_columns-2 .mm-panels>.mm-panel else {
    width: 100%
}

.mm-menu_columns-2 .mm-panels>.mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
    -webkit-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0)
}

.mm-menu_columns-2 {
    width: 80%;
    min-width: 240px;
    max-width: 880px
}

.mm-wrapper_opening .mm-menu_columns-2~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-2~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:1100px) {
    .mm-wrapper_opening .mm-menu_columns-2~.mm-slideout {
        -webkit-transform: translate3d(880px, 0, 0);
        transform: translate3d(880px, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_columns-2.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-2.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:1100px) {
    .mm-wrapper_opening .mm-menu_columns-2.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-880px, 0, 0);
        transform: translate3d(-880px, 0, 0)
    }
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_columns-3 {
    -webkit-transform: translate3d(300%, 0, 0);
    transform: translate3d(300%, 0, 0)
}

.mm-menu_columns-3 .mm-panels>.mm-panel {
    z-index: 3;
    width: 33.34%
}

.mm-menu_columns-3 .mm-panels>.mm-panel else {
    width: 100%
}

.mm-menu_columns-3 .mm-panels>.mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
    -webkit-transform: translate3d(400%, 0, 0);
    transform: translate3d(400%, 0, 0)
}

.mm-menu_columns-3 {
    width: 80%;
    min-width: 240px;
    max-width: 1320px
}

.mm-wrapper_opening .mm-menu_columns-3~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-3~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:1650px) {
    .mm-wrapper_opening .mm-menu_columns-3~.mm-slideout {
        -webkit-transform: translate3d(1320px, 0, 0);
        transform: translate3d(1320px, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_columns-3.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-3.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:1650px) {
    .mm-wrapper_opening .mm-menu_columns-3.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-1320px, 0, 0);
        transform: translate3d(-1320px, 0, 0)
    }
}

[class*=mm-menu_columns-] .mm-panels>.mm-panel_columns-4 {
    -webkit-transform: translate3d(400%, 0, 0);
    transform: translate3d(400%, 0, 0)
}

.mm-menu_columns-4 .mm-panels>.mm-panel {
    z-index: 4;
    width: 25%
}

.mm-menu_columns-4 .mm-panels>.mm-panel else {
    width: 100%
}

.mm-menu_columns-4 .mm-panels>.mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
    -webkit-transform: translate3d(500%, 0, 0);
    transform: translate3d(500%, 0, 0)
}

.mm-menu_columns-4 {
    width: 80%;
    min-width: 240px;
    max-width: 1760px
}

.mm-wrapper_opening .mm-menu_columns-4~.mm-slideout {
    -webkit-transform: translate3d(80vw, 0, 0);
    transform: translate3d(80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-4~.mm-slideout {
        -webkit-transform: translate3d(240px, 0, 0);
        transform: translate3d(240px, 0, 0)
    }
}

@media all and (min-width:2200px) {
    .mm-wrapper_opening .mm-menu_columns-4~.mm-slideout {
        -webkit-transform: translate3d(1760px, 0, 0);
        transform: translate3d(1760px, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_columns-4.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_columns-4.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:2200px) {
    .mm-wrapper_opening .mm-menu_columns-4.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-1760px, 0, 0);
        transform: translate3d(-1760px, 0, 0)
    }
}

[class*=mm-menu_columns-].mm-menu_position-bottom,
[class*=mm-menu_columns-].mm-menu_position-top {
    width: 100%;
    max-width: 100%;
    min-width: 100%
}

.mm-wrapper_opening [class*=mm-menu_columns-].mm-menu_position-front {
    -webkit-transition-property: width, min-width, max-width, -webkit-transform;
    transition-property: width, min-width, max-width, -webkit-transform;
    -o-transition-property: width, min-width, max-width, transform;
    transition-property: width, min-width, max-width, transform;
    transition-property: width, min-width, max-width, transform, -webkit-transform
}

.mm-counter {
    color: rgba(0, 0, 0, .3);
    display: block;
    padding-left: 20px;
    float: right;
    text-align: right;
    color: var(--mm-color-text-dimmed);
    background-color: #ffffff37;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    line-height: 19px;
    font-size: 10px;
    font-weight: 600;
    padding: 0;
    position: relative;
    right: -10px;
}

.mm-listitem_nosubitems>.mm-counter {
    display: none
}

[dir=rtl] .mm-counter {
    text-align: left;
    float: left;
    padding-left: 0;
    padding-right: 20px
}

.mm-divider {
    position: relative;
    min-height: 20px;
    padding: 4.3px;
    background: #f3f3f3;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-height: var(--mm-line-height);
    padding: calc(((var(--mm-listitem-size) * .65) - var(--mm-line-height)) * .5);
    padding-right: 10px;
    padding-left: 20px;
    font-size: 75%;
    text-transform: uppercase;
    background: var(--mm-color-background);
    opacity: 1;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.mm-divider:before {
    background: rgba(0, 0, 0, .05)
}

@supports ((position:-webkit-sticky) or (position:sticky)) {
    .mm-divider {
        position: -webkit-sticky;
        position: sticky;
        z-index: 2;
        top: 0
    }
    .mm-navbar_sticky:not(.mm-hidden)~.mm-listview .mm-divider {
        top: var(--mm-navbar-size)
    }
}

.mm-divider:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: var(--mm-color-background-highlight)
}

.mm-wrapper_dragging .mm-menu,
.mm-wrapper_dragging .mm-slideout {
    -webkit-transition-duration: 0s!important;
    -o-transition-duration: 0s!important;
    transition-duration: 0s!important;
    -webkit-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important
}

.mm-wrapper_dragging .mm-menu {
    pointer-events: none!important
}

.mm-wrapper_dragging .mm-wrapper__blocker {
    display: none!important
}

.mm-menu_dropdown {
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    height: 80%
}

.mm-wrapper_dropdown .mm-slideout {
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important;
    z-index: 0
}

.mm-wrapper_dropdown .mm-wrapper__blocker {
    -webkit-transition-delay: 0s!important;
    -o-transition-delay: 0s!important;
    transition-delay: 0s!important;
    z-index: 1
}

.mm-wrapper_dropdown .mm-menu_dropdown {
    z-index: 2
}

.mm-wrapper_dropdown.mm-wrapper_opened:not(.mm-wrapper_opening) .mm-menu_dropdown {
    display: none
}

.mm-menu_tip-bottom:before,
.mm-menu_tip-left:before,
.mm-menu_tip-right:before,
.mm-menu_tip-top:before {
    content: '';
    background: inherit;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    z-index: -1;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.mm-menu_tip-left:before {
    left: 22px
}

.mm-menu_tip-right:before {
    right: 22px
}

.mm-menu_tip-top:before {
    top: -8px
}

.mm-menu_tip-bottom:before {
    bottom: -8px
}

:root {
    --mm-iconbar-size: 50px
}

.mm-menu_iconbar-left .mm-navbars_bottom,
.mm-menu_iconbar-left .mm-navbars_top,
.mm-menu_iconbar-left .mm-panels {
    margin-left: 50px;
    margin-left: var(--mm-iconbar-size)
}

.mm-menu_iconbar-left .mm-iconbar {
    border-right-width: 1px;
    display: block;
    left: 0
}

.mm-menu_iconbar-right .mm-navbars_bottom,
.mm-menu_iconbar-right .mm-navbars_top,
.mm-menu_iconbar-right .mm-panels {
    margin-right: 50px;
    margin-right: var(--mm-iconbar-size)
}

.mm-menu_iconbar-right .mm-iconbar {
    border-left-width: 1px;
    display: block;
    right: 0
}

.mm-iconbar {
    width: 50px;
    border-color: rgba(0, 0, 0, .1);
    background: #f3f3f3;
    color: rgba(0, 0, 0, .3);
    display: none;
    width: var(--mm-iconbar-size);
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    border: 0 solid;
    border-color: var(--mm-color-border);
    background: var(--mm-color-background);
    color: var(--mm-color-text-dimmed);
    text-align: center
}

.mm-iconbar__bottom,
.mm-iconbar__top {
    width: inherit;
    position: absolute
}

.mm-iconbar__bottom>*,
.mm-iconbar__top>* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    padding: 12.5px 0
}

.mm-iconbar__bottom a,
.mm-iconbar__bottom a:hover,
.mm-iconbar__top a,
.mm-iconbar__top a:hover {
    text-decoration: none
}

.mm-iconbar__top {
    top: 0
}

.mm-iconbar__bottom {
    bottom: 0
}

.mm-iconbar__tab_selected {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

:root {
    --mm-iconpanel-size: 50px
}

.mm-panel_iconpanel-1 {
    width: calc(100% - 50px);
    width: calc(100% - (var(--mm-iconpanel-size) * 1))
}

.mm-panel_iconpanel-2 {
    width: calc(100% - 100px);
    width: calc(100% - (var(--mm-iconpanel-size) * 2))
}

.mm-panel_iconpanel-3 {
    width: calc(100% - 150px);
    width: calc(100% - (var(--mm-iconpanel-size) * 3))
}

.mm-panel_iconpanel-first~.mm-panel {
    width: calc(100% - 50px);
    width: calc(100% - var(--mm-iconpanel-size))
}

.mm-menu_iconpanel .mm-panels>.mm-panel {
    left: auto;
    -webkit-transition-property: width, -webkit-transform;
    transition-property: width, -webkit-transform;
    -o-transition-property: transform, width;
    transition-property: transform, width;
    transition-property: transform, width, -webkit-transform
}

.mm-menu_iconpanel .mm-panels>.mm-panel_opened,
.mm-menu_iconpanel .mm-panels>.mm-panel_opened-parent {
    display: block!important
}

.mm-menu_iconpanel .mm-panels>.mm-panel_opened-parent {
    overflow-y: hidden;
    -webkit-transform: unset;
    -ms-transform: unset;
    transform: unset
}

.mm-menu_iconpanel .mm-panels>.mm-panel:not(.mm-panel_iconpanel-first):not(.mm-panel_iconpanel-0) {
    border-left-width: 1px;
    border-left-style: solid
}

.mm-menu_hidedivider .mm-panel_opened-parent .mm-divider,
.mm-menu_hidenavbar .mm-panel_opened-parent .mm-navbar {
    opacity: 0
}

.mm-panel__blocker {
    background: inherit;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease
}

.mm-panel_opened-parent .mm-panel__blocker {
    opacity: .6;
    bottom: -100000px
}

[dir=rtl] .mm-menu_iconpanel .mm-panels>.mm-panel {
    left: 0;
    right: auto;
    -webkit-transition-property: width, -webkit-transform;
    transition-property: width, -webkit-transform;
    -o-transition-property: transform, width;
    transition-property: transform, width;
    transition-property: transform, width, -webkit-transform
}

[dir=rtl] .mm-menu_iconpanel .mm-panels>.mm-panel:not(.mm-panel_iconpanel-first):not(.mm-panel_iconpanel-0) {
    border-left: none;
    border-right: 1px solid;
    border-color: inherit
}

.mm-menu_keyboardfocus a:focus,
.mm-menu_keyboardfocus.mm-menu_opened~.mm-wrapper__blocker a:focus {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis);
    outline: 0
}

.mm-wrapper__blocker .mm-tabstart {
    cursor: default;
    display: block;
    width: 100%;
    height: 100%
}

.mm-wrapper__blocker .mm-tabend {
    opacity: 0;
    position: absolute;
    bottom: 0
}

.mm-navbars_top {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mm-navbars_top .mm-navbar:not(:last-child) {
    border-bottom: none
}

.mm-navbars_bottom {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.mm-navbars_bottom .mm-navbar {
    border-bottom: none
}

.mm-navbars_bottom .mm-navbar:first-child {
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-top: 1px solid var(--mm-color-border)
}

.mm-btn:not(.mm-hidden)+.mm-navbar__searchfield .mm-searchfield__input {
    padding-left: 0
}

.mm-navbar__searchfield:not(:last-child) .mm-searchfield__input {
    padding-right: 0
}

.mm-navbar__breadcrumbs {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.mm-navbar__breadcrumbs>* {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-right: 6px
}

.mm-navbar__breadcrumbs>a {
    text-decoration: underline
}

.mm-navbar__breadcrumbs:not(:last-child) {
    padding-right: 0
}

.mm-btn:not(.mm-hidden)+.mm-navbar__breadcrumbs {
    padding-left: 0
}

.mm-navbar_tabs>* {
    padding: 0 10px;
    border: 1px solid transparent
}

.mm-navbar__tab_selected {
    background: #f3f3f3;
    color: rgba(0, 0, 0, .75);
    background: var(--mm-color-background);
    color: var(--mm-color-text)
}

.mm-navbar__tab_selected:not(:first-child) {
    border-left-color: rgba(0, 0, 0, .1)
}

.mm-navbar__tab_selected:not(:last-child) {
    border-right-color: rgba(0, 0, 0, .1)
}

.mm-navbar__tab_selected:not(:first-child) {
    border-left-color: var(--mm-color-border)
}

.mm-navbar__tab_selected:not(:last-child) {
    border-right-color: var(--mm-color-border)
}

.mm-navbars_top .mm-navbar_tabs {
    border-bottom: none
}

.mm-navbars_top .mm-navbar_tabs>* {
    border-bottom-color: rgba(0, 0, 0, .1);
    border-bottom-color: var(--mm-color-border)
}

.mm-navbars_top .mm-navbar__tab_selected {
    border-top-color: rgba(0, 0, 0, .1);
    border-top-color: var(--mm-color-border);
    border-bottom-color: transparent
}

.mm-navbars_top.mm-navbars_has-tabs .mm-navbar {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

.mm-navbars_top.mm-navbars_has-tabs .mm-navbar_tabs~.mm-navbar {
    background: #f3f3f3;
    background: var(--mm-color-background)
}

.mm-navbars_bottom .mm-navbar_tabs:first-child {
    border-top: none
}

.mm-navbars_bottom .mm-navbar_tabs>* {
    border-top-color: rgba(0, 0, 0, .1);
    border-top-color: var(--mm-color-border)
}

.mm-navbars_bottom .mm-navbar__tab_selected {
    border-bottom-color: rgba(0, 0, 0, .1);
    border-bottom-color: var(--mm-color-border);
    border-top-color: transparent
}

.mm-navbars_bottom.mm-navbars_has-tabs .mm-navbar {
    background: #f3f3f3;
    background: var(--mm-color-background)
}

.mm-navbars_bottom.mm-navbars_has-tabs .mm-navbar_tabs,
.mm-navbars_bottom.mm-navbars_has-tabs .mm-navbar_tabs~.mm-navbar {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

.mm-searchfield {
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: var(--mm-navbar-size);
    padding: 0;
    overflow: hidden
}

.mm-searchfield input {
    height: 30.8px;
    line-height: 30.8px
}

.mm-searchfield input,
.mm-searchfield input:focus,
.mm-searchfield input:hover {
    background: rgba(0, 0, 0, .05);
    color: rgba(0, 0, 0, .75)
}

.mm-searchfield input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: calc(var(--mm-navbar-size) * .7);
    min-height: unset;
    max-height: unset;
    margin: 0;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none!important;
    border-radius: 4px;
    line-height: calc(var(--mm-navbar-size) * .7);
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    outline: 0!important;
    font: inherit;
    font-size: inherit
}

.mm-searchfield input,
.mm-searchfield input:focus,
.mm-searchfield input:hover {
    background: var(--mm-color-background-highlight);
    color: var(--mm-color-text)
}

.mm-searchfield input::-ms-clear {
    display: none
}

.mm-searchfield__input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.mm-panel__noresultsmsg {
    color: rgba(0, 0, 0, .3);
    padding: 50px 0;
    color: var(--mm-color-text-dimmed);
    text-align: center;
    font-size: 150%
}

.mm-searchfield__btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0
}

.mm-panel_search {
    left: 0!important;
    right: 0!important;
    width: 100%!important;
    border-left: none!important
}

.mm-searchfield__cancel {
    line-height: 44px;
    display: block;
    padding-right: 10px;
    margin-right: -100px;
    line-height: var(--mm-navbar-size);
    text-decoration: none;
    -webkit-transition: margin .4s ease;
    -o-transition: margin .4s ease;
    transition: margin .4s ease
}

.mm-searchfield__cancel-active {
    margin-right: 0
}

.mm-listitem_nosubitems>.mm-listitem__btn {
    display: none
}

.mm-listitem_nosubitems>.mm-listitem__text {
    padding-right: 10px
}

.mm-listitem_onlysubitems>.mm-listitem__text:not(.mm-listitem__btn) {
    z-index: -1;
    pointer-events: none
}

.mm-sectionindexer {
    background: inherit;
    text-align: center;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    z-index: 5;
    -webkit-transition: right .4s ease;
    -o-transition: right .4s ease;
    transition: right .4s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.mm-sectionindexer a {
    color: rgba(0, 0, 0, .3);
    color: var(--mm-color-text-dimmed);
    line-height: 1;
    text-decoration: none;
    display: block
}

.mm-sectionindexer~.mm-panel {
    padding-right: 0
}

.mm-sectionindexer_active {
    right: 0
}

.mm-sectionindexer_active~.mm-panel {
    padding-right: 20px
}

.mm-menu_selected-hover .mm-listitem__btn,
.mm-menu_selected-hover .mm-listitem__text,
.mm-menu_selected-parent .mm-listitem__btn,
.mm-menu_selected-parent .mm-listitem__text {
    -webkit-transition: background-color .4s ease;
    -o-transition: background-color .4s ease;
    transition: background-color .4s ease
}

.mm-menu_selected-hover .mm-listview:hover>.mm-listitem_selected>.mm-listitem__text {
    background: 0 0
}

.mm-menu_selected-hover .mm-listitem__btn:hover,
.mm-menu_selected-hover .mm-listitem__text:hover {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

.mm-menu_selected-parent .mm-panel_opened-parent .mm-listitem:not(.mm-listitem_selected-parent)>.mm-listitem__text {
    background: 0 0
}

.mm-menu_selected-parent .mm-listitem_selected-parent>.mm-listitem__btn,
.mm-menu_selected-parent .mm-listitem_selected-parent>.mm-listitem__text {
    background: rgba(255, 255, 255, .4);
    background: var(--mm-color-background-emphasis)
}

:root {
    --mm-sidebar-collapsed-size: 50px;
    --mm-sidebar-expanded-size: 440px
}

.mm-wrapper_sidebar-collapsed body,
.mm-wrapper_sidebar-expanded body {
    position: relative
}

.mm-wrapper_sidebar-collapsed .mm-slideout,
.mm-wrapper_sidebar-expanded .mm-slideout {
    -webkit-transition-property: width, -webkit-transform;
    transition-property: width, -webkit-transform;
    -o-transition-property: width, transform;
    transition-property: width, transform;
    transition-property: width, transform, -webkit-transform
}

.mm-wrapper_sidebar-collapsed .mm-page,
.mm-wrapper_sidebar-expanded .mm-page {
    background: inherit;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100vh
}

.mm-wrapper_sidebar-collapsed .mm-menu_sidebar-collapsed,
.mm-wrapper_sidebar-expanded .mm-menu_sidebar-expanded {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    top: 0!important;
    right: auto!important;
    bottom: 0!important;
    left: 0!important
}

.mm-wrapper_sidebar-collapsed .mm-slideout {
    width: calc(100% - 50px);
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
    width: calc(100% - var(--mm-sidebar-collapsed-size));
    -webkit-transform: translate3d(var(--mm-sidebar-collapsed-size), 0, 0);
    transform: translate3d(var(--mm-sidebar-collapsed-size), 0, 0)
}

.mm-wrapper_sidebar-collapsed:not(.mm-wrapper_opening) .mm-menu_hidedivider .mm-divider,
.mm-wrapper_sidebar-collapsed:not(.mm-wrapper_opening) .mm-menu_hidenavbar .mm-navbar {
    opacity: 0
}

.mm-wrapper_sidebar-expanded .mm-menu_sidebar-expanded {
    width: 440px;
    width: var(--mm-sidebar-expanded-size);
    min-width: 0!important;
    max-width: 100000px!important;
    border-right-width: 1px;
    border-right-style: solid
}

.mm-wrapper_sidebar-expanded .mm-menu_sidebar-expanded.mm-menu_pageshadow:after {
    content: none;
    display: none
}

.mm-wrapper_sidebar-expanded.mm-wrapper_blocking,
.mm-wrapper_sidebar-expanded.mm-wrapper_blocking body {
    overflow: visible
}

.mm-wrapper_sidebar-expanded .mm-wrapper__blocker {
    display: none!important
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
    width: calc(100% - 440px);
    -webkit-transform: translate3d(440px, 0, 0);
    transform: translate3d(440px, 0, 0);
    width: calc(100% - var(--mm-sidebar-expanded-size));
    -webkit-transform: translate3d(var(--mm-sidebar-expanded-size), 0, 0);
    transform: translate3d(var(--mm-sidebar-expanded-size), 0, 0)
}

.mm-menu__blocker {
    background: rgba(3, 2, 1, 0);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3
}

.mm-menu_opened .mm-menu__blocker {
    display: none
}

[dir=rtl].mm-wrapper_sidebar-collapsed .mm-slideout {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

[dir=rtl].mm-wrapper_sidebar-expanded .mm-slideout {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

[dir=rtl].mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

input.mm-toggle {
    margin-top: 5px;
    background: rgba(0, 0, 0, .1);
    display: inline-block;
    min-width: 58px;
    width: 58px;
    height: 34px;
    margin: 0 10px;
    margin-top: calc((var(--mm-listitem-size) - 34px)/ 2);
    border: none!important;
    background: var(--mm-color-border);
    border-radius: 34px;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    cursor: pointer;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease
}

input.mm-toggle:before {
    background: #f3f3f3
}

input.mm-toggle:before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 1px;
    border-radius: 34px;
    background: var(--mm-color-background);
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    -o-transition: transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease
}

input.mm-toggle:checked {
    background: #4bd963
}

input.mm-toggle:checked:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px)
}

input.mm-check {
    margin-top: 2px;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
    appearance: none!important;
    border: none!important;
    background: 0 0!important;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 10px;
    margin-top: calc((var(--mm-listitem-size) - 40px)/ 2)
}

input.mm-check:before {
    content: '';
    display: block;
    width: 40%;
    height: 20%;
    margin: 25% 0 0 20%;
    border-left: 3px solid;
    border-bottom: 3px solid;
    border-color: var(--mm-color-text);
    opacity: .3;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    transition: opacity .2s ease
}

input.mm-check:checked:before {
    opacity: 1
}

[dir=rtl] input.mm-toggle:checked~label.mm-toggle:before {
    float: left
}

.mm-menu_border-none .mm-listitem:after {
    content: none
}

.mm-menu_border-full .mm-listitem:after {
    left: 0!important
}

.mm-menu_fx-menu-slide {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.mm-wrapper_opened .mm-menu_fx-menu-slide {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0)
}

.mm-wrapper_opening .mm-menu_fx-menu-slide {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-wrapper_opened .mm-menu_fx-menu-slide.mm-menu_position-right {
    -webkit-transform: translate3d(30%, 0, 0);
    transform: translate3d(30%, 0, 0)
}

.mm-wrapper_opening .mm-menu_fx-menu-slide.mm-menu_position-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu_fx-panels-none .mm-panel,
.mm-panel_fx-none {
    -webkit-transition-property: none;
    -o-transition-property: none;
    transition-property: none
}

.mm-menu_fx-panels-none .mm-panel.mm-panel_opened-parent,
.mm-panel_fx-none.mm-panel_opened-parent {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu_fx-panels-slide-0 .mm-panel_opened-parent {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu_fx-panels-slide-100 .mm-panel_opened-parent {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

.mm-menu_fullscreen {
    width: 100%;
    min-width: 140px;
    max-width: 10000px
}

.mm-wrapper_opening .mm-menu_fullscreen~.mm-slideout {
    -webkit-transform: translate3d(100vw, 0, 0);
    transform: translate3d(100vw, 0, 0)
}

@media all and (max-width:140px) {
    .mm-wrapper_opening .mm-menu_fullscreen~.mm-slideout {
        -webkit-transform: translate3d(140px, 0, 0);
        transform: translate3d(140px, 0, 0)
    }
}

@media all and (min-width:10000px) {
    .mm-wrapper_opening .mm-menu_fullscreen~.mm-slideout {
        -webkit-transform: translate3d(10000px, 0, 0);
        transform: translate3d(10000px, 0, 0)
    }
}

.mm-wrapper_opening .mm-menu_fullscreen.mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-100vw, 0, 0);
    transform: translate3d(-100vw, 0, 0)
}

@media all and (max-width:140px) {
    .mm-wrapper_opening .mm-menu_fullscreen.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-140px, 0, 0);
        transform: translate3d(-140px, 0, 0)
    }
}

@media all and (min-width:10000px) {
    .mm-wrapper_opening .mm-menu_fullscreen.mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-10000px, 0, 0);
        transform: translate3d(-10000px, 0, 0)
    }
}

.mm-menu_fullscreen.mm-menu_position-top {
    height: 100vh;
    min-height: 140px;
    max-height: 10000px
}

.mm-menu_fullscreen.mm-menu_position-bottom {
    height: 100vh;
    min-height: 140px;
    max-height: 10000px
}

.mm-menu_listview-justify .mm-panels>.mm-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.mm-menu_listview-justify .mm-panels>.mm-panel:after {
    content: none;
    display: none
}

.mm-menu_listview-justify .mm-panels>.mm-panel .mm-listview {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0
}

.mm-menu_listview-justify .mm-panels>.mm-panel .mm-listitem {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    min-height: 50px
}

.mm-menu_listview-justify .mm-panels>.mm-panel .mm-listitem__text {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.mm-listview_inset {
    list-style: inside disc;
    width: 100%;
    padding: 0 30px 15px 30px;
    margin: 0
}

.mm-listview_inset .mm-listitem {
    padding: 5px 0
}

.mm-menu_multiline .mm-listitem__text {
    -o-text-overflow: clip;
    text-overflow: clip;
    white-space: normal
}

[class*=mm-menu_pagedim].mm-menu_opened~.mm-wrapper__blocker {
    opacity: 0
}

.mm-wrapper_opening [class*=mm-menu_pagedim].mm-menu_opened~.mm-wrapper__blocker {
    opacity: .3;
    -webkit-transition: opacity .4s ease .4s;
    -o-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s
}

.mm-menu_opened.mm-menu_pagedim~.mm-wrapper__blocker {
    background: inherit
}

.mm-menu_opened.mm-menu_pagedim-black~.mm-wrapper__blocker {
    background: #000
}

.mm-menu_opened.mm-menu_pagedim-white~.mm-wrapper__blocker {
    background: #fff
}

.mm-menu_popup {
    -webkit-transition: opacity .4s ease;
    -o-transition: opacity .4s ease;
    transition: opacity .4s ease;
    opacity: 0;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    height: 80%;
    min-height: 140px;
    max-height: 880px;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    z-index: 2;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.mm-menu_popup.mm-menu_opened~.mm-slideout {
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important;
    z-index: 0
}

.mm-menu_popup.mm-menu_opened~.mm-wrapper__blocker {
    -webkit-transition-delay: 0s!important;
    -o-transition-delay: 0s!important;
    transition-delay: 0s!important;
    z-index: 1
}

.mm-wrapper_opening .mm-menu_popup {
    opacity: 1
}

.mm-menu_position-right {
    left: auto;
    right: 0
}

.mm-wrapper_opening .mm-menu_position-right.mm-menu_opened~.mm-slideout {
    -webkit-transform: translate3d(-80vw, 0, 0);
    transform: translate3d(-80vw, 0, 0)
}

@media all and (max-width:300px) {
    .mm-wrapper_opening .mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-240px, 0, 0);
        transform: translate3d(-240px, 0, 0)
    }
}

@media all and (min-width:550px) {
    .mm-wrapper_opening .mm-menu_position-right.mm-menu_opened~.mm-slideout {
        -webkit-transform: translate3d(-440px, 0, 0);
        transform: translate3d(-440px, 0, 0)
    }
}

.mm-menu_position-bottom,
.mm-menu_position-front,
.mm-menu_position-top {
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    -o-transition: transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease
}

.mm-menu_position-bottom.mm-menu_opened,
.mm-menu_position-front.mm-menu_opened,
.mm-menu_position-top.mm-menu_opened {
    z-index: 2
}

.mm-menu_position-bottom.mm-menu_opened~.mm-slideout,
.mm-menu_position-front.mm-menu_opened~.mm-slideout,
.mm-menu_position-top.mm-menu_opened~.mm-slideout {
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important;
    z-index: 0
}

.mm-menu_position-bottom.mm-menu_opened~.mm-wrapper__blocker,
.mm-menu_position-front.mm-menu_opened~.mm-wrapper__blocker,
.mm-menu_position-top.mm-menu_opened~.mm-wrapper__blocker {
    z-index: 1
}

.mm-menu_position-front {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
}

.mm-menu_position-front.mm-menu_position-right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.mm-menu_position-bottom,
.mm-menu_position-top {
    width: 100%;
    min-width: 100%;
    max-width: 100%
}

.mm-menu_position-top {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
}

.mm-menu_position-top {
    height: 80vh;
    min-height: 140px;
    max-height: 880px
}

.mm-menu_position-bottom {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    top: auto
}

.mm-menu_position-bottom {
    height: 80vh;
    min-height: 140px;
    max-height: 880px
}

.mm-wrapper_opening .mm-menu_position-bottom,
.mm-wrapper_opening .mm-menu_position-front,
.mm-wrapper_opening .mm-menu_position-top {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.mm-menu_shadow-page:after {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    content: '';
    display: block;
    width: 20px;
    height: 120%;
    position: absolute;
    left: 100%;
    top: -10%;
    z-index: 100;
    -webkit-clip-path: polygon(-20px 0, 0 0, 0 100%, -20px 100%);
    clip-path: polygon(-20px 0, 0 0, 0 100%, -20px 100%);
    -webkit-box-shadow: var(--mm-shadow);
    box-shadow: var(--mm-shadow)
}

.mm-menu_shadow-page.mm-menu_position-right:after {
    left: auto;
    right: 100%;
    -webkit-clip-path: polygon(20px 0, 40px 0, 40px 100%, 20px 100%);
    clip-path: polygon(20px 0, 40px 0, 40px 100%, 20px 100%)
}

.mm-menu_shadow-page.mm-menu_position-front:after {
    content: none;
    display: none
}

.mm-menu_shadow-menu {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: var(--mm-shadow);
    box-shadow: var(--mm-shadow)
}

.mm-menu_shadow-panels .mm-panels>.mm-panel {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -webkit-box-shadow: var(--mm-shadow);
    box-shadow: var(--mm-shadow)
}

body.modal-open .mm-slideout {
    z-index: unset
}

/* Trigger Styles */
.mmenu-trigger {
    height: 50px;
    width: 50px;
    display: none;
    position: relative;
    margin: 0 0 20px 0;
    background-color: #eee;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

/* Hamburger Icon */
.hamburger {
    padding: 0;
    top: 14px;
    left: 13px;
    transform: scale(0.67);
    -moz-transform: scale(0.70) translateY(4px);
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger-box {
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 34px;
    height: 4px;
    background-color: #555;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }

.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

/* Animation */
.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }

.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }

.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

.mmenu-trigger { display: none; }

@media only screen and (max-width: 1024px) {
.hidden-on-mobile {
    display: none;
}
	/* Header Responsive Styles */
	#responsive { display: none; }
	.mmenu-trigger { display: inline-block !important; }

	#logo {
        position: relative;
        margin: 0;
        margin-top: 5px;
        width: calc(100% - 70px);
        text-align: left;
	}

	.header-widget {
		padding: 20px 0;
		border-top: 1px solid #eee;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.header-widget a.button.border {
		padding: 7px 16px;
		background-color: transparent;
		font-size: 16px;
		min-width: auto;
		float: right;
	}

	.sign-in,
	.user-menu { flex: 1; }

	.header-widget .sign-in { top: 9px; }

	#header-container.header-style-2 .left-side,
	#header-container.header-style-2 .right-side,
	.right-side,
	.left-side { width: 100%; }

	#top-bar .right-side .social-icons { float: left; position: relative; z-index: 9; }

	#header-container.header-style-2 .header-widget { float: left; margin-top: 35px; margin-bottom: -5px }

	.header-widget { text-align: left; }
	/* Match the front-end mobile header's total height to the dashboard's
	   compact bar. The dashboard's own rule (`#header:has(.el-dash-menu-pill)`,
	   ~L19878) has higher specificity so it always wins there regardless of
	   source order — this only affects non-dashboard pages. The real fix
	   is TWO parts: (1) balanced small padding instead of the desktop
	   18px-top/8px-bottom values, and (2) zeroing `.mmenu-trigger`'s
	   `margin-bottom:20px` (its base/desktop rule, ~L3320) which was adding
	   20px of otherwise-invisible height to the float-based `.left-side`
	   row — without killing that margin, the trigger's own 50x50 box alone
	   still makes the bar taller than dashboard's 44px-tall button. */
	#header { padding-top: 9px; padding-bottom: 9px; }
	.mmenu-trigger { margin-bottom: 0; }
	/* the base `.left-side` is still float-based (float:left, no set
	   height), so its total height came from float-clearing the tallest
	   floated child PLUS that child's own margins/line-height quirks —
	   fragile and, in testing, still ~3px taller than intended even
	   after zeroing the obvious margins. Pin an explicit height (44px,
	   the same content-row height the dashboard's own compact header
	   uses) so the two bars are byte-for-byte identical regardless of
	   the logo/icon's own intrinsic sizing; flex + align-items:center
	   keeps the (slightly taller) logo block vertically centered within
	   it. Dashboard's own `.left-side:has(.el-dash-menu-pill)` rule is
	   more specific and still wins there unaffected. IMPORTANT: floats
	   have no effect inside a flex container, so switching to flex here
	   silently broke `.mmenu-trigger`'s base `float:right` (~L19886) —
	   the button lost its right-edge anchor and sat right after the
	   logo instead, leaving a dead gap on the right. `justify-content:
	   space-between` restores that pinned-to-the-edge behavior BUT
	   `.left-side` actually has a 3rd child: a leftover zero-width
	   `<div class="clearfix">` (a float-layout hack, meaningless now
	   that this is flex) sitting after `.mmenu-trigger`. space-between
	   distributes the gap across all 3 children equally, so the
	   zero-width clearfix — not the button — ends up flush against the
	   right edge, leaving the button ~15px short of it. Hiding the
	   clearfix removes it from the flex distribution so the button
	   becomes the true last child and lands flush right. */
	.left-side { display: flex; align-items: center; justify-content: space-between; height: 44px; }
	.left-side > .clearfix { display: none; }
	/* `align-items:center` centers the LOGO'S MARGIN BOX, not just its
	   content — an existing higher-specificity rule further down
	   (`body #logo{margin-top:5px!important}`, ~L19904, same 1024px
	   breakpoint) gives the logo a lopsided 5px-top/0-bottom margin,
	   which visibly pushes it a few px below true center even though
	   flex is centering it correctly. `#header #logo` (two ID
	   selectors) outweighs that rule's `body #logo` (one type + one ID)
	   so this wins and neutralizes the margin, letting flex center the
	   logo's actual box with no lean. Logo itself is already the first
	   flex child (space-between), so it's already left-anchored — this
	   is purely a vertical-centering fix. */
	#header #logo { margin-top: 0 !important; margin-bottom: 0 !important; }
	/* Even with the margin fix above, #logo's own box (48px) is still
	   taller than its actual visible content — the brand-mark `<a>`
	   (40px) — because #logo is `display:block` and a stray inline
	   whitespace text node next to the `<a>` opens an anonymous inline
	   box sized by #logo's own line-height, padding the box below the
	   link. That leaves the visible logo graphic sitting near the TOP
	   of its own (correctly-centered) box instead of centered within
	   it. Turning #logo itself into a flex container centers its one
	   real child regardless of that quirk. */
	#header #logo { display: flex; align-items: center; }
	/* Shrink the front-end hamburger button itself (base rule is a
	   50x50 box) down to a more proportionate 40x40 on mobile.
	   `:not(.dashboard)` means this never matches dashboard pages at
	   all, so it can't conflict with the dashboard's own #header-container
	   `:has(.el-dash-menu-pill)` sizing (46x44) regardless of specificity.
	   Per the established gotcha for this theme's `.hamburger--collapse`
	   icon: never resize `.hamburger-box` itself (its bar-offset math
	   only works at its default height) — instead rescale/reposition the
	   `.hamburger` wrapper's own `top`/`left`/`transform:scale()` (same
	   40/50 ratio as the box shrink) to keep the 3-bar icon centered. */
	#header-container:not(.dashboard) .mmenu-trigger { width: 40px; height: 40px; }
	#header-container:not(.dashboard) .mmenu-trigger .hamburger { top: 9px; left: 10px; transform: scale(0.54); }

	ul.top-bar-menu { z-index: 99; position: relative; }

	.header-style-2 .menu-responsive { width: 750px; margin-left: auto; margin-right: auto; float: none; padding: 0 15px; }

	#header-container.header-style-2 .header-widget { width: calc(100%);  border-top: 1px solid #e0e0e0; padding-top: 30px; }

}

/* Highlighted Categories
------------------------------------- */
.main-search-inner .highlighted-category {
	float: left;
	border-radius: 50px;
	margin: 10px 5px 0 0;
	padding: 3px 17px;
	text-align: center;
	transition: 0.4s;
	transform: scale(1);
	vertical-align: top;
	position: relative;
	width: auto;
    color: #fff;
    background-color: #66676b;
    box-shadow: 0 2px 8px rgb(102,103,107, 0.2);

}

/* Hover Animation */
    .main-search-inner .highlighted-category:hover {
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #333;
}

.main-search-inner .highlighted-category h4 {
	font-size: 15px;
	color: #66676b;
	transition: 0.4s;
	line-height: 22px;
	margin: 0;
	font-weight: 400;
	display: inline-block;
	margin-left: 6px;
	font-size: 14px;
	font-weight: 400;
	position: relative;
    color: #fff;
}

.main-search-inner .highlighted-category i {
    display: inline-block;
    float: left;
    font-size: 15px;
	position: relative;
}

.main-search-inner .highlighted-category:hover h4 { color: #fff; }

.highlighted-categories-headline {
	font-size: 16px;
	color: #777;
	font-weight: 500;
	margin-top: 50px;
	margin-bottom: 8px;
}

@media (max-width: 991px) {
	.main-search-container { height: auto; }
	.main-search-inner { position: relative; top: 0; transform: none; padding-top: 30px; padding-bottom: 45px; }
}

/* Tyepd Words */
body .typed-cursor {
    opacity: 0.5;
    font-weight: 200;
    margin-left: 2px;
}

body .typed-cursor.typed-cursor--blink{
	 animation: typedjsBlink 1.5s infinite;
}

 @keyframes typedjsBlink{
     0% { opacity: 1; }
     50% { opacity: 0; }
     100% { opacity: 1; }
}

body .typed-fade-out{
	  opacity: 0;
	  transition: opacity .25s;
  }

body .typed-cursor.typed-cursor--blink.typed-fade-out{
	animation: 0;
}

@media (max-width: 768px) {
    .typed-words { display: block; width: 100%; min-height: 46px; }  
    .typed-cursor { display: none; }
}

/* Main Search Container
------------------------------------- */
.main-search-container {
	display: block;
	width: 100%;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	height: 620px;
	z-index: 9;
}

.main-search-container.centered { text-align: center; }
.main-search-input { text-align: left; }

.main-search-container:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	background: linear-gradient(to right, rgba(255,255,255,0.99) 20%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0) 95%);
}

.main-search-container h2 {
	font-size: 42px;
}

.main-search-container h4 {
	font-size: 24px;
	font-weight: 300;
	color: #777;
	line-height: 32px;
}

/* Video */
.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	overflow: hidden;
}
.main-search-container video {
	top: 50%;
	transform: translateY(-52%);
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -10;
	background-size: cover;
	transition: 1s opacity;
	position: absolute;
}

/* Dark Overlay */
.main-search-container.dark-overlay:before { background: rgba(46,47,50,0.55); }
.main-search-container.dark-overlay h2 { color: #fff; }
.main-search-container.dark-overlay h4 { color: rgba(255,255,255,0.7); }

/* Inner Content */
.main-search-inner {
	position: relative;
	display: block;
	top: 50%;
    transform: translate(0, -50%);
	padding-bottom: 30px;
}

.main-search-inner select {
	border: none;
	padding-top: 2px;
	padding-bottom: 0;
	height: 44px;
	box-shadow: none;
}

/* Main Search Input */
.main-search-input {
	margin-top: 50px;
	border-radius: 50px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 9px;
	max-height: 68px;
}

.main-search-input-item {
	flex: 1;
	border-right: 1px solid #e9e9e9;
	margin-top: 3px;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
}

.main-search-input  .main-search-input-item:nth-last-child(2) {
	border-right: none;
	padding-left: 15px;
	padding-right: 15px;
}

.main-search-input-item.location a {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	padding: 10px;
	background: #fff;
}

.main-search-input-item.location a:hover { color: #66676b; }

.main-search-input input,
.main-search-input input:focus {
	font-size: 16px;
	border: none;
	background: #fff;
	margin: 0;
	padding: 0;
	height: 44px;
	line-height: 44px;
    box-shadow: none;
}

.main-search-input button.button {
	font-size: 18px;
	font-weight: 600;
	padding: 0 40px;
	margin-right: 1px;
	height: 50px;
	outline: none;
}

/* Gray Style */
.gray-style.main-search-input {
	box-shadow: none;
	background-color: #f7f7f7;
	top: -10px;
	position: relative;
}

.gray-style .main-search-input-item.location a,
.gray-style.main-search-input input,
.gray-style.main-search-input input:focus {
	background: #f7f7f7;
}

.gray-style .main-search-input-item { border-color: #e0e0e0; }

/* Home Improvements */
  
.transparent-header .main-search-container  { height: auto; }

.transparent-header .main-search-container .main-search-inner {
    top: 0;
    transform: none;
    padding-top: 210px;
    padding-bottom: 170px;
}

.transparent-header .main-search-container { height: auto; }

.transparent-header .main-search-container:before {
    background: rgba(0,0,0,0.5);
}

.transparent-header #header:not(.cloned) {
    background: rgba(51,51,51,0);
    position: absolute;
    width: 100%;
    box-shadow: none;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.transparent-header .main-search-container:before { background: rgba(51,51,51,0.85); }
.transparent-header .highlighted-categories-headline,
.transparent-header .main-search-container h2 { color: #fff; }

.transparent-header #header:not(.cloned) #navigation.style-1 > ul > li > a { color: #fff; }
.transparent-header #header:not(.cloned) #navigation.style-1 > ul > li > a.current, 
.transparent-header #header:not(.cloned) #navigation.style-1 > ul > li:hover > a {
    background: #66676b;
    color: #fff;
}
.transparent-header .main-search-container h4 { color: rgba(255,255,255,0.65); }
.transparent-header .highlighted-category h4 { color: #fff; }
.transparent-header .header-widget .sign-in:hover,
.transparent-header .header-widget .sign-in { color: #fff; }

.transparent-header #header:not(.cloned) .user-menu .user-name:after {color: rgba(255,255,255,0.7) !important; }
.transparent-header #header:not(.cloned) .user-menu.active .user-name,
.transparent-header #header:not(.cloned) .user-menu:hover .user-name,
.transparent-header #header:not(.cloned) .user-menu .user-name { color: #fff !important; }

.transparent-header #header:not(.cloned) .header-widget .button,
.transparent-header #header:not(.cloned) .header-widget .button.border {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    padding: 9px 20px;
}

.transparent-header #header:not(.cloned) .header-widget .button:hover,
.transparent-header #header:not(.cloned) .header-widget .button.border:hover {
	background: #66676b;
	color: #fff;
}

.transparent-header .main-search-container h2 {
    font-size: 44px;
    font-weight: 500;
    line-height: 50px;
}

.transparent-header .main-search-inner .highlighted-category:hover {
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #fff;
}

.transparent-header .main-search-inner .highlighted-category:hover h4 { color: #333; }

.main-search-inner .highlighted-category { float: none; }
.main-search-inner .highlighted-category i {float: none; }
.main-search-inner .highlighted-category {
    padding: 3px 15px;
    display: inline-block;
}

.main-search-form { text-align: left; }
.main-search-inner .highlighted-category h4 {
    top: -1px;
    position: relative;
}

.transparent-header .main-search-inner .highlighted-category {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

@media (min-width: 1240px) and (max-width: 1440px) {
    .transparent-header .main-search-container .main-search-inner {
        padding-top: 190px;
        padding-bottom: 150px;
    }
}

/* Transparent Header Mobile Styles  */
@media (max-width: 1240px) {
    .transparent-header #navigation.style-1:before {
        background: rgba(255,255,255,0.15);
    }
    .transparent-header #header:not(.cloned) { border: none; }
    .transparent-header .main-search-container h2 {
        font-size: 38px;
        line-height: 46px;
    }

}

@media (min-width: 1024px) and (max-width: 1240px) {
    .transparent-header .main-search-container .main-search-inner {
        padding-top: 180px;
        padding-bottom: 100px;
    }
}

@media (max-width: 1024px) {
    .transparent-header .header-widget {
        padding: 15px 0;
        border-top: 1px solid rgba(255,255,255,0.15);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
    }

    .transparent-header .mmenu-trigger { background-color: rgba(255,255,255,0.15); }
    .transparent-header .hamburger-inner, .transparent-header .hamburger-inner::before, .transparent-header .hamburger-inner::after {background: #fff; }
    
    .transparent-header #header:not(.cloned) { border: none; }
    .transparent-header .main-search-container .main-search-inner { padding-top: 180px; padding-bottom: 80px; }
    .transparent-header .main-search-inner { text-align: left; }
    .transparent-header .main-search-input { margin-top: 30px; }
    .main-search-input-item:last-child, 
    .main-search-input .main-search-input-item:last-child, 
    .main-search-input .main-search-input-item:nth-last-child(2), 
    .main-search-input .main-search-input-item:nth-last-child(3) {
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }
    
}

/* Boxed (Airbnb) Home Search
------------------------------------- */
.main-search-container.full-height {
	min-height: 100vh;
}

.main-search-container.full-height .main-search-inner {
	padding: 0;
	top: 52%;
	display: block;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	transform: translateY(-50%);
}

.main-search-container.alt-search-box  .main-search-input-item {
	margin: 0;
	padding: 0;
	border: none;
    width: 100%;
    flex: auto;
    margin-bottom: 14px;
}

.main-search-container.alt-search-box  .main-search-input {
	width: 480px;
	border-radius: 8px;
	height: auto;
	max-height: 100%;
	padding: 35px;
	box-shadow: 0 10px 35px rgba(0,0,0,0.1);
}

.alt-search-box.main-search-container .main-search-input-headline h2 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 30px 0;
    padding: 0;
    line-height: 36px;
}

.alt-search-box.main-search-container .main-search-input-headline h4 {
    color: #888;
    font-size: 20px;
    margin: -18px 0 30px 0;
    padding: 0;
    line-height: 30px;
}

.alt-search-box.main-search-container .main-search-input-item #autocomplete-input,
.alt-search-box.main-search-container .main-search-input-item input {
    padding: 0 20px;
    height: 54px;
    line-height: 54px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

body .alt-search-box .main-search-input-item .chosen-single,
body .alt-search-box .main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single,
body .alt-search-box .main-search-input-item .chosen-container .chosen-drop {
	box-shadow: none;
	border: 1px solid #e2e2e2;
	background: #fff;
}
body .alt-search-box .main-search-input-item .chosen-single,
body .alt-search-box .main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single {
		padding: 0 20px;
		height: 55px;
		line-height: 55px;
		border-radius: 4px;
		background: #fff;
		border: 1px solid #e2e2e2;
}

#booking-date-search { cursor: pointer; }

.alt-search-box button.button { margin-top: 15px; }

.alt-search-box .main-search-input-item .chosen-single:after {
    opacity: 0;
    transition: 0.3s;
    width: calc(100% - 1px);
}

.alt-search-box .main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single:after {
    opacity: 1;
}

.alt-search-box .search-input-icon {
	position: relative;
}

.alt-search-box .search-input-icon i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 21px;
	z-index: 10;
	color: #999;
}

.transparent-header .alt-search-box.main-search-container:before {
    background: rgba(51,51,51,0.25);
}

.alt-search-box.main-search-container .main-search-input-item.search-input-icon input { padding-right: 40px; }

.alt-search-box .input-with-icon i, .alt-search-box .main-search-input-item.location a {
    right: 14px;
}

@media (max-width: 1239px) {
	.transparent-header .fullwidth #navigation.style-1:before {
	    background: rgba(255,255,255,0.2);
	    width: 100%;
	}
}

@media (max-width: 992px) {
	.main-search-container.alt-search-box .main-search-input {
	    width: auto;
	    max-height: 100%;
	    padding: 25px;
	    background: #fff;
	}
}

@media (min-width: 992px) {
	.alt-search-box .main-search-input .pac-container {
	    box-shadow: none;
	    border: 1px solid #e2e2e2;
	    padding-top: 45px;
	    z-index: 9;
	    left: 0 !important;
	    top: 9px !important;
	    border-radius: 4px;
	}

}

/* Main Search - V3
------------------------------------- */
.main-search-container.plain-color {
    height: 600px;
/*
    background-color: #fff1e3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffeedd' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffead7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffe7d1' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffe3cb' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffe0c5' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffe4cd' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe8d4' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffeddc' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff1e3' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23fff5eb' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
 
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23fff9f4' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23fff3e8' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffeddd' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffe7d2' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffe1c7' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffe7d2' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffeddd' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23fff3e8' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fff9f4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffffff' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;*/
 
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23fffaf5' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23fff5ec' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffefe2' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffead9' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffe5cf' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffead9' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffefe2' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23fff5ec' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fffaf5' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffffff' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}
 
.main-search-container.plain-color .main-search-inner { z-index: 10; }
 
.main-search-container.plain-color:before { display: none; }
 
.main-search-container.plain-color h2 { color: #111; }
.main-search-container.plain-color h4 { color: #111; opacity: 0.5; font-weight: 400; }
.main-search-container.plain-color .highlighted-categories-headline { color: #111; opacity: 1; font-weight: 500; }
 
.highlighted-categories-headline,
.highlighted-categories,
.main-search-headlines{ padding-right: 550px; }
 
@media(max-width: 992px) {
    .highlighted-categories-headline,
    .highlighted-categories,
    .main-search-headlines{ padding-right: 0px; }
}
 
.main-search-container.plain-color .main-search-inner .highlighted-category {
    background: #111;
    color: #fff;
    box-shadow: none;
}
.main-search-container.plain-color .main-search-inner .highlighted-category h4 {
    color: #fff;
    opacity: 1;
}
 
.main-search-container.plain-color .main-search-inner .highlighted-category:hover {
    background: #fff;
    color: #222;
    box-shadow: 0 1px 5px rgba(0,0,0,0.12);
}
.main-search-container.plain-color .main-search-inner .highlighted-category:hover h4 {
    color: #222;
    opacity: 1;
}
 
.main-search-container.plain-color.white-text h2,
.main-search-container.plain-color.white-text h4,
.main-search-container.plain-color.white-text .highlighted-categories-headline { color: #fff; }
 
.msps-container {
    position: absolute;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}
 
.main-search-photo-slider {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 20px rgba(0,0,0,0.2);
    display: flex;
    top: 10%;
}
 
.msps-slider .slick-dots { bottom: 20px; z-index: 20; }
.msps-slider .slick-dots li {
    box-shadow: inset 0 0 0 2px #fff;
}
.msps-slider .slick-dots li.slick-active  {
    box-shadow: inset 0 0 0 6px #fff;
}
.msps-slider .slick-dots li:after {
    background-color: #fff;
}

.main-search-photo-slider img {
    object-fit: cover;
}
 
.msps-slider-container {
    position: relative;
/*  z-index: 10;*/
    display: flex;
}
 
/* Shapes */
.msps-shapes {
    position: absolute;
    top: 0;
    right: 0;
    top: 10%;
    transform: none !important;
    transform-style: flat !important;
}
 
.msps-shapes .shape-a {
    position: absolute;
    right: -55px;
    top: 50px;
    z-index: 10;
}
 
.msps-shapes .shape-b {
    position: absolute;
    right: -40px;
    left: 0;
    margin: 0 auto;
    top: -35px;
    z-index: 10;
}
 
.msps-shapes .shape-c {
    position: absolute;
    left: -80px;
    bottom: 0;
    z-index: -10;
}
 
.msps-shapes .shape-d {
    position: absolute;
    right: -50px;
    bottom: 80px;
    z-index: -10;
}
 
.msps-shapes .shape-e {
    position: absolute;
    right: -30px;
    bottom: 55px;
    z-index: 10;
}
 
.msps-shapes .shape-f {
    position: absolute;
    left: -70px;
    top: 110px;
}
 
.shape-a.blurred { right: -90px; top: 8%; }
 
.shape-a,
.shape-b,
.shape-c,
.shape-d,
.shape-e,
.shape-f {
    opacity: 0;
    transform: translateY(-25px);
    transition: opacity 0.7s, transform 0.7s;
}
 
.shapes-animation .shape-a,
.shapes-animation .shape-b,
.shapes-animation .shape-c,
.shapes-animation .shape-d,
.shapes-animation .shape-e,
.shapes-animation .shape-f {
    opacity: 1;
    transform: translateY(0);
}
 
.shapes-animation .shape-a { transition-delay: 1s; }
.shapes-animation .shape-b { transition-delay: 0.6s; }
.shapes-animation .shape-c { transition-delay: 0.4s; }
.shapes-animation .shape-d { transition-delay: 0.2s; }
.shapes-animation .shape-e { transition-delay: 0.6s; }
.shapes-animation .shape-f { transition-delay: 0.8s; }
 
@media (max-width: 1366px) {
 
    .msps-shapes .shape-d {
        position: absolute;
        right: -40px;
        bottom: 80px;
        z-index: -10;
    }
    .msps-shapes .shape-a {
        position: absolute;
        right: -20px;
        top: 50px;
        z-index: 10;
    }
}

.layer {
  width: 100%;
  height: 100%;
  z-index: 10;
}
 
.msps-slider .slick-slide .item {
    vertical-align: middle;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
 
.msps-shapes,
.main-search-photo-slider,
.msps-slider .slick-slide,
.msps-slider {
    height: 600px;
    width: 530px;
}

/* Home Search Slider
---------------------------------------------------------------------- */
.background-gradient {
	background: linear-gradient(to top, #f9f9f9 0%, rgba(255,255,255,0.5)); padding-bottom: 10px; 
}

.home-search-carousel {
	padding:  50px 0;
	position: relative;
	max-height: 720px;
	background: linear-gradient(to bottom, #f6f6f6 0%, rgba(255,255,255,0.5));
}

.home-search-carousel.carousel-not-ready .slider-controls,
.home-search-carousel.carousel-not-ready .home-search-slide h3,
.home-search-carousel.carousel-not-ready .home-search-slide {
	opacity: 0;
}

.home-search-carousel.carousel-not-ready .home-search-slide:first-child {
	display: block !important;
	margin:  0;
	opacity: 1;
}

.home-search-slide.slick-slide {
	background-color:  #333;
	padding:  50px;
	height:  620px;
	margin:  0 -35px;
	opacity: 0.2;
	transition:  0.7s;
	transform:  scale(0.85);
	border-radius:  10px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    cursor: grab;
}

@media (max-width: 1380px) {
	.home-search-carousel {
		padding:  15px 0;
	}
	.home-search-slide {
		opacity: 1;
		margin:  0;
	}
}

.home-search-slide:after {
	content: "";
	background: linear-gradient(270deg, rgba(240,240,240,0) 0%, rgba(20,20,20,1) 65%);
	border-radius: 10px;
	width:  100%;
	height:  100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.4;
	z-index: 1;
}

.home-search-slide.slick-center {
	opacity: 1;
	transform:  scale(1);
	transition:  0.5s;
}

.home-search-carousel .container.search-cont {
	position: absolute;
	bottom: 50%;
	transform:  translateY(calc(50% + 70px));
	margin:  0 auto;
	left: 0;
	right: 0;
	z-index: 10;
}

.home-search-slider-headlines {
	padding-bottom:  130px;
	position: absolute;
	margin:  0 auto;
	left: 0;
	right: 0;
	z-index: 100;
}

.home-search-carousel .main-search-input {
	margin-top:  0;
}

.home-search-slide h3 {
	color:  #fff;
	font-size: 40px;
	font-weight: 600;
	margin:  0;
	padding: 0;
	line-height: 54px;
}

.home-search-slide h3 a,
.home-search-slide h3 strong {
	font-style:  normal;
	font-weight: 600;
	color:  #fff;
	position: relative;
}

.home-search-slide h3 a:before,
.home-search-slide h3 strong:before {
	content: "";
	height:  50%;
	background: #66676b;
	display: block;
	position: absolute;
	bottom:  0;
	left:  0;
	height:  20%;
	width:  100%;
	z-index: -1;
	transition: 0.3s;
}

.home-search-slide h3 a:hover:before,
.home-search-slide h3 strong:hover:before {
	height:  100%;
}

.slider-controls-container {
	position: absolute;
	left: 0;
	right:  0;
	margin:  0 auto;
	display:  block;
	text-align: center;
	bottom: -29px;
}

.home-search-carousel .slider-controls-container {
	position: absolute;
	bottom:  80px;
	left: 0;
	right:  0;
	margin:  0 auto;
	display:  block;
	text-align: center;
	z-index: 1;
}

.slider-controls {
	position: relative;
    display: inline-flex;
    background: rgba(0,0,0,0.03);
    padding:  7px 3px;
    border-radius: 50px;
    margin:  0 auto;
    justify-content: center;
    align-items: center;
}

.home-search-carousel .slider-controls {
	background: rgba(0,0,0,0.3);
}

.slider-controls button {
	display: inline-block;
	border:  none;
	box-shadow:  none;
	background:  transparent;
	height:  14px;
	width:  30px;
}

.slider-controls .slick-dots li {
	height:  15px;
	width:  15px;
}

.slider-controls button.slide-m-next,
.slider-controls button.slide-m-prev {
	background-image:  url(../images/slider-arrow-grey.svg);
	background-repeat: no-repeat;
	background-size:  auto 100%;
	background-position: 50%;
}

.home-search-carousel .slider-controls button.slide-m-next,
.home-search-carousel .slider-controls button.slide-m-prev {
	background-image:  url(../images/slider-arrow.svg);
}

.slider-controls button.slide-m-prev {
	transform: rotate(180deg);
}

.slider-controls .slick-dots {
	position: relative;
	width:  auto;
	display:  flex;
	bottom:  0;
}

.simple-slick-carousel.dots-nav .slider-controls .slick-dots {
	display:  flex !important;
}

.home-search-carousel .slider-controls .slick-dots li:after {
	background-color:  #fff;
}
.home-search-carousel .slider-controls .slick-dots li {
	box-shadow: inset 0 0 0 2px #fff;
}

@media (max-width: 1700px) {
	.home-search-slide.slick-slide { height:  600px; }
	.home-search-carousel { max-height: 700px; }
}

@media (max-width: 1530px) {
	.home-search-slide.slick-slide { height:  560px; }
	.home-search-carousel { max-height: 660px; }
}

@media (max-width: 1430px) {
	.home-search-carousel { padding: 0; margin: 0; }
	.home-search-carousel { max-height: 650px; }
	.home-search-slide.slick-slide { height:  550px; margin:  20px 0; }
	.home-search-slide h3 {
		font-size: 36px;
		line-height: 50px;
	}
}

@media (max-width: 992px) {
	.home-search-carousel { padding: 0; margin: 0; max-height:  640px; }
	.home-search-carousel.slick-dotted.slick-slider { margin-bottom:  80px; }
	.home-search-slide.slick-slide { height: 600px; }
	.home-search-carousel .container.search-cont {
	    bottom: 0;
	    transform: none;
	    padding:  15px;
	    padding-bottom: 55px;
	}
	.home-search-slider-headlines {
	    padding-bottom: 130px;
	    position: absolute;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	    z-index: 100;
	    padding-bottom: 0 !important;
	    top: initial;
	}
	.home-search-slide h3 {
		font-size:  28px;
		line-height: 42px;
	}

	.home-search-carousel .slider-controls-container {
		bottom:  -30px;
	}
}

@media (max-width: 768px) {
	.home-search-slide h3 {
		font-size:  24px;
		line-height: 32px;
		display:  inline-block;
	}
	.home-search-carousel .container.search-cont {
	    padding:  35px;
	    padding-bottom: 55px;
	}
	.home-search-slide h3 a:before, .home-search-slide h3 strong:before { display:  none; }
}

/* Typo changes
---------------------------------------------------------------------- */
strong.headline-with-separator, .headline-with-separator { font-weight:  600; }
.headline span { font-weight: 400; }

/* Icon Box V3
---------------------------------------------------------------------- */
.icon-box-v3 {
	display:  flex;
	align-items: center;
	margin-top:  40px;
}

.icon-box-v3:last-child {
	margin-bottom: 0;
}

.ibv3-content h4 {
	font-size:  18px;
	color:  #222;
	font-weight: 600;
}

.ibv3-content p {
	font-size:  16px;
	font-weight: 400;
	color:  #777;
	margin:  0 0 3px 0;
}

.ibv3-icon {
	height:  100px;
	width: 100px;
	display: flex;
	align-items: center;
	text-align: center;
	background:  #66676b10;
	border-radius:  100%;
	flex:  0 0 100px;
	margin-right:  30px;
	transition:  0.3s;
	justify-content:  center;
}

.icon-box-v3:hover .ibv3-icon {
	background:  #66676b;
	box-shadow:  0 3px 8px #66676b50;
}

.icon-box-v3 .ibv3-icon i {
	font-size:  36px;
	text-align: center;
	color:  #66676b;
}

.icon-box-v3 .ibv3-icon i,
.icon-box-v3 .ibv3-icon svg g,
.icon-box-v3 .ibv3-icon svg circle,
.icon-box-v3 .ibv3-icon svg rect,
.icon-box-v3 .ibv3-icon svg path {
	fill:  #66676b;
	transition:  0.3s;
}

.icon-box-v3:hover .ibv3-icon i,
.icon-box-v3:hover .ibv3-icon svg g,
.icon-box-v3:hover .ibv3-icon svg circle,
.icon-box-v3:hover .ibv3-icon svg rect,
.icon-box-v3:hover .ibv3-icon svg path {
	fill:  #fff;
	transition:  0.3s;
}

.icon-box-v3:hover .ibv3-icon i {
	color:  #fff;
}

.ibv3-icon svg,
.ibv3-icon img {
	height:  36px;
	margin:  0 auto;
}

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

.svg-alignment img {
	width: 90%;
	margin-top:  -0px;
}

@media (max-width: 992px) {
	.svg-alignment {
		text-align: center;
	}

	.svg-alignment img {
		width: 100%;
		margin-top:  50px;
	}
}

/* Boxed Photo Banner
---------------------------------------------------------------------- */
.boxed-photo-banner {
	display:  flex;
	align-items: center;
	border-radius: 10px;
	background-color: #eee;
	padding:  60px;
	position: relative;
	overflow: hidden;
}

.boxed-photo-banner img {
	position: absolute;
	height:  100%;
	width:  100%;
	top:  0;
	left: 0;
	object-fit: cover;
	z-index: 1;
}

.boxed-photo-banner:before{
	content: "";
	position: absolute;
	height:  100%;
	width:  100%;
	top:  0;
	left: 0;
	object-fit: cover;
	opacity: 1;
	z-index:  3;
	background: linear-gradient(270deg, rgba(240,240,240,0) 0%, rgba(20,20,20,1) 75%);
	opacity: 0.7;
}

.boxed-photo-banner-text {
	position: relative;
	z-index: 10;
	max-width: 50%;
}

.boxed-photo-banner-text h2 {
	color:  #fff;
	font-size:  32px;
	font-weight: 600;
	line-height: 38px;
	margin-top:  0;
}

.boxed-photo-banner-text p {
	color:  #fff;
	opacity: 0.7;
	font-size:  20px;
	line-height: 32px;
	margin:  15px 0 0px 0;
	max-width: 80%;
	display: block;
}

.boxed-photo-banner-text .button {
	zoom:  1.12;
	color:  #fff;
}

/* Gallery Section
---------------------------------------------------------------------- */
.taxonomy-gallery-text {
	padding:  0;
	position: relative;
	z-index: 10;
}

.taxonomy-gallery-text h2 {
	color:  #222;
	font-size:  36px;
	font-weight: 700;
	line-height: 52px;
	margin-top:  0;
}

.taxonomy-gallery-text p {
	color:  #777;
	font-size:  22px;
	line-height: 36px;
	margin:  20px 0 10px 0;
	max-width: 80%;
	display: block;
}

.taxonomy-gallery-text .button {
	zoom:  1.12;
	color:  #fff;
}

/* Gallery */
.taxonomy-gallery-container {
	position: relative;
	height: 580px;
	display: flex;
    align-items: center;
}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 50%;
  right: 0;
  height: 100%;
  position: absolute;
  top:  0;
}

.gallery-wrap .item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: 500px auto;
  background-position: 50%;
  background-repeat: no-repeat;
  transition: flex 0.8s ease;
  position: relative;
  overflow:  hidden;
  max-width: 500px;
}

.gallery-wrap .item h3 {
	position: absolute;
	bottom: 0;
	left:  0;
	font-weight: 600;
	color:  #fff;
	margin:  0;
	padding:  40px;
	font-size:  26px;
	opacity: 0;
	transform:  translateX(-10px);
	transition:  0.6s;
	display:  block;
	white-space: nowrap;
	background:  rgba(0,0,0,0.2);
	backdrop-filter: blur(10px);
	border-radius: 4px;
	margin:  35px;
	padding:  8px 15px;
}

.gallery-wrap .item h3 span {
	display: block;
	font-size:  16px;
	font-weight: 500;
	opacity: 0.7;
	padding: 3px 0;
}

.gallery-wrap .item:before {
	position: absolute;
	bottom: 0;
	left:  0;
	content:  "";
	height:  100%;
	width:  100%;
	background: linear-gradient(to top,  rgba(0,0,0,0.5) 0%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
	opacity: 0;
	transition:  0.6s;
}

.gallery-wrap .item:hover:before {
	opacity: 1;
}

.gallery-wrap .item:hover h3 {
	opacity: 1;
	transform:  translateX(0px);
}

.item:hover {
	flex:  0 0 500px
}

.item img {
    object-fit: cover;
    height: 100%;
    width: 500px;
}

 @media (max-width: 1700px) {
	.gallery-wrap .item:hover { flex:  0 0 400px }
	.gallery-wrap .item img { width: 400px; }
	.gallery-wrap .item { max-width: 400px; }
	.taxonomy-gallery-container { height:  550px; }
	.gallery-wrap .item h3 { font-size:  24px; }
 }

 @media (max-width: 1450px) {
	.gallery-wrap .item:hover { flex:  0 0 400px }
	.gallery-wrap .item img { width: 400px; }
	.taxonomy-gallery-container { height:  520px; }
	.gallery-wrap .item h3 { font-size:  24px; margin: 30px; }
	.taxonomy-gallery-text h2 { font-size:  32px; line-height: 46px; }
	.gallery-wrap .item h3 span { font-size:  14px; }
 }

 @media (max-width: 992px) {
	.gallery-wrap .item { max-width: 100%; }
	.gallery-wrap {
		position: relative;
		height:  auto;
		width:  100%;
		flex-wrap: wrap;
	}
	.taxonomy-gallery-container {
		flex-direction: column;
		height:  auto;
		padding-top:  0 !important;
		padding-bottom:  0 !important;
	}

	.taxonomy-gallery-text { padding:  50px 0; }

	.gallery-wrap .item { flex: 50%; height: 250px;}
	.gallery-wrap .item:hover { flex:  50%; }
	.gallery-wrap .item img { width: 100%; }
	.gallery-wrap .item h3 {
		opacity: 1;
		transform:  none;
		font-size: 20px;
		margin:  0;
		border-radius: 0;
		font-size:  18px;
		padding:  10px 12px;
		white-space: break-spaces;
	}
	.gallery-wrap .item:before { opacity: 1;  }
 }

 @media (max-width: 480px) {
	.gallery-wrap .item { height: 200px;}
 }

/* Popular Categories - V2
------------------------------------- */
.categories-boxes-container-alt {
    width: calc(100% + 25px);
    left: -20px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
 
.category-small-box-alt {
    float: left;
    background-color: #f2f2f2;
    border-radius: 4px;
    margin: 25px 0 0 25px;
    padding: 32px 28px;
    text-align: center;
    color: #777;
    transition: 0.4s;
    transform: scale(1);
    vertical-align: top;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
 
/* Hover Animation */
.category-small-box-alt:hover {
    background-color: #66676b;
    color: #fff;
/*  -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05); */
    transform: translateY(-6px);
}
 
.category-small-box-alt h4 {
    font-size: 17px;
    color: #444;
    transition: 0.4s;
    line-height: 22px;
    margin-top: 9px;
    margin-bottom: 9px;
    transition: 0.3s;
    font-weight: 500;
    z-index: 11;
    position: relative;
}
 
.category-small-box-alt i {
    font-size: 42px;
    height: 42px;
    display: inline-block;
    margin-top: 20px;
    color: #f91942;
    transition: 0.3s;
    z-index: 11;
    position: relative;
}

/* Colored Category Boxes */
.category-small-box-alt { 
    background-color: #fff;
}
 
.category-small-box-alt:hover h4,
.category-small-box-alt:hover i {
    color: #fff;
    transition: 0.3s;
}
 
.category-small-box-alt .category-box-counter-alt {
    font-size: 13px;
    font-weight: 500;
    color: #909090;
    border-radius: 50px;
    background-color: #f6f6f6;
    display: block;
    width: 40px;
    text-align: center;
    margin: 0 auto;
    left: auto;
    right: auto;
    margin-bottom: 12px;
    transition: 0.4s;
    padding: 2px 0;
    line-height: 21px;
    height: 25px;
    z-index: 11;
    position: relative;
}
 
.category-small-box-alt:hover .category-box-counter-alt { 
    color: #fff;  
    background-color: #f91942;
}
 
.category-small-box-alt img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: 4px;
    z-index: 9;
    opacity: 0;
    transition: 0.4s;
}
 
.category-small-box-alt:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    background-color: #333;
    border-radius: 4px;
    opacity: 0;
    z-index: 10;
    transition: 0.4s;
}
.category-small-box-alt:hover:before { opacity: 0.7; }
.category-small-box-alt:hover img {
    opacity: 1;
}
 
/* Media Queries For Small Category Boxes */
@media (max-width: 768px) {
    .category-small-box-alt { width: calc(100% * (1/2) - 25px); }
}
@media (min-width: 768px) {
    .category-small-box-alt { width: calc(100% * (1/3) - 25px); }
}
@media (min-width: 992px) {
    .category-small-box-alt { width: calc(100% * (1/3) - 25px); }
}
@media (min-width: 1240px) {
    .category-small-box-alt { width: calc(100% * (1/5) - 25px); }
}
 
@media (max-width: 1240px) {
    .msps-shapes, .main-search-photo-slider, .msps-slider .slick-slide, .msps-slider {
        height: 520px;
        width: 470px;
    }
    .main-search-photo-slider { top: 40px; }
 
    .highlighted-categories-headline, .highlighted-categories, .main-search-headlines {
        padding-right: 500px;
    }
}
 
@media (max-width: 992px) {
 
    .highlighted-categories-headline, .highlighted-categories, .main-search-headlines {
        padding-right: 0px;
    }
    .main-search-photo-slider { display: none; }
    .msps-container {}
    .msps-shapes { left: 0; right: 0; width: 100%;}
    .container.msps-container { overflow: hidden; padding: 0; margin: 0; width: 100%;}
    .shape-b { display: none; }
}
 
@media (max-width: 991px) {
    .main-search-input {
        border-radius: 0;
        display: block;
        padding: 0;
        max-height: 100%;
        background-color: transparent;
        box-shadow: none;
    }
    .main-search-container.plain-color { height: 700px; }
    .main-search-container.plain-color .main-search-input { margin-top: 30px;}
    .main-search-container.plain-color h4 { margin-top: 0; }
    .main-search-container.plain-color h2 { margin-bottom: 0; }
    .main-search-container.plain-color .highlighted-categories-headline { margin-top: 30px; }
}

/* Google Autocomplete
------------------------------------- */
body .pac-item {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: 0.2s;
    padding: 5px 15px;
}

body .pac-container {
    border-radius: 0 0 4px 4px;
    box-shadow: none;
    border: 1px solid #e0e0e0;
    border-top: none;
    box-sizing: content-box;
    margin-top: -2px;
    font-family: "Raleway";
}

/* Autocomplete for homepage */
.main-search-input .pac-container {
    left: 0 !important;
    top: 54px !important;
}

.input-with-icon i,
.main-search-input-item.location a {
	padding: 5px 10px;
	z-index: 101;
}

#autocomplete-container,
#autocomplete-input {
    position: relative;
    z-index: 101;
}

.main-search-input.gray-style .main-search-input-item.location a,
.main-search-input.gray-style #autocomplete-input { background: transparent; }
.main-search-input.gray-style #autocomplete-input { padding-right: 36px; }

@media (min-width: 992px) {
	.main-search-input .pac-container {
	    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
	    border: none;
	    padding-top: 45px;
	    z-index: 9;
	    left: 0 !important;
	    top: 1px !important;
	    border-radius: 4px;
	}

	.main-search-input.gray-style .pac-container {
	    box-shadow: none;
	    border: 1px solid #e0e0e0;
	}

	.main-search-input-item,
	.main-search-input-item #autocomplete-input {
		padding: 0 15px;
	}
}

/* Range Slider
------------------------------------- */
.rangeslider,
.rangeslider__fill {
  display: block;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.rangeslider {
  background: #e6e6e6;
  position: relative;
  margin: 25px 0;
}

.rangeslider--horizontal {
  height: 3px;
  width: 100%;
}

.rangeslider--vertical {
  width: 20px;
  min-height: 150px;
  max-height: 100%;
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.rangeslider__fill {
  background: #66676b;
  position: absolute;
}
.rangeslider--horizontal .rangeslider__fill {
  top: 0;
  height: 100%;
}
.rangeslider--vertical .rangeslider__fill {
  bottom: 0;
  width: 100%;
}

.rangeslider__handle {
	background: white;
	border: 2px solid #66676b;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.15);
	cursor: pointer;
	display: inline-block;
	position: absolute;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	width: 20px;
	height: 20px;
  	top: 50%;
  	transform: translateY(-50%);
}

.rangeslider--vertical .rangeslider__handle {
  left: -10px;
  touch-action: pan-x;
  -ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

.range-output {
	font-size: 18px;
	font-weight: 400;
	color: #666;
}
.range-output:after {
	content: "km";
}

.data-radius-title {
	font-style: normal;
	font-size: 15px;
	color: #888;
	font-weight: 400;
	margin-top: 0;
	display: block;
}

/* Chosen Plugin
------------------------------------- */
.chosen-container {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	zoom: 1;
	*display: inline;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.chosen-container * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.chosen-container .chosen-drop {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	z-index: 990;
	width: 100%;
	border: 1px solid #dbdbdb;
	background-color: #fff;
	border-top: 0;
	border-radius: 0 0 4px 4px;
/*	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);*/
}

.chosen-container.chosen-with-drop .chosen-drop { left: 0; }
.chosen-container a { cursor: pointer; }

/* Single Select box */
.chosen-container-single .chosen-single {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 0 0 18px;
	height: 51px;
	line-height: 50px;
	border: 1px solid #dbdbdb;
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
	background-color: #fff;
	color: #888;
	text-decoration: none;
	white-space: nowrap;
	font-weight: 500;
	border-radius: 4px;
}

.chosen-container-active.chosen-with-drop .chosen-single { border-radius: 4px 4px 0 0; }

.chosen-container-active .chosen-drop,
.chosen-container-single .chosen-drop {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}
.chosen-container-active.chosen-with-drop .chosen-drop {
	opacity: 1;
	visibility: visible;
}

.chosen-container-single .chosen-default { color: #999; }

.chosen-container-single .chosen-single span {
	display: block;
	overflow: hidden;
	margin-right: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #888;
}

.chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; }

.chosen-container-single .chosen-single div {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 18px;
	height: 100%;
}

.chosen-container-single .chosen-single div:after {
	content: "\f107";
	font-family: "FontAwesome";
	font-size: 18px;
	margin: 1px 0 0 0;
	right: 20px;
	position: relative;
	width: auto;
	height: auto;
	display: inline-block;
	color: #c0c0c0;
	float: right;
	font-weight: normal;
	transition: transform 0.3s;
	transform: translate3d(0,0,0) rotate(0deg);
}

.chosen-container-active.chosen-with-drop .chosen-single div:after { transform: translate3d(0,0,0) rotate(180deg); }

.chosen-container-single .chosen-search {
	position: relative;
	z-index: 1010;
	margin: 0;
	padding: 3px 8px;
	white-space: nowrap;
}

.chosen-container-single .chosen-search input[type="text"] {
	margin: 1px 0;
	padding: 6px 20px 6px 6px;
	width: 100%;
	height: 40px;
	outline: 0;
	margin-bottom: 10px !important;
	border: 1px solid #ddd !important;
	background-color: #fbfbfb !important;
	display: block;
	position: relative;
	z-index: 9;
	background-color: #fafafa;
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.04);
}

.chosen-container-single .chosen-search:before {
	content: "\f002";
	font-family: "FontAwesome";
	font-size: 15px;
	margin: 0 15px 0 0;
	top: 12px;
	position: relative;
	width: 11px;
	height: 5px;
	display: inline-block;
	color: #aaa;
	float: right;
	font-weight: normal;
	z-index: 10;
	transition: transform 0.3s;
}

.chosen-container-single .chosen-drop {
	margin-top: -1px;
	background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
	position: absolute;
	left: -9999px;
}

/* Results */
.chosen-container .chosen-results {
	color: #888;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0 4px 8px 0;
	padding: 0 4px 0 8px;
	max-height: 300px;
}

.chosen-container .chosen-results li {
	display: none;
	margin: 0;
	padding: 9px 10px;
	list-style: none;
	line-height: 15px;
	word-wrap: break-word;
	-webkit-touch-callout: none;
}

.chosen-container-multi .chosen-results li { padding: 10px 18px; transition: color 0.3s; }

.chosen-container .chosen-results li.active-result {
	display: list-item;
	cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
	display: list-item;
	color: #ccc;
	cursor: default;
}

.chosen-container .chosen-results li.highlighted {
	background-color: transparent;
	border-radius: 0;
	color: #66676b;
	transition: color 0.2s ease-in-out;
}

.chosen-container .chosen-results li.no-results {
	color: #888;
	display: list-item;
	background-color: #fff;
}

.chosen-container-multi .chosen-results li.no-results { background-color: #fff; }

.chosen-container .chosen-results li.group-result {
	display: list-item;
	font-weight: bold;
	cursor: default;
}

.chosen-container .chosen-results li.group-option { padding-left: 15px; }

.chosen-container .chosen-results li em {
	font-style: normal;
	text-decoration: underline;
}

/* Multi Selectbox */
.chosen-container-multi .chosen-choices {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0 0 0 18px;
	height: auto;
	border: 1px solid #dbdbdb;
	background-color: #fff;
	text-decoration: none;
	white-space: nowrap;
	line-height: 33px;
	cursor: pointer;
	margin: 0;
	border-radius: 4px;
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
}

.chosen-container-multi.chosen-with-drop .chosen-choices {
	border-radius: 4px 4px 0 0;
}

.chosen-container-multi .chosen-choices li {
	float: left;
	list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
	margin: 0;
	padding: 0;
	height: 49px;
	outline: 0;
	border: 0 !important;
	background: transparent !important;
	color: #888;
	line-height: normal;
	font-weight: 500;
	box-shadow: none;
	transition: none;
}

.chosen-container-multi .chosen-choices li.search-choice {
	position: relative;
	margin: 10px 6px 0 -4px;
	padding: 0 25px 0 8px;
	max-width: 100%;
	background-color: #66676b;
	line-height: 29px;
	color: #fff;
	cursor: default;
	font-weight: 500;
	border-radius: 3px;
}

.chosen-container-multi .chosen-choices li.search-choice span { word-wrap: break-word; }

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
	position: absolute;
	top: -2px;
	right: 7px;
	display: block;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
	content: "\f00d";
	font-family: "FontAwesome";
	font-size: 13px;
	top: 1px;
	position: relative;
	width: 11px;
	height: 5px;
	display: inline-block;
	color: #fff;
	float: right;
	font-weight: normal;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
	padding-right: 5px;
	border: 1px solid #ccc;
	background-color: #e4e4e4;
	color: #888;
}

.chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; }

.chosen-container-multi .chosen-results {
	margin: 0;
	padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
	display: list-item;
	color: #ccc;
	cursor: default;
}

.chosen-container.chosen-container-multi .chosen-drop { opacity: 0; visibility: hidden; padding: 10px 0; }
.chosen-container.chosen-container-multi.chosen-with-drop.chosen-container-active .chosen-drop { opacity: 1; visibility: visible; }

/* Active */
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices,
.chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid #e0e0e0; }

.chosen-container-active.chosen-with-drop .chosen-single div {
	border-left: none;
	background: transparent;
}

.chosen-container-active .chosen-choices li.search-field input[type="text"] { 	color: #888 !important; }

/* Custom Scrollbar for -wekbit */

.chosen-drop ::-webkit-scrollbar { width: 10px; }

.chosen-drop ::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
}

.chosen-drop ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.2);
}

.chosen-drop ::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.3);
}

/* Input With Icon */
.input-with-icon {
	position: relative;
}

.input-with-icon i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	padding: 0 0 0 19px;
	color: #999;
	transition: 0.2s;
	pointer-events: none;
}

.input-with-icon input { padding-left: 47px !important }
.input-with-icon.location input { padding-left: 20px !important }

.input-with-icon.location a i {
	position: absolute;
	right: 1px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	padding: 15px 20px 15px 15px;
	background: #fff;
	pointer-events: all
}

.input-with-icon.location a i:hover {
	color: #66676b;
}

/* Sort by custom select
------------------------------------- */
.sort-by {
	position: relative;
	top: 9px;

}
.sort-by label,
.sort-by .sort-by-select {
	display: inline-block;
	float: right;
}

.sort-by-select select {
	border-radius: 50px;
	color: #777;
	border: none;
	background-color: #f0f0f0;
	height: auto;
	padding: 7px 7px 7px 15px;
	line-height: 22px;
	box-shadow: none;
}

.sort-by label {
	line-height: 40px;
	margin-top: 1px;
	padding: 0;
}

.sort-by .chosen-container-single .chosen-single {
    height: 36px;
    line-height: 34px;
    border: 1px solid #fff;
    background-color: #fff;
    width: 100%;
    display: inline-block;
    padding: 0 14px 0 16px;
    box-shadow: none;
    color: #666;
    font-weight: 600;
    font-size: 15px;
    border-radius: 50px;
    transition: all 0.3s;
    display: inline-block;
}

.sort-by .chosen-container-active .chosen-choices,
.sort-by .chosen-container-active.chosen-with-drop .chosen-single,
.sort-by .chosen-single:hover {
    background: #f3f3f3;
}

.sort-by .chosen-container .chosen-drop {
	padding-top: 10px;
    border: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    border-radius: 3px;
    width: 200px;
    margin-left: 10px;
    background: #fff;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08);
	z-index: 999;
}

.sort-by .chosen-container.chosen-with-drop .chosen-drop,
.sort-by .chosen-container .chosen-drop {left: auto; right: -1px; }

.sort-by .chosen-container-single .chosen-single div:after {
	color: #66676b;
	right: 0;
}

.sort-by .chosen-container-single .chosen-default { color: #66676b; }

.sort-by .chosen-container-single .chosen-single span {
	margin-right: 0px;
	color: #666;
	font-weight: 600;
	transition: all 0.2s;
}

.sort-by .chosen-container-single .chosen-single div {
    position: relative;
    line-height: 33px;
    top: 0;
	margin-left: 0;
    display: inline-block;
}

.sort-by .chosen-container-single .chosen-single span {
    display: inline-block;
    margin-right: 0;
    vertical-align: top;
}

/* Custom Chosen Dropdown
------------------------------------- */
.main-search-input-item .chosen-container-single .chosen-single,
.main-search-input-item .chosen-single.chosen-container-active {
    position: relative;
    display: block;
    overflow: visible;
    padding: 0 0 0 15px;
    height: 44px;
    line-height: 44px;
    border: 1px solid #fff;
    background-color: #fff;
    color: #888;
    border-radius: 4px 4px 0 0;
    z-index: 100;
    box-shadow: none;
    transition: all 0.3s;
}

/* Active */
.main-search-input-item .chosen-container-active .chosen-single,
.main-search-input-item .chosen-container-active .chosen-choices { border: 1px solid #fff; }

.main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single {
	border: 1px solid #fff;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
}

.main-search-input-item .chosen-container {
	font-size: 16px;
}

.main-search-input-item .chosen-container .chosen-drop {
	border: none;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
	font-size: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	z-index: 99;
}

.main-search-input-item .chosen-single:after {
	content: "";
	position: absolute;
	bottom: -5px;
	display: block;
	width: 100%;
	left: 0;
	height: 10px;
	background: #fff;
	z-index: 112;
	opacity: 1;
	tranition: all 0.3s;
}

.main-search-input-item .chosen-container-single .chosen-single span {
    display: inline-block;
    	vertical-align: top;
}

.main-search-input .chosen-container-single .chosen-single div {
	display: inline-block;
	position: relative;
	top: -2px;
}

.main-search-input .chosen-container-single .chosen-search {
    padding: 3px 15px;
    margin-bottom: 5px;
}

.main-search-input .chosen-container-single .chosen-search input[type="text"] {
    margin: 1px 0;
    padding: 6px 20px 6px 6px;
    width: 100%;
    height: 40px;
    outline: 0;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    display: block;
    position: relative;
    z-index: 9;
    background-color: #fcfcfc;
    border-radius: 4px;
}

.main-search-input-item .chosen-container .chosen-results {
	position: relative;
	z-index: 10000
}

/* Style for gray main input version */
.gray-style .main-search-input-item .chosen-container-single .chosen-single,
.gray-style .main-search-input-item .chosen-single.chosen-container-active {
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
}

.main-search-input-item .chosen-container.chosen-with-drop {
/*	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08);*/
    border-radius: 4px;
}

.gray-style .main-search-input-item .chosen-single::after { display: none; }

.gray-style .main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single,
.gray-style .main-search-input-item .chosen-container .chosen-drop {
	box-shadow: none;
	border: 1px solid #e0e0e0;
	background: #fff;
}

@media (min-width: 991px) {
	.gray-style .main-search-input-item .chosen-single {
		border-bottom: none !important;
	}
}

.gray-style .main-search-input-item .chosen-container .chosen-drop {
	border-top: none ;
}

/* Input with dropdown
------------------------------------- */
.select-input {
	position: relative;
}

.select-input input { position: relative; z-index: 101; }

.select-input .select {
	position: absolute;
	top: -8px;
}

.select-hidden {
	display: none;
	visibility: hidden;
}

.select {
	cursor: pointer;
	display: inline-block;
	position: relative;
	font-size: 15px;
	color: #fff;
	width: 100%;
	height: 51px;
}

.select-styled { opacity: 0; }

.select-options {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 990;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #e0e0e0;
	background-color: #fcfcfc;
	padding: 0 4px;
	padding-top: 8px;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-sizing: border-box;
}

.select-list-container {
	padding: 0 4px;
	max-height: 300px;
	overflow: auto;
	display: inline-block;
	width: 100%
}

ul.select-options li {
	margin: 0;
	padding: 0;
	transition: all 0.15s ease-in;
	color: #888;
	margin: 0;
	padding: 10px 10px;
	list-style: none;
	line-height: 15px;
	border-radius: 4px;
}

.select-options li:hover {
	color: #fff;
	background-color: #66676b;
}

.select-options li[rel="hide"] {
  display: none;
}

.select-options ::-webkit-scrollbar { width: 10px; }

.select-options ::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
}

.select-options ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.2);
}

 .select-options ::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.3);
}

/* Panel Dropdown
------------------------------------- */
.panel-dropdown {
	position: relative;
	display: inline-block
}

.panel-dropdown a {
	color: #666;
	font-weight: 600;
	font-size: 15px;
	border-radius: 50px;
	padding: 3px 14px;
	transition: all 0.3s;
	display: inline-block;
}

.panel-dropdown.active a,
.panel-dropdown a:hover {
	background: #f3f3f3;
}

.panel-dropdown a:after {
	content: "\f107";
	font-family: "FontAwesome";
	font-size: 16px;
	color: #66676b;
	font-weight: 500;
	padding-left: 0;
	transition: all 0.3s;
	margin-left: 6px;
	display: inline-block;
}

.panel-dropdown.active a:after { transform: rotate(180deg); }

.panel-dropdown .panel-dropdown-content {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	position: absolute;
	top: 44px;
	left: 0px;
	z-index: 110;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.18);
	border-radius: 4px;
	box-shadow: 0 12px 35px 2px rgba(0, 0, 0, 0.12);
	padding: 20px 24px;
	overflow-y: auto;
	white-space: normal;
	width: 460px;
}

.panel-dropdown.wide .panel-dropdown-content { width: 570px; }

.panel-dropdown.active .panel-dropdown-content {
	opacity: 1;
	visibility: visible;
}

.listings-container {
	opacity: 1;
	transition: all 0.3s;
}

.fs-inner-container.content.faded-out .listings-container {
	opacity: 0.2;
	background: #fff;
	pointer-events: none;
}

.fs-inner-container.content.faded-out{
	background-color: #fcfcfc;
}

.panel-dropdown .checkboxes label { margin-bottom: 10px; display: block; }
.panel-dropdown-content.checkboxes { padding: 28px; }

.panel-dropdown .row { margin-left: -10px; margin-right: -10px; }

button.panel-cancel,
button.panel-apply {
	background: none;
	padding: 5px 16px;
	display: block;
	outline: none;
	border: none;
	font-weight: 600;
	float: right;
	margin: 0;
	font-size: 15px;
	border-radius: 50px;
	background-color: #66676b;
	color: #fff;
	transition: all 0.3s;
}

button.panel-apply:hover {
	opacity: 0.9;
}

button.panel-apply:active {
	transform: translateY(-2px);
}

button.panel-cancel {
	float: left;
	background-color: #f0f0f0;
	color: #666;
	opacity: 1;
}

button.panel-cancel:hover { background-color: #e9e9e9; }
button.panel-cancel:active { transform: translateY(-2px); }

.panel-buttons {
	width: 100%;
	margin-top: 13px;
}

/* Float Right */
.panel-dropdown.float-right {
	float: right;
}

.panel-dropdown.float-right .panel-dropdown-content {
	left: auto;
	right: 0;
}

/* Float Right */
.fullwidth-filters .panel-dropdown { margin-left: 3px }

/* Styles for filters for full-width layout */
.fullwidth-filters {
	display: inline-block;
	width: 100%;
	position: relative;
	top: 15px;
}

.fullwidth-filters .sort-by {
	top: -1px;
	right: -1px;
}

/* More Search Options For Sidebar
------------------------------------- */
.more-search-options.relative {
	position: relative;
	margin-top:0;
	opacity: 1;
	visibility: visible;
	transform: translate3d(0,0,0);
	transition: none;
	display: none;
}

.more-search-options.relative.active { transform: translate3d(0,0,0); }

/* Trigger */
.more-search-options-trigger {
	color: #666;
	font-weight: 500;
	font-size: 15px;
	border-radius: 3px;
	padding: 3px 0;
	transition: all 0.3s;
	display: inline-block
}

.more-search-options-trigger:before { content: attr(data-open-title); }
.more-search-options-trigger.active:before { content: attr(data-close-title); }

.more-search-options-trigger:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 16px;
    color: #66676b;
    font-weight: 500;
    padding-left: 0;
    transition: all 0.3s;
    margin-left: 6px;
    display: inline-block;
}

.more-search-options-trigger.active:after { transform: rotate(180deg); }

.more-search-options-trigger:hover {
   	color: #444;
}

/* Layout Switcher Buttons
------------------------------------- */
.layout-switcher a {
	width: 39px;
	height: 39px;
	background-color: #eee;
	display: inline-block;
	color: #9d9d9d;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	transition: all 0.4s;
	border-radius: 50%;
	font-weight: 500;
	overflow: hidden;
	position: relative;
	margin-right: 1px;
}

.layout-switcher a.active {
	color: #66676b;
	background-color: #fff;
	border: 1px solid #66676b;
	line-height: 38px;
}

.layout-switcher a i {
	position: relative;
	z-index: 11;
}

.layout-switcher a:hover {
	color: #fff;
	background-color: #66676b;
}

/* Half Screen Map
------------------------------------- */
.fs-container {
	height: 100%;
	width: 100%;
}

.fs-container #map-container {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 990;
	margin-bottom: 0px;
}

.fs-content {
	max-height: 100%;
	padding: 0;
}

.fs-container section.search {
	padding: 45px 40px;
	background-color: #fff;
}

.fs-container .fs-listings {
	padding: 0 25px;
	margin: 0;
}

.fs-switcher {
	padding: 0 25px;
	margin: 0;
}

/* Inner Containers */
.fs-inner-container {
	width: 50%;
	float: left;
	display: inline-block;
}

.fs-inner-container.content {
	width: 55%;
	background-color: #f7f7f7;
	z-index: 995;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);
	position: relative;
	padding-top: 80px;
}

.fs-inner-container {
	width: 45%;
	background-color: #fff;
	z-index: 10;
}

.fs-container .copyrights { padding: 30px 0; font-size: 15px; }

#header-container.fixed {
	position: fixed;
    top: 0;
    width: 100%;
    z-index: 1100;
    background-color: #fff;
}

.fs-inner-container.map-fixed { height: 100vh; position: fixed; top: 0; padding-top: 80px }

button.fs-map-btn.button {
	position: relative;
	float: right;
	top: 6px;
	padding: 10px 40px;
	margin: 0;
}

.fs-container .more-search-options-trigger {
	position: relative;
	top: 10px;
}

.showing-results {
	color: #888;
	font-weight: 500;
	margin: 5px 0 25px 0;
}

.listings-container.fs-listings {
	left: 0;
	width: 100%;
	position: relative;
}

.listings-container.fs-listings.grid-layout {
	left: 0;
	width: 100%;
	position: relative;
}

.listings-container.fs-listings.list-layout {
	padding: 0 40px;
}

.listings-container.fs-listings.list-layout .listing-content { flex: 4; }
.listings-container.fs-listings.list-layout .listing-img-container { flex: 0 auto; max-width: 300px; }

/* Grid layout below 1366px screens */
@media (max-width:1365px) {
	.listings-container.fs-listings.grid-layout .listing-item {
		width: 100%;
		margin: 0 0 30px 0;
	}
	.listings-container.fs-listings.grid-layout { padding: 0 40px; }

	.listings-container.fs-listings.list-layout .listing-item { display: block; }
	.listings-container.fs-listings.list-layout .details.button.border { display: none; }
	.listings-container.fs-listings.list-layout .listing-img-container { max-width: 100%; }

	.fs-switcher .layout-switcher { display: none; }

}

/* Forms Grid */
.col-fs-12,
.col-fs-11,
.col-fs-10,
.col-fs-9,
.col-fs-8,
.col-fs-7,
.col-fs-6,
.col-fs-5,
.col-fs-4,
.col-fs-3,
.col-fs-2,
.col-fs-1   {
	float: left;
	padding: 0 10px;
}

.col-fs-12  { width: 100% }
.col-fs-11  { width: 91.66666667% }
.col-fs-10  { width: 83.33333333% }
.col-fs-9   { width: 75% }
.col-fs-8   { width: 66.66666667% }
.col-fs-7   { width: 58.33333333% }
.col-fs-6   { width: 50% }
.col-fs-5   { width: 41.66666667% }
.col-fs-4   { width: 33.33333333% }
.col-fs-3   { width: 25% }
.col-fs-2   { width: 16.66666667% }
.col-fs-1   { width: 8.33333333% }

@media (max-width:1599px) {
	.col-fs-12 ,
	.col-fs-11,
	.col-fs-10,
	.col-fs-9,
	.col-fs-8,
	.col-fs-7,
	.col-fs-6   { width: 100% }

	.col-fs-5,
	.col-fs-4,
	.col-fs-3,
	.col-fs-2,
	.col-fs-1   { width: 50% }
}

@media (max-width: 992px) {
	.col-fs-12 ,
	.col-fs-11,
	.col-fs-10,
	.col-fs-9,
	.col-fs-8,
	.col-fs-7,
	.col-fs-6,
	.col-fs-5,
	.col-fs-4,
	.col-fs-3,
	.col-fs-2,
	.col-fs-1   { width: 100% }

	.overflow-hidden { overflow: hidden; }
}

/* Alignment */
.row.with-forms input,
.row.with-forms input[type="text"],
.row.with-forms input[type="password"],
.row.with-forms input[type="email"],
.row.with-forms input[type="number"],
.row.with-forms textarea,
.row.with-forms input,
.row.with-forms select,
.row.with-forms .chosen-container {
	margin-bottom: 18px;
}

.row.with-forms {
	margin-left: -10px;
	margin-right: -10px;
}

.with-forms .col-xs-1, .with-forms .col-sm-1, .with-forms .col-md-1, .with-forms .col-lg-1,
.with-forms .col-xs-2, .with-forms .col-sm-2, .with-forms .col-md-2, .with-forms .col-lg-2,
.with-forms .col-xs-3, .with-forms .col-sm-3, .with-forms .col-md-3, .with-forms .col-lg-3,
.with-forms .col-xs-4, .with-forms .col-sm-4, .with-forms .col-md-4, .with-forms .col-lg-4,
.with-forms .col-xs-5, .with-forms .col-sm-5, .with-forms .col-md-5, .with-forms .col-lg-5,
.with-forms .col-xs-6, .with-forms .col-sm-6, .with-forms .col-md-6, .with-forms .col-lg-6,
.with-forms .col-xs-7, .with-forms .col-sm-7, .with-forms .col-md-7, .with-forms .col-lg-7,
.with-forms .col-xs-8, .with-forms .col-sm-8, .with-forms .col-md-8, .with-forms .col-lg-8,
.with-forms .col-xs-9, .with-forms .col-sm-9, .with-forms .col-md-9, .with-forms .col-lg-9,
.with-forms .col-xs-10, .with-forms .col-sm-10, .with-forms .col-md-10, .with-forms .col-lg-10,
.with-forms .col-xs-11, .with-forms .col-sm-11, .with-forms .col-md-11, .with-forms .col-lg-11,
.with-forms .col-xs-12, .with-forms .col-sm-12, .with-forms .col-md-12, .with-forms .col-lg-12 {
	padding: 0 10px;
}

/* User Profile Page
------------------------------------- */
.comment-by-listing {
	display: inline-block;
	color: #888;
}
.comment-by-listing a { color: #888; }
.comment-by-listing a:hover { color: #66676b; }

/* Verified Icon */
.verified-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	font-size: 22px;
	color: #19b453;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	position: relative;
	top: 3px;
	margin-left: 2px;
}
.verified-icon:before {
	content: "\f058";
	font-family: "FontAwesome";
	position: relative;
	z-index: 11;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.verified-icon:after {
	position: relative;
	z-index: 9;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	display: block;
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	background-color: #fff;
}

/* Verified Badge */
.verified-badge {
	background-color: #19b453;
	border-radius: 4px;
	color: #fff;
	text-align: center;
	padding: 12px 20px;
	font-size: 17px;
	font-weight: 500;
	cursor: help;
	position: relative;
	transition: 0.3s;
	display: block;
}

.verified-badge i {
	font-size: 22px;
	padding: 0 4px 0 0;
	position: relative;
	top: 3px;
}

.verified-badge .tip-content {
	transform: translate(-50%, 100%);
	-ms-transform: translate(-50%, 100%);
	padding: 20px;
	border-radius: 0 0 4px 4px;
	max-width: auto;
	top: auto;
	bottom: 0;
}

.verified-badge:hover { border-radius: 4px 4px 0 0; }

.verified-badge:hover .tip-content {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 100%);
	-ms-transform: translate(-50%, 100%);
}

.verified-badge .tip-content:after {
	font-family: "FontAwesome";
	content:"\f0d8";
	position: absolute;
	top: -3px;
	bottom: auto;
	left: 50%;
	font-size: 22px;
	color: #333;
	transform: translate(-50%,-50%);
}

/* User Profile Titlebar */
.user-profile-titlebar {
	position: relative;
	margin-top: 3px;
	display: inline-block;
}

.user-profile-avatar {
	max-width: 100px;
	height: auto;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: -12px;
	image-rendering: -webkit-optimize-contrast;
}

.user-profile-avatar img { width: 100%; }

.user-profile-name {
	position: relative;
	left: 127px;
}

#titlebar .user-profile-name h2 {
	font-size: 28px;
	display: inline-block;
	margin-bottom: -3px;
}

.user-profile-titlebar .star-rating .rating-counter {
    top: 5px;
    font-size: 16px;
}

.browse-all-user-listings { text-align: center; }

.browse-all-user-listings a {
	position: relative;
	font-weight: 600;
	font-size: 15px;
	left: 0;
	z-index: 10;
	text-align: center;
	display: inline-block;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s;
	padding: 8px 25px;
	color: #666;
	background-color: #f2f2f2;
	border-radius: 50px;
	margin: 15px 0 0 0;
}

.browse-all-user-listings a i {
	padding-left: 5px;
	color: #66676b;
	font-size: 16px;
}

.browse-all-user-listings a:hover { color: #333; }

@media (max-width: 768px) {
	body .user-profile-avatar {
		max-width: 60px;
		top: 2px;
	}

	body .user-profile-name {
		position: relative;
		left: 75px;
	}

	#titlebar .user-profile-name h2 { font-size: 22px; }
	#titlebar span.star { font-size: 14px; }

	.user-profile-titlebar .star-rating .rating-counter {
	    top: 5px;
	    font-size: 14px;
	}

	.user-profile-titlebar .star-rating {
	    margin-top: -9px;
	}
}

@media (max-width: 992px) {
	.user-profile-avatar {
		max-width: 90px;
		top: -7px;
	}
	.user-profile-name {
		position: relative;
		left: 115px;
	}
}

/* Coupon Widget
------------------------------------- */
.coupon-widget {
	margin-top: 35px;
	border-radius: 4px;
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	color: #fff;
	transition: 0.3s;
	display: block;
}

.coupon-widget:hover {
	transform: translateY(-5px)
}

.coupon-widget:before {
	content: "";
	background-color: #222;
	opacity: 0.8;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	border-radius: 4px;
	z-index: 1;
}

.coupon-widget a.coupon-top {
	padding: 32px 30px;
	position: relative;
	z-index: 10;
	text-align: center;
	cursor: default;
	display: block;
	cursor: pointer;
    background: rgba(255,255,255,0.07);
}

.coupon-widget a.coupon-top h3 {
	font-weight: 600;
    font-size: 21px;
    line-height: 30px;
    text-align: center;
    padding: 0 30px;
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.coupon-scissors-icon {
	position: absolute;
	top: -15px;
	left: 35px;
	z-index: 100;
	font-size: 20px;
}
.coupon-scissors-icon:after {
	content: "\f0c4";
	font-family: "FontAwesome";
}

.coupon-valid-untill {
    background-color: #fff;
    display: inline-block;
    border-radius: 4px;
    padding: 5px 12px;
    line-height: 20px;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
    color: #333;
}

.coupon-how-to-use {
	padding: 0 20px;
	font-size: 14px;
	line-height: 22px;
	margin-top: 15px;
	color: rgba(255,255,255,0.85);
}

.coupon-how-to-use strong { color: #fff; }

.coupon-widget .coupon-bottom {
	border-top: 2px dashed rgba(255,255,255,0.3);
	padding: 20px;
	margin: 0 0px;
	position: relative;
	z-index: 10;
	text-align: center;
	border-radius: 0 0 4px 4px;
}

.coupon-code {
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    padding: 7px 20px;
    border-radius: 2px;
    position: relative;
    z-index: 11;
    text-transform: uppercase;
	transition: 0.4s;
    background-color: rgba(255,255,255,0.09);
    border: 2px dashed rgba(255,255,255,0.29);
}

.code-button:hover,
.code-button {
	text-align: center;
	border-radius: 50px;
	width: 100%;
	display: block;
	font-size: 15px;
	font-weight: 600;
	padding: 10px;
	line-height: 24px;
	transition: 0.3s;
	background-color: #eee;
	color: #777;
	display: none;
}

.code-button:hover {
	background-color: #f91942;
	color: #fff;
}

.coupon-link-icon {
	position: absolute;
	top: 15px;
	right: 18px;
	font-size: 16px;
}

.coupon-link-icon:before {
	font-family: "FontAwesome";
	content: "\f08e";
	color: #fff;
}

.coupon-widget .coupon-bottom:before,
.coupon-widget .coupon-bottom:after {
	content: "";
	width: 22px;
	height: 22px;
	display: inline-block;
	position: absolute;
	top: 0;
	z-index: 10;
	left: 0;
	background-color: #fff;
	border-radius: 100%;
	transform: translate(-50%, -50%);
}

.coupon-widget .coupon-bottom:after {
	left: initial;
	right: 0;
	transform: translate(50%, -50%);
}

.coupon-widget:before,
.coupon-bottom {
	background-color: #282828;
}

@media (max-width: 480px) {
	.coupon-widget a.coupon-top { padding-left: 20px; padding-right: 20px; }
}

/* Booking Page
------------------------------------- */
.payment-logo {
	height: 24px;
	position: absolute;
	right: 19px;
	top: 18px;
	image-rendering: -webkit-optimize-contrast;
}

.payment-logo.paypal {
	height: 16px;
	top: 22px;
}

.payment-tab-trigger > input {
	position: absolute;
	visibility: hidden;
}

.payment-tab-trigger {
	padding: 0px 20px;
}

.payment-tab-trigger > label {
	cursor: pointer;
	display: block;
	position: relative;
	top: 0;
	padding: 14px 0;
	top: 1px;
	margin-bottom: 0;
	font-weight: 500;
}

.payment-tab-trigger > label::before {
	transition: 0.2s;
	box-sizing: border-box;
	background-color: #fff;
	border: 2px solid #d0d0d0;
	border-radius: 100%;
	content: "";
	display: inline-block;
	margin-right: 10px;
	position: relative;
	top: 4px;
	width: 20px;
	height: 20px;
}

.payment-tab-trigger > label::after {
	background: #fff;
	border-radius: 100%;
	content: "";
	display: inline-block;
	position: absolute;
	left: 7px;
	top: 25px;
	width: 6px;
	height: 6px;
	transition: 0.2s;
	transform: scale(0);
}

.payment-tab-trigger > input:checked ~ label::before { border-color: #66676b; }

.payment-tab-trigger > input:checked ~ label::after {
	background-color: #66676b;
	transform: scale(1);
}

.payment {
	border: 2px solid #f2f2f2;
	border-radius: 4px;
	overflow: hidden;
}

.payment-tab {
	background: #f2f2f2;
	box-sizing: border-box;
	max-height: 60px;
	overflow: hidden;
	position: relative;
	transition: all 0.3s 0s ease-in-out;
	width: 100%;
}

.payment-tab:first-of-type { border-radius: 4px 4px 0 0; }
.payment-tab:last-of-type { border-radius: 0 0 4px 4px; }

.payment-tab.payment-tab-active {
	max-height: 400px;
	background: #fff;
}

@media (max-width: 991px) {
	.payment-tab.payment-tab-active { max-height: 800px; }
}

.payment-tab-content {
	padding: 0 20px 20px 20px;
	background-color: #fff;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s ease-in-out;
}

.payment-tab.payment-tab-active .payment-tab-content {
	visibility: visible;
	opacity: 1;
}

.card-label > input {
	box-sizing: border-box;
	display: block;
	height: 51px;
	margin: -14px auto 5px;
	padding: 5px 15px 0 15px;
	transition: border-color 0.3s;
	width: 100%;
	border: 1px solid #dbdbdb;
	background-color: #fff;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.06);
}

.card-label > label {
    background-color: #fff;
    display: inline-block;
    margin: 6px auto auto 8px;
    font-size: 13px;
    padding: 0px 7px;
    font-weight: 500;
    color: #909090;
}

.payment-tab p { margin: 10px 0; }

/* Booking Widget */
.opening-hours.summary li { color: #333; }
.boxed-widget.summary { border-radius: 0 0 4px 4px; }
.opening-hours.summary li:hover { color: #66676b; }

.boxed-widget.summary h3 {
    padding: 0 0 25px;
}

.opening-hours.summary li.total-costs {
    font-size: 16px;
    border-top: 1px solid #e8e8e8;
    padding-top: 18px;
    margin-top: 18px;
}

.opening-hours.summary li.total-costs span {
	font-weight: 600;
	color: #66676b;
}

.listing-item-container.compact.order-summary-widget .listing-item {
	border-radius: 4px 4px 0 0;
	cursor: default;
	height: 240px;
}

.listing-item-container.compact.order-summary-widget { margin-bottom: 0; }
.listing-item-container.compact.order-summary-widget:hover { transform: none; }

/* Input With icons */
.input-with-icon.medium-icons i {
	font-size: 21px;
    color: #a0a0a0;
    position: absolute;
    left: -3px;
    bottom: 0px;
    top: auto;
}

.button.booking-confirmation-btn {
	padding: 12px 35px;
	font-size: 16px;
}

/* Booking Confirmation Page */
.booking-confirmation-page {
	text-align: center;
	padding: 40px 0;
}

.booking-confirmation-page i {
	color: #23b35f;
	font-size: 160px;
}

.booking-confirmation-page h2 {
	font-size: 50px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 15px;
	display: block;
}

.booking-confirmation-page p {
	font-size: 20px;
	display: block;
}

.booking-confirmation-page a.button:before { display: none; }
.booking-confirmation-page a.button {
	padding: 11px 35px;
	background-color: #eee;
	color: #444;
	font-weight: 600;
	font-size: 16px;
}

.book-now.button { padding: 9px; margin-bottom: -4px; }

@media (max-width: 991px) {
	.booking-confirmation-page i { font-size: 100px; }
	.booking-confirmation-page p { font-size: 18px; }
	.booking-confirmation-page h2 { font-size: 30px; }
}

/* Custom Dropdown for Booking Widget
------------------------------------- */
.booking-select {
	position: relative;
	z-index: 100;
}

input#booking-date, input#booking-time { z-index: 110; }

.booking-select select,
.booking-select .chosen-container-single .chosen-single {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #909090;
    transition: color 0.3s
}

.booking-select select { padding: 15px 16px; }

.booking-select .chosen-container-active.chosen-with-drop .chosen-single { border-radius: 5px 5px 0 0; }

.booking-select .chosen-container .chosen-drop {
    border: none;
    background-color: #fff;
	box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.booking-select .chosen-single:after {
    content: "";
    position: absolute;
    bottom: -5px;
    display: block;
    width: 100%;
    left: 0;
    height: 10px;
    background: #fff;
    z-index: 112;
    opacity: 1;
    tranition: all 0.3s;
}

.booking-select .chosen-container .chosen-results li {
    padding: 10px;
    line-height: 16px;
    font-size: 16px;
}

.booking-select .chosen-container-single .chosen-single span { transition: 0.2s; }
.booking-select .chosen-container-single .chosen-single:hover span { color: #444; }

.booking-select .chosen-container-single .chosen-single div:after {
    font-size: 20px;
    margin: 9px 0 0 0;
}

/* Listing Page Sidebar
------------------------------------- */
#titlebar.listing-titlebar span a,
#titlebar.listing-titlebar span {
	font-size: 17px;
	color: #888;
	margin-top: 0;
	display: inline-block;
}

#titlebar.listing-titlebar span a i {
	margin-right: 5px;
}

#titlebar.listing-titlebar span a:hover {
	color:  #666;
}

#titlebar.listing-titlebar h1,
#titlebar.listing-titlebar h2 {
	font-size: 28px;
	line-height: 36px;
	margin: 1px 0;
}

#titlebar.listing-titlebar span.listing-tag {
	margin: 0;
	padding: 8px 16px;
	line-height: 15px;
	letter-spacing: 2.5px;
	border-radius: 50px;
	text-transform: uppercase;
	background-color: #fff;
	border: 1px solid #66676b;
	color: #66676b;
	font-size: 10px;
	font-weight: 500;
	position: relative;
	top: -6px;
	margin-left: 10px;
}

.rating-counter a { color: #909090; }
.star-rating .rating-counter a:hover { color: #66676b; }
.numerical-rating .rating-counter a:hover { color: #888; }

#titlebar.listing-titlebar .numerical-rating {
	display: block;
	margin: 2px 0 0 0;
}

#titlebar.listing-titlebar {
	background: transparent;
	margin: 2px 0 0 0;
}

/* alternative listing page */
.single-listing-page-titlebar {
	position: absolute;
	width: 100%;
	height: 200px;
	background: linear-gradient(to bottom, #f7f7f7 0%, rgba(255,255,255,0.5));
}

/* add review btn */
a.button.add-review-btn {
	min-width: 160px;
	text-align: center;
}

a.button.add-review-btn i {
	font-size: 14px;
	position: relative;
	line-height: 0;
	top: 0;
	margin-right: 0;
	letter-spacing: 0;
}

/* back to listings button */
.back-to-listings {
	height: 60px;
	width: 60px;
	background-color: #eee;
	color: #a6a6a6;
	border-radius: 50%;
	display: inline-block;
	float: left;
	position: relative;
	top: 6px;
	margin: 0 25px 0 0;
	text-align: center;
	transition: all 0.4s;
	position: absolute;
	top: 50%;
	left: 15px;
	margin-top: -5px;
	transform: translate(0,-50%);
}

.back-to-listings:before {
	font-family: "simple-line-icons";
	content: "\e605";
	font-size: 20px;
	line-height: 60px;
	left: -1px;
	position: relative;
}

.back-to-listings:hover {
	color: #a6a6a6;
	transform: translate(-4px,-50%);
}

/* titlebar right content */
.titlebar-right-content {
	position: absolute;
	right: 15px;
	display: inline-block;
	top: 50%;
	transform: translateY(-49%);
	text-align: right;
}

/* Hosted by widget */
.hosted-by-title {
    padding: 0 70px 18px 0;
    margin: -4px 0 25px 0;
    display: block;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}

.hosted-by-title h4 {
	font-size: 18px;
	transition: 0.2s;
	line-height: 22px;
	font-weight: 500;
	margin: 4px 0 7px 0;
}

.hosted-by-title h4 a:hover { color: #66676b; }

.hosted-by-title h4 span {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #888;
	margin-bottom: 2px;
}

.hosted-by-avatar {
	max-width: 56px;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
	right: 0;
	top: -8px;
	image-rendering: -webkit-optimize-contrast;
}

/* Fullwidth Property Slider */
.listing-slider-small .item,
.listing-slider .item {
	position: relative;
	background-size: cover;
	background-position: 50%;
	height: 40vh;
	min-height: 400px;
}

.listing-slider,
.listing-slider .item {
	height: 40vh;
	min-height: 400px;
}

.listing-slider-small .item {
	height: 250px;
	min-height: auto;
}

@media(max-width: 1366px) { .listing-slider-small .item { height: 220px; } }
@media(max-width: 1240px) { .listing-slider-small .item { height: 200px; } }
@media(max-width: 768px) { .listing-slider-small .item { height: 300px; } }

.listing-slider-small .item:last-child { border-radius: 0 4px 4px 0; }

.listing-slider-small {
	border-radius: 4px;
	overflow: hidden;
}

a.mfp-gallery { cursor: zoom-in ;}

.listing-slider { background-color: #fff; }

.listing-slider .slick-next:hover,
.listing-slider .slick-prev:hover,
.listing-slider .slick-next,
.listing-slider .slick-prev {
    background-color: rgba(20,20,20,0.45);
    color: #fff;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    text-align: center;
    transition: 0.4s;
}

.listing-slider-small .slick-next:hover,
.listing-slider-small .slick-prev:hover,
.listing-slider-small .slick-next,
.listing-slider-small .slick-prev {
    background-color: rgba(20,20,20,0.45);
    color: #fff;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    transition: 0.4s;
}

.listing-slider-small .slick-next:hover,
.listing-slider-small .slick-next,
.listing-slider .slick-next:hover,
.listing-slider .slick-next {
	right: 15%;
    transform: translate(50px, -50%);
}

.listing-slider-small .slick-prev:hover,
.listing-slider-small .slick-prev,
.listing-slider .slick-prev:hover,
.listing-slider .slick-prev {
	left: 15%;
    transform: translate(-50px, -50%);
}

.listing-slider-small .slick-next:hover,
.listing-slider-small .slick-next {
	right: 50px;
    transform: translate(0, -50%);
}
.listing-slider-small .slick-prev:hover,
.listing-slider-small .slick-prev {
	left: 50px;
    transform: translate(0, -50%);
}

.listing-slider-small:hover .slick-next { transform: translate(15%, -50%);  }
.listing-slider-small:hover .slick-prev { transform: translate(-15%, -50%); }

.listing-slider:hover .slick-next { transform: translate(60px, -50%);  }
.listing-slider:hover .slick-prev { transform: translate(-60px, -50%); }

.listing-slider .slick-next:hover:before,
.listing-slider .slick-prev:hover:before,
.listing-slider .slick-prev::before,
.listing-slider .slick-next::before {
    font-size: 20px;
    line-height: 60px;
    position: relative;
    color: #fff;
}

.listing-slider-small .slick-next:hover:before,
.listing-slider-small .slick-prev:hover:before,
.listing-slider-small .slick-prev::before,
.listing-slider-small .slick-next::before {
    font-size: 18px;
    line-height: 50px;
    position: relative;
    color: #fff;
}

.listing-slider-small .slick-prev::before,
.listing-slider .slick-prev::before { left: -1px; }

.listing-slider-small .slick-next::before,
.listing-slider .slick-next::before { left: 1px; }

/* Hover */
.listing-slider .slick-next:hover{ transform: translate(64px, -50%); }
.listing-slider .slick-prev:hover { transform: translate(-64px, -50%); }

.listing-slider .item.slick-slide:before {
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	content: "";
	background: #222;
	z-index: 100;
	visibility: visible;
	opacity: 0.1;
	transition: 0.3s ease-in-out;
}

.listing-slider .item.slick-slide:hover:before,
.listing-slider-small .slick-next,
.listing-slider-small .slick-prev,
.listing-slider .slick-next,
.listing-slider .slick-prev {
	opacity: 0;
	visibility: hidden;
}

.listing-slider-small:hover .slick-next,
.listing-slider-small:hover .slick-prev,
.listing-slider:hover .slick-next,
.listing-slider:hover .slick-prev {
	opacity: 1;
	visibility: visible;
}

.listing-slider-small .slick-next:hover,
.listing-slider-small .slick-prev:hover,
.listing-slider .slick-next:hover,
.listing-slider .slick-prev:hover {
    background-color: #66676b;
    color: #fff;
}

/* Listing Sidebar Details */
.listing-details-sidebar {
	padding: 0;
	list-style: none;
	font-size: 15px;
	margin-bottom: -5px;
	position: relative;
	display: block;
}

.listing-details-sidebar li {
	display: block;
	padding-left: 26px;
	position: relative;
	margin-bottom: 5px;
	line-height: 24px;
}

.listing-details-sidebar li a {
	color: #66676b;
	transition: 0.3s;
}

.listing-details-sidebar li i {
	position: absolute;
	left: 0;
	top: 5px;
	font-size: 16px;
	color: #888;
}

.listing-details-sidebar.social-profiles { margin-top: 20px; }
.listing-details-sidebar.social-profiles li { line-height: 22px;  padding-left: 23px;  }
.listing-details-sidebar.social-profiles li i { top: 4px;}

.listing-details-sidebar li a.facebook-profile i,
.listing-details-sidebar li a.facebook-profile { color: #3b5998; }

.listing-details-sidebar li a.twitter-profile i,
.listing-details-sidebar li a.twitter-profile { color: #1da1f2; }

.listing-details-sidebar li a.gplus-profile i,
.listing-details-sidebar li a.gplus-profile { color: #dd4b39; }
.listing-details-sidebar li a.gplus-profile { padding-left: 4px; }

/* Boxed Widget */
.boxed-widget {
	background-color: #f9f9f9;
	border-radius: 3px;
	padding: 32px;
	transform: translate3d(0,0,0);
	z-index: 90;
	position: relative;
}

.boxed-widget h3 {
	font-size: 20px;
	padding: 0 0 25px;
	margin: 0 0 25px 0;
	display: block;
	border-bottom: 1px solid #e8e8e8;
}

.boxed-widget h3 i { margin-right: 4px; }
.boxed-widget h3 i.sl-icon-clock { position: relative; top: 1px; }
.boxed-widget h3 i.fa-calendar-check-o { position: relative; top: -1px; }

/* Booking Sticky Footer */
.booking-sticky-footer {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	min-height: 80px;
	background: #fff;
	box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
    flex-wrap: wrap;
    padding: 12px 15px;
    z-index: 10001;
    box-shadow: none;
    border-top: 1px solid #e0e0e0;
}

.booking-sticky-footer .container {
	display: flex;
}

.booking-sticky-footer h4 {
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	padding: 0;
	margin: 0;
}

.booking-sticky-footer .button {
	float: right;
	margin: 0;
	padding: 10px 17px;
	line-height: 21px;
	font-size: 14px;
}

.booking-sticky-footer .star-rating {
	zoom: 0.9;
	letter-spacing: -1.5px;
	margin: -2px 0 0 0;
	padding: 0;
}

.bsf-left,
.bsf-right {
	align-self: center;
}

.bsf-right {
	justify-content: flex-end;
	flex: 1;
}

.bsf-left {
	justify-content: flex-start;
	flex: 1.2;
}

@media (max-width: 992px) {
	.booking-sticky-footer {
		display: flex;
	}
}

@media (max-width: 768px) {
	.booking-sticky-footer .container { padding: 0; margin: 0; width: 100%; }
}

/* Booking Widget
------------------------------------- */
.booking-widget { z-index: 100; }

.booking-widget .panel-dropdown .panel-dropdown-content {
    border: none;
	overflow: visible;
	padding: 20px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
}

.booking-widget .panel-dropdown { width: 100%; }

.booking-widget .panel-dropdown .panel-dropdown-content:before {
	content: "";
	height: 10px;
	position: absolute;
	width: 100%;
	top: -3px;
	background-color: #fff;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	border-bottom: 1px solid #eee;
}

.booking-widget .panel-dropdown.active .panel-dropdown-content:before {
	opacity: 1;
	visibility: visible;
}

.booking-widget .panel-dropdown a {
	border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0 0 15px 0;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #888;
    display: block;
    width: 100%;

    transition: color 0.3s;
}

.booking-widget .panel-dropdown a:hover {
	color: #444;
}

.booking-widget .panel-dropdown a:after {
    font-size: 20px;
    color: #c0c0c0;
    margin-left: 0;
    position: absolute;
    right: 20px;
}

/* Quantity Buttons for Booking Widget*/
.qtyButtons {
	display: flex;
	margin: 0 0 13px 0;
}

@media (min-width: 992px) and (max-width: 1366px)  {
	.qtyButtons {
		display: block;
	}
}

.panel-dropdown-content .qtyButtons:first-child { margin-top: 8px; }
.panel-dropdown-content .qtyButtons:last-child { margin-bottom: 3px; }

.qtyButtons input {
	font-family: "Open Sans", sans-serif;
	outline: 0;
	font-size: 20px;
	text-align: center;
	width: 50px;
	height: 36px;
	color: #333;
	line-height: 36px;
	margin: 0 !important;
	padding: 0 5px;
	border: none;
	box-shadow: none;
	pointer-events: none;
	display: inline-block;
}

.qtyTitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 36px;
	padding-right: 15px;
	display: block;
	flex: 1;
}

.qtyInc,
.qtyDec {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background-color: #f2f2f2;
	-webkit-text-stroke: 1px #f2f2f2;
    color: #333;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
	font-family: "FontAwesome";
}

.qtyInc:before { content: "\f067"; }
.qtyDec:before { content: "\f068"; }

.qtyTotal {
	background-color: #66676b;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	font-family: "Open Sans", sans-serif;
	line-height: 18px;
	text-align: center;
	position: relative;
	top: -2px;
	left: 2px;
	height: 18px;
	width: 18px;
}

.rotate-x {
	animation-duration: .5s;
	animation-name: rotate-x;
}

@keyframes rotate-x {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

/* Estimated Cost */
.booking-estimated-cost {
	display: block;
	margin-top: 15px;
	margin-bottom: -5px;
	padding-top: 15px;
	border-top: 1px solid #e8e8e8;
	font-weight: 16px;
}

.booking-estimated-cost strong,
.booking-estimated-cost span {
	display: inline;
	font-weight: 600;
}

.booking-estimated-cost span {
	text-align: right;
	float: right;
	color: #66676b;
	font-size: 16px;
	position: relative;
}

/* Listing Price */
.booking-widget h3 { position: relative; }
h3 .listing-price {
	position: absolute;
	right: 0;
	top: -7px;
	font-size: 16px;
	font-weight: 600;
	background-color: #f0f0f0;
	border-radius: 4px;
	padding: 8px 10px;
}

h3 .listing-price i {
	font-weight: 400;
	color: #888;
	font-style: normal;
	font-size: 13px;
	position: relative;
	top: 1px;
	margin-left: -3px;
	padding: 0;
	margin-right: 0;
}

/* Message Vendor
------------------------------------- */
.message-vendor .fa-envelope-o {
	font-size: 20px;
	line-height: 0;
	top: -1px;
	position: relative;
}

.message-vendor textarea,
.message-vendor textarea:focus,
.message-vendor input:focus,
.message-vendor select,
.message-vendor select:focus,
.message-vendor input {
    border: none;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 15px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0 0 15px 0 !important;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #888;
    transition: color 0.3s !important;
}

.message-vendor select,
.message-vendor select:focus {
	height: 48px;
}

/* Prefered Contat Method */
.preferred-contact-method {
	display: block;
	margin: 12px 0;
}

.preferred-contact-method h5 {
	font-size: 14px;
	color: #777;
	font-weight: 600;
	text-align: center;
	display: block;
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
}

.preferred-contact-radios  {
	display: block;
	text-align: center;
	align-items: center;
}

.preferred-contact-radios .radio {
	display: inline-block;
}

.preferred-contact-radios .radio label {
	display: inline-block;
	padding-left: 24px;
	line-height: 23px;
	margin-right: 15px;
}
.preferred-contact-radios .radio:last-child label {
	margin-right: 0;
}

#add-review input:focus,
#add-review textarea:focus,
#add-review select:focus,
#add-review input,
#add-review textarea,
#add-review select {
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Captcha Holder */
.captcha-holder {
	max-height: 0;
	height: 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
	display: block;
}

.captcha-holder.visible {
	max-height: 200px;
	height: auto;
	opacity: 1;
	visibility: visible;
}

.captcha-holder .g-recaptcha {
	margin: 5px 0 15px 0;
}
@media (min-width: 1366px) {
	.captcha-holder .g-recaptcha {
		text-align: center;
	}
	.captcha-holder .g-recaptcha div {
		width: auto !important;
	}
}

@media (min-width: 1240px) and (max-width: 1366px) {
	.g-recaptcha {
	    transform: scale(0.89);
	    transform-origin: 0 0;
	}
}

@media (min-width: 992px) and (max-width: 1240px) {
	.g-recaptcha {
	    transform: scale(0.76);
	    transform-origin: 0 0;
	}
}

/* Radio Button
------------------------------------- */

.radio {
	display: inline-block;
	vertical-align: top;
}

.radio label {
	margin: 3px 0;
	cursor: pointer;
	position: relative;
	padding-left: 29px;
	line-height: 25px;
}

.radio input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.radio input[type="radio"] + label .radio-label {
	content: '';
	background: #fff;
	border-radius: 100%;
	border: 2px solid #b4b4b4;
	display: inline-block;
	width: 18px;
	height: 18px;
	position: relative;
	margin-right: 5px;
	vertical-align: top;
	cursor: pointer;
	text-align: center;
	transition: all 250ms ease;
	background-color: #fff;
	box-shadow: inset 0 0 0 8px #fff;
	z-index: 100;
	position: absolute;
	top: 2px;
	left: 0;
}

.radio input[type="radio"] + label .radio-label:after {
	background-color: #66676b;
	content: "";
	top: 3px;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
	opacity: 1;
	transition: 0.3s;
	border-radius: 50%;
	transform: scale(0);
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.radio input[type="radio"]:checked + label .radio-label {
	background-color: #66676b;
	border-color: #66676b;
	box-shadow: inset 0 0 0 3px #fff;
}

.radio-label:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: transparent;
	display: block
}

.interactive-effect label .radio-label:before {
	animation: radius-shadow 0.4s;
}

@keyframes radius-shadow {
  0% { box-shadow: 0 0 0 0 rgba(102,103,107,0.4); }
  100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
}

.small-label {
	border-radius: 4px;
	display: inline-block;
	background: #e0f5d7;
	color: #449626;
	padding: 0 8px;
	line-height: 27px;
	height: 26px;
	margin-left: 5px;
	position: relative;
	top: -1px;
}

/* Reviews Overview
------------------------------------- */
.rating-bars-rating {
	display: inline-block;
	vertical-align: baseline;
	background: #efefef;
	width: 100%;
	height: 6px;
	margin-right: 10px;
	border-radius: 3px;
	overflow: hidden;
	background-color: #eee;
	align-self: center;
}

.rating-bars-rating-inner {
    height: 6px;
    display: block;
	background-color: #eee;
    position: relative;
    width: 0;
    transition: width 0.5s;
}

.rating-bars-rating.low .rating-bars-rating-inner { background-color: #ee3535; }
.rating-bars-rating.mid .rating-bars-rating-inner { background-color: #c0c52a; }
.rating-bars-rating.high .rating-bars-rating-inner { background-color: #64bc36; }

.rating-bars-item {
	margin: 10px 15px;
    width: calc(50% - 30px);
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.rating-bars-name {
    font-weight: 600;
    color: #333;
    display: block;
    font-size: 14px;
    line-height: 22px;
}

.rating-bars-item strong {
    color: #777;
    font-size: 12px;
    font-weight: 600;
    align-self: center;
    background: #f4f4f4;
    border-radius: 50px;
    width: 46px;
    height: 22px;
    text-align: center;
    line-height: 21px;
    font-family: "Open Sans";
}

.rating-overview {
    display: flex;
    margin: 35px 0 25px 0;
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    padding-right: 20px;
    border: 1px solid #e8e8e8;
}

.rating-overview-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: navajowhite;
    width: 135px;
    margin-right: 20px;
    text-align: center;
    border-radius: 0;
    border-right: 1px solid #e8e8e8;
    padding-right: 27px;
}

.rating-overview-box-total {
    font-size: 44px;
    font-weight: 400;
    line-height: 1em;
    display: block;
    color: #333;
}

.rating-overview-box-percent {
    font-size: 15px;
    margin-bottom: 0;
    color: #888;
    display: block;
}

.rating-overview-box .star-rating{
    font-size: 16px;
    margin: 0;
    display: block;
    letter-spacing: -0.5px;
}

.rating-bars {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: 100%;
    margin: 0;
    padding: 0;
    margin-top: 0;
    align-items: center;
}

.rating-bars-inner {
	display: flex;
	width: 100%;
}

/* Media Queries */
@media (max-width: 1366px) {
	.rating-bars-item {
	    width: calc(50% - 30px);
	}
}

@media (max-width: 768px) {
	.rating-bars-item {
	    width: 100%;
	    margin: 5px 0;
	}
	.rating-overview {
 		width: 100%;
 		display: block;
 		padding: 20px 25px;
 	}
 	.rating-overview-box {
 		border-right: none;
 		border-bottom: 1px solid #e8e8e8;
 		width: 100%;
 		margin-bottom: 20px;
 		padding-bottom: 25px;
 		padding-right: 0;
 		margin-right: 0;
 	}
}

/* Add Sub Ratings
------------------------------------- */
.sub-ratings-container {
	margin: 25px 0 30px 0;
	display: block;
	border: 1px solid #e6e6e6;
	background-color: transparent;
	padding: 18px 30px;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	padding: 20px 0;
	border-radius: 0;
}

.add-sub-rating {
	display: inline-block;
	margin: 7px 0;
	width: 50%;
}

@media (min-width: 1367px) {
	.add-sub-rating { width: 25%; }
}

@media (max-width: 768px) {
	.add-sub-rating { width: 100%; }
}

.sub-rating-title {
	font-weight: 600;
	font-size: 14px;
	color: #444;
	display: block;
	margin: 0 0 4px 0;
}

/* Sub Ratings Stars */
.sub-ratings-container .leave-rating label {
	position: relative;
	font-size: 21px;
	letter-spacing: 3.5px;
}

.sub-ratings-container .leave-rating label:before {
	content: "\f006";
	color: #ffc600;
}

.sub-ratings-container .leave-rating input[type="radio"]:hover ~ label:before,
.sub-ratings-container .leave-rating input[type="radio"]:checked ~ label:before {
	content: "\f006";
}

.sub-ratings-container .leave-rating input[type="radio"] ~ label:after {
	content: "\f005";
	position: absolute;
	left: 0;
	color: #ffc600;
	opacity: 0;
	transition: 0.2s;
}

.sub-ratings-container .leave-rating input[type="radio"]:hover ~ label:after,
.sub-ratings-container .leave-rating input[type="radio"]:checked ~ label:after {
	opacity: 1;
}

.rating-bars i.tip,
.sub-ratings-container i.tip {
	background: #eaeaea;
	color: #888;
	height: 17px;
	width: 17px;
	display: inline-block;
	font-size: 11px;
}

.rating-bars i .tip-content,
.sub-ratings-container i .tip-content {
	min-width: 220px;
	max-width: 220px;
}

.rating-bars  i.tip:after,
.sub-ratings-container i.tip:after {
	line-height: 18px;
}

/* Verified Review Badge */
.comment-by .tip {
	background: #19b453;
	position: relative;
	cursor: help;
}

.comment-by .tip:after {
	color: #fff;
	content: "\f00c";
}

/* Custom Upload Button
------------------------------------- */
.uploadButton {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 10px;
  width: 100%;
  font-style: normal;
  font-size: 14px;
  margin-top: -15px;
}
 
.uploadButton .uploadButton-input {
  opacity: 0;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  height: 0;
  width: 0;
}
 .star-rating .not-rated { font-size: 14px; position: relative; left: 2px; top: -1px; }

.uploadButton .uploadButton-button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 18px;
    cursor: pointer;
    border-radius: 50px;
    flex-direction: row;
    transition: 0.3s;
    margin: 0;
    outline: none;
    box-shadow: none;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 16px;
    color: #666;
    background-color: #ededed;
    border-radius: 50px;
}
 
.uploadButton .uploadButton-button:hover {
    background-color: #66676b;
    color: #fff;
}
 
.uploadButton .uploadButton-file-name {
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    padding: 0 10px;
    padding-left: 18px;
    min-height: 36px;
    top: 1px;
    position: relative;
    color: #888;
    background-color: transparent;
    overflow: hidden;
    line-height: 22px;
}

.uploadButton .uploadButton-button:before {
    font-family: simple-line-icons;
    content: "\e032";
    padding-right: 6px;
    color:#66676b;
    font-weight: 500;
    transition: 0.3s;
}
.uploadButton .uploadButton-button:hover:before {
    color: #fff;
}

/* Date Range Picker
------------------------------------- */
input#date-picker {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 600;
    height: auto;
    padding: 10px 16px;
    line-height: 30px;
    margin: 0 0 15px 0;
    position: relative;
    background-color: #fff;
    text-align: left;
    color: #888;
    transition: color 0.3s !important;
}

input#date-picker:hover {
    color: #444;
}

.daterangepicker {
	position: absolute;
	color: inherit;
	background-color: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.12);
	width: 278px;
	max-width: none;
	padding: 0;
	margin-top: 14px;
	top: 100px;
	left: 20px;
	z-index: 3001;
	display: none;
	font-size: 15px;
	line-height: 1em;
	transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
	opacity: 0;
	transform: translateY(-15px);
}

/* Bordered Style */
.daterangepicker.bordered-style {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08);
    margin-top: 4px;
    transform: none !important;
}

.daterangepicker.bordered-style.opensleft:after {
    display: none;
}

.daterangepicker.calendar-animated {
	opacity: 0;
	transform: translateY(-15px);
}

.daterangepicker.calendar-hidden {
	display: block !important;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(-15px);
}

.daterangepicker.calendar-visible {
	opacity: 1;
	pointer-events: all;
	visibility: visible;
	transform: translateY(0);
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:after {
  top: -7px;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 50px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 50px;
}

@media (min-width: 1366px) {
.daterangepicker.opensleft:after { right: 154px; }
.daterangepicker.single:before {
    content: "";
    height: 10px;
    position: absolute;
    width: 100%;
    top: -3px;
    background-color: #fff;
    left: 0;
    transition: all 0.3s;
    border-bottom: 1px solid #eee;
}
.daterangepicker.single {
	width: 309px;
	border-radius: 0 0 6px 6px;
	margin-top: -7px;
	transform: translateY(0) !important;
}
.daterangepicker.single .drp-calendar {
	width: 100%;
	zoom: 1.08;
	margin: 3px 0 3px 5px;
}
.daterangepicker.single.opensleft:after {
	right: 50%;
	margin-right: -4px;
	display: none;
}
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 12px 0 12px 12px;
}

.daterangepicker .drp-calendar.right {
  padding: 12px;
}

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, 
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid #aaa;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
  margin-left: 3px;
}

.daterangepicker th.available.next:hover,
.daterangepicker th.available.prev:hover { background: #f0f0f0; }

.daterangepicker .calendar-table .next span { margin-right: 6px; }

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, 
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table td { transition: 0.3s; }

.daterangepicker .calendar-table td.available.in-range:hover {
	border-radius: 0 3px 3px 0;
}

.daterangepicker .calendar-table td.available.start-date:hover {
	border-radius: 3px 0 0 3px;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #66676b;
  border-color: transparent;
  color: #fff;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: rgba(102, 103, 107, 0.08);
  border-color: transparent;
  color: #66676b;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #66676b;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
  background: #f4f4f4;
  border: 1px solid #fff;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker td.end-date.in-range.available { color: #fff; }

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 14px;
  min-height: 63px;
  display: block;
  border-top: 1px solid #eaeaea;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 14px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons button.applyBtn,
.daterangepicker .drp-buttons button.cancelBtn {
	background: none;
	padding: 6px 14px;
	display: inline-block;
	outline: none;
	line-height: 20px;
	border: none;
	font-weight: 600;
	margin: 0;
	font-size: 14px;
	border-radius: 50px;
	background-color: #66676b;
	color: #fff;
	transition: all 0.3s;
	margin: 0 3px;
}

.daterangepicker .drp-buttons button.cancelBtn {
	background-color: #f4f4f4;
	color: #888;
}
.daterangepicker .drp-buttons button.cancelBtn:hover {
	background-color: #f0f0f0;
	color: #666;
}

.daterangepicker .drp-buttons button.applyBtn {
	background-color: #66676b;
}

.daterangepicker .drp-buttons button.applyBtn:hover {
	opacity: 0.95;
}

.daterangepicker.show-ranges .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* Booking Requests Filter */
.booking-requests-filter {
	position: relative;
	float: right;
	top: 14px;
	right: 25px;
	background: #fff;
	border-radius: 4px;
}

.dashboard-list-box .booking-requests-filter .sort-by {
	right: 0;
	top:0;
	float: left;
}

#booking-date-range {
	float: right;
	background: #fff;
	border-radius: 3px;
	cursor: pointer; 
	padding: 6px;
	display: inline-block;
	position: relative;
    margin: 0;
    box-sizing: border-box;
	color: #666;
    font-weight: 600;
    transition: 0.3s;
    background-color: #fff;
    margin-left: 15px;
    top: -2px;
}

@media (max-width: 768px) {
	.booking-requests-filter { display: none; }
}

#booking-date-range:hover {
	color: #66676b;
}

#booking-date-range span {
	padding-right: 7px;
}

#booking-date-range span:after {
    content: "\f107";
    font-family: "FontAwesome";
    font-size: 18px;
    margin: 0 0 0 0;
    right: 0px;
    position: relative;
    width: auto;
    height: auto;
    display: inline-block;
    color: #66676b;
    float: right;
    font-weight: normal;
    transition: transform 0.3s;
    transform: translate3d(0,0,0) rotate(0deg);
}

#booking-date-range i {
	color: #999;
	background-color: 
}

/* Booking Requests Filter / End */
.daterangepicker .ranges li {
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  transition: 0.3s;
}

.daterangepicker .ranges li:hover {
  background-color: #f4f4f4;
}

.daterangepicker .ranges li.active {
  background-color: #66676b;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto; }
    .daterangepicker .ranges ul {
      width: 140px; }
    .daterangepicker.single .ranges ul {
      width: 100%; }
    .daterangepicker.single .drp-calendar.left {
      clear: none; }
    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {
      float: left; }
    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {
      float: right; }
    .daterangepicker.ltr {
      direction: ltr;
      text-align: left; }
      .daterangepicker.ltr .drp-calendar.left {
        clear: left;
        margin-right: 0; }
        .daterangepicker.ltr .drp-calendar.left .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.ltr .drp-calendar.right {
        margin-left: 0; }
        .daterangepicker.ltr .drp-calendar.right .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.ltr .drp-calendar.left .calendar-table {
        padding-right: 8px; }
      .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {
        float: left; }
    .daterangepicker.rtl {
      direction: rtl;
      text-align: right; }
      .daterangepicker.rtl .drp-calendar.left {
        clear: right;
        margin-left: 0; }
        .daterangepicker.rtl .drp-calendar.left .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.rtl .drp-calendar.right {
        margin-right: 0; }
        .daterangepicker.rtl .drp-calendar.right .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.rtl .drp-calendar.left .calendar-table {
        padding-left: 12px; }
      .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {
        text-align: right;
        float: right; } }
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto; }
  .daterangepicker.ltr .ranges {
    float: left; }
  .daterangepicker.rtl .ranges {
    float: right; }
  .daterangepicker .drp-calendar.left {
    clear: none !important; } }

/* Time Slots Dropdown
------------------------------------- */
.booking-widget .panel-dropdown .panel-dropdown-content.padding-reset { padding: 0; }
.panel-dropdown-scrollable {
    max-height: 273px;
    overflow: auto;
    padding: 0 10px;
    margin: 22px 6px 16px 6px;
}

/* Custom Scrollbar for -wekbit */
.panel-dropdown-scrollable::-webkit-scrollbar { width: 6px; }

.panel-dropdown-scrollable::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.05);
    border-radius: 6px;
}

.panel-dropdown-scrollable::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
}

.panel-dropdown-scrollable::-webkit-scrollbar-thumb:hover {
    border-radius: 6px;
    background-color: rgba(0,0,0,0.3);
}

/* Panel Dropdown Fix */
.panel-dropdown .panel-dropdown-content { pointer-events: none; }
.panel-dropdown.active .panel-dropdown-content { pointer-events: all; }

/* Time Slot Labels */
.time-slot {
	display: block;
}

.time-slot label {
  border-radius: 3px;
  border: none;
  background-color: #f6f6f6;
  width: 100%;
}

/* hide input */
.time-slot input:empty {
	display: none;
}

/* style label */
.time-slot label i {
	position: relative;
	font-size: 18px;
	top: 2px;
	margin-right: 2px;
}

.time-slot input:empty ~ label {
	position: relative;
	float: left;
	padding: 12px 10px;
	text-align: center;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: 4px;
	color: #777;
	transition: 0.3s;
	overflow: hidden;
	font-size: 15px;
}

.time-slot:last-child label {
	margin-bottom: 0;
}

.time-slot input ~ label:hover {
	color: #66676b;
	background-color: rgba(102, 103, 107, 0.08);
}

.time-slot input:checked ~ label:hover {
	color: #fff;
}
.time-slot input:checked ~ label {
	color: #fff;
	background-color: #66676b;
}

.time-slot input:checked ~ label span {
	color: #fff;
	opacity: 0.8;
}

.time-slotinput:empty ~ label:after,
.time-slot input:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	text-align: center;
	border-radius: 4px;
	background: transparent;
	z-index: 100;
	opacity: 0;
}

.time-slot label span,
.time-slot label strong {
	font-weight: 600;
	display: block;
	padding: 0;
	margin: 0;
	line-height: 19px;

}

.time-slot label span{
	font-weight: 500;
	opacity: 0.5;
	transition: 0.3s;
}

.time-slot label:hover span {
	color: #66676b;
	opacity: 0.6;
}

/* Send Message Button */
a.send-message-to-owner.button {
	font-size: 13px;
	font-weight: 500;
	padding: 4px 20px;
	margin-top: 20px;
	margin-bottom: -5px;
}

/* Opening Hours */
.opening-hours {
	position: relative;
	overflow: hidden;
}

.opening-hours ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}

.opening-hours ul li {
	width: 100%;
	font-weight: 600;
	color: #888;
	margin: 2px 0;
	transition: 0.2s;
	cursor: default;
}

.opening-hours ul li:hover { color: #444; }
.opening-hours ul li span { float: right; font-weight: 400; }

/* Listing Share Buttons */
.listing-share {
	text-align: center;
	position: relative;
}

.listing-share .share-buttons li {
    margin: 0 3px 8px 0;
}

.listing-share.with-border {
	border-top: 1px solid #eee;
	padding-top: 35px;
}

.listing-share span {
	display: block;
	font-size: 15px;
	color: #888;
}

/* Like Button */
.like-button {
	outline: none;
	border: none;
	color: #444;
	font-weight: 600;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 50px;
	padding: 10px 25px;
	line-height: 24px;
	margin-bottom: 9px;
	transition: 0.3s;
	cursor: pointer;
}

.like-button:hover {
	background-color: #fafafa;
	border: 1px solid #ddd;
}

.listing-share .like-icon::before,
.listing-share .like-icon::after {
	top: 0;
}

.listing-share .social-icons li {
	text-align: center;
	float: none;
	padding: 0;
	margin: 0;
}

.like-button .like-icon:hover,
.like-button .like-icon.liked {
    background-color: transparent;
	color: #f3103c;
}

.like-button .like-icon {
	position: relative;
	height: 20px;
	display: inline-block;
	line-height: 30px;
	right: auto;
	bottom: 3px;
	background: transparent;
	color: #f3103c;
	font-weight: 500;
	float: left;
	width: 20px;
	margin-right: 8px;
	font-size: 18px;
}

/* Listing Contacts */
.listing-links-container {
	margin: 25px 0 0 0;
	display: block;
}

.listing-links {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	display: block;
}

.listing-links li {
	display: inline-block;
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
}

.listing-links li:first-child a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.listing-links li:last-child a { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.listing-links li a {
	background: #f2f2f2;
	color: #555;
	font-weight: 500;
	font-size: 13px;
	padding: 7px 14px;
	transition: 0.3s;
	display: inline-block;
	line-height: 17px;
	font-weight: 500;
	position: relative;
}

.listing-links li a i { margin-right: 3px; }

.listing-links li a.listing-links-fb { color: #fff; background: #3b5998; }
.listing-links li a.listing-links-yt { color: #fff; background: #f00125; }
.listing-links li a.listing-links-ig { color: #fff; background: #e1306c; }
.listing-links li a.listing-links-tt { color: #fff; background: #1da1f2; }

.listing-links li a:hover { opacity: 0.9; }
.listing-links.contact-links li a:hover { color: #555; background: #eaeaea; opacity: 1; }
.listing-links.contact-links li a { border-left: 1px solid #e0e0e0; }
.listing-links.contact-links li:first-child a { border-left: none; }

/* Listing Page Content
------------------------------------- */
.listing-nav {
	width: 100%;
	padding: 0;
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #e0e0e0;
	font-size: 17px;
	font-weight: 400;
	background-color: #fff;
	margin-bottom: 35px;
}

/* Sticky */
.listing-nav-container.cloned {
	position: fixed;
	top: 0;
	margin: 0 auto;
	z-index: 1010;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: 0.4s;
	transform: translateY(-100%);
	border-bottom: 1px solid #e0e0e0;
}

.listing-nav-container.cloned.stick {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	background-color: #fff;
}

.listing-nav-container.cloned .listing-nav {
	border-bottom: none;
	margin: 0 auto;
}

.listing-nav-container.cloned .listing-nav a { padding: 15px 0; }

.listing-nav-container.cloned .listing-nav li:first-child a {
	color: #666;
	border-color: #e0e0e0;
}

/* Other styles */
.listing-nav li {
	display: inline-block;
	margin-right: 15px;
}

.listing-nav li a {
	display: inline-block;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
	bottom: -1px;
	transition: 0.3s;
	color: #666;
	padding-bottom: 15px;
}

.listing-nav-container.cloned .listing-nav li:first-child a.active,
.listing-nav-container.cloned .listing-nav li:first-child a:hover,
.listing-nav li:first-child a,
.listing-nav li a.active,
.listing-nav li a:hover {
	border-color: #66676b;
	color: #66676b;
}

.listing-desc-headline {
	font-size: 22px;
	margin-bottom: 25px;
	margin-top: 45px;
	display: block;
}

.listing-desc-headline span { color: #888;  }

.listing-section {
	display: inline-block;
	width: 100%;
}

/* Apartment Details */
.apartment-details {
	list-style: none;
	padding: 0;
    margin: 0;
    margin-bottom: 20px;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 15px 18px;
}

.apartment-details li {
	display: inline-block;
	font-weight: 600;
	color: #666;
	position: relative;
	padding: 0;
	border-right: 1px solid #e0e0e0;
	line-height: 15px;
	padding: 0 12px;
}

.apartment-details li:first-child {
	padding-left: 0;
}

.apartment-details li:last-child {
	border: none;
	padding-right: 0;
}

/* Property Map */
#singleListingMap {
	height: 400px;
	border-radius: 3px;
	outline: none;
}

#singleListingMap-container {
	height: auto;
	position: relative;
	padding-top: 5px;
	display: block;
	outline: none;
}

/* Listing features */
.listing-features {
	width: 100%;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	font-size: 16px;
	-webkit-columns: 3;
	-moz-columns: 3;
}

.listing-features.checkboxes li {
	color: #333;
	display: block;
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 0 30px;
}

.listing-features li:last-child { margin: 0; }

.listing-features li span,
.listing-features.checkboxes li {
	color: #707070;
}

.listing-features.checkboxes li:before {
	display: inline-block;
	width: 19px;
	height: 19px;
	position: relative;
	content: "\f00c";
	font-family: "FontAwesome";
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 15px;
	background-color: #66676b;
	border: 2px solid transparent;
	transition: border-color 0s;
	border-radius: 4px;
	position: absolute;
	left: 0;
	top: 3px;
}

@media (max-width: 768px) {
    body .listing-nav {
        font-size: 16px;
        background-color: #fff;
        margin-bottom: 35px;
        background: #f6f6f6;
        border-radius: 4px;
        padding: 20px 25px;
        border: none;
        margin-top: -10px;
    }
    
    body .listing-nav li a {
    	padding: 2px 0;
    	margin: 0;
    	border: none;
    	color: #888;
    }
    body .listing-nav li:first-child a {
    	font-weight: 600;
    }
    
    #titlebar.listing-titlebar h1, 
    #titlebar.listing-titlebar h2 {
        font-size: 22px;
    }
}

/* Pricing Menu List
------------------------------------- */
.pricing-list-container h4 {
	color: #66676b;
	background-color: #fff;
	border-bottom: 1px solid #66676b;
	width: 100%;
	padding: 30px;
	border-radius: 4px 4px 0 0;
	position: relative;
	z-index: 10;
	margin: 5px 0 0 0;
	display: block;
	font-weight: 500;
}

.pricing-list-container h4:after {
	width: 100%;
	height: 100%;
	border-radius: 4px 4px 0 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	background-color: #66676b;
	opacity: 0.05;
	z-index: 9;
}

.pricing-list-container ul {
	list-style: none;
	padding: 0;
	margin-bottom: 35px;
}

.pricing-list-container ul:last-child { margin-bottom: 25px; }

.pricing-list-container ul li {
	padding: 30px;
	padding-right: 110px;
	position: relative;
}

.pricing-list-container ul li:last-child { border-radius: 0 0 4px 4px; }
.pricing-list-container ul li:nth-child(2n+2) { background-color: #f9f9f9; }

.pricing-list-container p,
.pricing-list-container h5 {
	padding: 0;
	font-size: 15px;
	margin: 0;
	display: inline-block;
	width: 100%;
}

.pricing-list-container h5 {
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 0;
	color: #333;
}

.pricing-list-container p {
	color: #777;
	line-height: 24px;
	margin-top: 3px;
}

.pricing-list-container span {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	font-size: 18px;
	color: #777;
}

/* Show more */
.show-more {
	height: 450px;
	overflow: hidden;
	position: relative;
	transition: margin 0.4s;
}

.show-more:after {
	content:"";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 180px;
	display: block;
	background: linear-gradient(rgba(255,255,255,0), #fff 88%);
	z-index: 9;
	opacity: 1;
	visibility: visible;
	transition: 0.8s;
}

.show-more.visible { margin-bottom: 20px; }
.show-more.visible:after { opacity: 0; visibility: hidden; }

.show-more-button {
	position: relative;
	font-weight: 600;
	font-size: 15px;
	left: 0;
	margin-left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	text-align: center;
	display: inline-block;
	opacity: 1;
	visibility: visible;
	transition: all 0.3s;
	padding: 5px 20px;
	color: #666;
	background-color: #f2f2f2;
	border-radius: 50px;
	top: -10px;
	min-width: 140px;
}

.show-more-button:before { content: attr(data-more-title); }
.show-more-button.active:before { content: attr(data-less-title); }

.show-more-button i {
	margin-left: 6px;
	color: #66676b;
	font-weight: 500;
	transition: 0.2s;
}

.show-more-button.active i {
	transform: rotate(180deg);
}

/* Comments
------------------------------------- */
.comments { margin: -10px 0 0 0; }

.comments h4 {
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: 500;
	color: #333;
}

.comments h4 span { display: inline-block; font-size: inherit; }

.comment { font-size: 20px; }

.comments .button {
	margin: 0 0 10px  0;
	padding: 7px 15px;
}

.comments.reviews .button { margin: 0; }

.comments ul {padding-left: 0;}
.comments ul li { display: block; width: 100%; }

.comments ul li,
.comments ul li ul li,
.comments ul li ul li ul li,
.comments ul li ul li ul li {
	margin: 50px 0 0 0px;
}

.comments ul li ul { margin: 0 0 0 100px; }

.comment-content p {
	margin: 3px 0 0 0;
	line-height: 26px;
}

.comment-content {
	color: #666;
	padding: 0 0 0 100px;
}

.comments ul li ul {
	border-left: 1px solid #e0e0e0;
	padding-left: 35px;
}

.comments ul li ul li:before {
	content: "";
	width: 15px;
	height: 1px;
	background-color: #e0e0e0;
	display: inline-block;
	position: absolute;
	top: 30px;
	left: -35px;
}

.comments ul li { position: relative; }

.comment-content strong {
	padding-right: 5px;
	color: #666;
}

.comment-content span { color: #888; }
body .comment-content p { padding: 5px 0; font-size: 15px; }

.comments-amount { color: #888; font-weight: 500; }

.avatar {
	display: inline-block;
	float: left;
	padding: 0 20px 0 0;
	position: absolute;
	left: 0px;
}

.avatar img {
	max-width: 80px;
	border-radius: 50%;
}

.comment-by {
	width: 100%;
	padding-bottom: 8px;
	padding-top: 5px;
	font-weight: 500;
	color: #333;
}

.comment-by h5 { margin: 0 0 7px 0; }

.comment-by a.reply,
.comment-by a.reply i {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.comment-by a.reply {
	display: inline;
	background-color: #f0f0f0;
	padding: 5px 16px;
	line-height: 22px;
	font-size: 13px;
	color: #333;
	font-weight: 500;
	position: absolute;
	right: 0;
	top: 15px;
	border-radius: 50px;
}

.comment-by a.reply i {
	font-size: 12px;
	margin-right: 1px;
}

.comment-by .numerical-rating {
	margin: 4px 0 0 0;
}

.comment-by .numerical-rating,
.comment-by .star-rating {
	position: absolute;
	right: 0;
	top: 7px;
}

.comment-by a.reply:hover { background-color: #66676b; }
.comment-by a.reply:hover,
.comment-by a.reply:hover i {
	color: #fff;
}

.comment-by span.date {
	color: #888;
	font-weight: 300;
	margin: 0px 0 0 0;
	float: none;
	display: block;
	text-align: left;

}

/* Listing Reviews */
.listing-reviews ul li {
	padding-bottom: 45px;
	margin-top: 40px;
	border-bottom: 1px solid #e8e8e8;
}

/* Review Images */
.review-images {
	display: flex;
	margin-top: 20px;
	margin-bottom: 5px;
}

.review-images a {
	flex: 4;
	max-width: 25%;
	margin-right: 15px;
	border-radius: 3px;
}

.review-images a img {border-radius: 4px; }

/* Add Comment */
.add-review-box {
	border-radius: 4px;
	background-color: #f9f9f9;
	padding: 36px;
	padding-bottom: 40px;
	margin-bottom: 55px;
	margin-top: 70px;
	display: inline-block;
	width: 100%;
	position: relative;
}

.add-review-box h3 { margin-top: 5px }

.add-comment label span { color: #e24747; }

.add-comment input {
	margin: 0 0 25px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.add-comment textarea,
.add-comment input {
	box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.05)
}

.add-comment textarea {
	margin: 0 0 30px 0;
	width: 100%;
	min-width: 100%;
	min-height: 220px;
	resize: vertical;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.add-comment .button { min-width: 160px; }

/* Leave Rating */
.leave-rating {
	height: 24px;
	float: left;
}

.leave-rating:hover input[type="radio"]:checked ~ label { color: #dadada; }

.leave-rating input[type="radio"] { display: none; }

.leave-rating input[type="radio"]:checked ~ label { color: #ffc600; }

.leave-rating label {
	font-size: 24px;
	float: right;
	letter-spacing: 4px;
	color: #dadada;
	cursor: pointer;
	transition: 0.3s;
}

.leave-rating label:hover,
.leave-rating label:hover ~ label {
	color: #ffc600 !important;
}

.leave-rating-title {
	display: block;
	margin: 35px 0 7px 0;
}

/* Upload Photos Button */
.add-review-photos {
	font-weight: 600;
	padding: 6px 7px;
	color: #666;
	background-color: #ededed;
	border-radius: 50px;
	display: inline-block;
	position: relative;
	font-size: 14px;
	width: auto;
	transition: 0.3s;
	cursor: pointer;
	line-height: 20px;
	float: right;
	top: -25px;
}

.photoUpload {
    position: relative;
    overflow: hidden;
    padding: 3px 12px;
	cursor: pointer;
}

.photoUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.add-review-photos:hover {
	color: #fff;
	background-color: #66676b;
}

.add-review-photos i {
	color: #66676b;
	margin-right: 3px;
	transition: 0.3s;
	font-size: 16px;
	position: relative;
	top: 2px;
}

.add-review-photos:hover i { color: #fff; }

/* Helpfup Review */
a.rate-review {
	border: 1px solid #e0e0e0;
	border-radius: 50px;
	font-size: 13px;
	color: #666;
	font-weight: 500;
	padding: 5px 20px;
	margin-top: 20px;
	display: inline-block;
	transition: 0.3s;
}

a.rate-review span {
	border-left: 1px solid #e0e0e0;
	line-height: 20px;
	padding-left: 10px;
	margin-left: 5px;
	transition: 0.3s;
	color: #666;
}

a.rate-review i { padding-right: 3px; }

a.rate-review:hover span { border-color: #d0d0d0 }

a.rate-review:hover {
	border-color: #d0d0d0;
	background-color: #fafafa;
}

/* Pagination
------------------------------------- */
.pagination {
	margin: 9px 0 0 0;
	text-align: center;
	overflow: hidden;
}

.pagination-next-prev {
	position: relative;
	top: -66px;
}

.pagination ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.pagination ul li a,
.pagination-next-prev ul li a {
	padding: 12px 0;
	border-bottom: none;
	display: inline-block;
	color: #333;
	background-color: #fff;
	font-weight: 700;
	margin:0;
	line-height: 22px;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	font-size: 14px;
}

.pagination ul li a {
	border-radius: 50%;
	width: 52px;
	height: 52px;
	padding: 0;
	line-height: 52px;
}

.pagination ul li a i {
	line-height: 52px;
}

.pagination ul li.blank {
	color: #a0a0a0;
	padding: 0 6px;
}

.pagination ul li a.current-page,
.pagination .current,
.pagination ul li a:hover,
.pagination-next-prev ul li a:hover {
	background-color: #f2f2f2;
	color: #333;
}

.pagination-next-prev a.next { float: right; }
.pagination-next-prev a.prev { float: left; }

.pagination-next-prev ul li a {
	color: #333;
	padding: 12px 16px;
	text-transform: uppercase;
}

.pagination ul,
.pagination-next-prev ul {	padding: 0; list-style-type: none;}

/* Listings Pagination */
.fs-listings .pagination ul li a,
.fs-listings .pagination-next-prev ul li a {
	background-color: transparent;
}

.fs-listings .pagination ul li a.current-page,
.fs-listings .pagination .current,
.fs-listings .pagination ul li a:hover,
.fs-listings .pagination-next-prev ul li a:hover {
	background-color: #e8e8e8;
	color: #333;
}

/* Contact Page
------------------------------------- */
#contact textarea {
	min-height: 200px;
	margin: 15px 0 25px 0;
}

#contact input {
	margin-bottom: 25px;
}

.loader { margin-left: 15px; }
.submit.disabled:hover,
.submit.disabled { background-color: #e8e8e8; color: #333; }

#contact input.button.submit {
	margin-bottom: 10px;
	line-height: 18px;
	height: 49px;
	transition: all 0.25s !important;
}

#contact input[type="submit"].submit:hover {
    opacity: 0.92;
}

.contact-sent {
	background-color: #EBF6E0;
	color: #5f9025;
	padding: 20px 26px;
	margin-bottom: 30px;
	border-radius: 3px;
}

/* Office Address Box */
.office-address {
	text-align: center;
	position: relative;
	color: #fff;
	display: table-cell;
	vertical-align: middle;
	height: 100%;
}

.office-address ul {
	list-style: none;
	font-size: 18px;
	padding: 0;
	line-height: 30px;
}

.office-address h3 {
	font-size: 28px;
	color: #fff;
	margin-top: 0;
}

.office-address h3:after {
	content: "";
	height: 2px;
	width: 50px;
	position: relative;
	display: block;
	background-color: #66676b;
	margin: 20px auto;
	border-radius: 2px;
}

.address-container {
	background-color: #2b2c30;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	display: table;
	width: 100%;
	position: relative;
	height: 100%
}

.address-container:before {
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	display: block;
	background-color: #333;
	opacity: 0.7;
}

/* Google Maps */
.contact-map { display: flex; }
.contact-map #singleListingMap-container { flex: 1; position: relative; padding-top: 0; }
.contact-map .address-box-container { flex: 0 auto; width: 440px; height: 450px; }
.contact-map #singleListingMap-container #singleListingMap { height: 100%; width: 100%; }

@media (min-width: 1680px) { .contact-map .address-box-container { height: 480px; } }
@media (max-width: 1440px) { .contact-map .address-box-container { height: 420px; } }

/* Contact Details */
.sidebar-textbox {
	display: inline-block;
	width: 100%;
	padding-right: 40px;
}

.sidebar-textbox.color {
	background-color: #666;
	color: #fff;
}

.sidebar-textbox.color h4 {color: #fff;}
.sidebar-textbox h4 {
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
}

.sidebar-textbox span { color: #666; display: inline-block; }
.sidebar-textbox.color span { color: #fff; }

.sidebar-textbox ul.contact-details {
	list-style: none;
	padding: 5px 0 0 0;
}

.sidebar-textbox ul.contact-details strong {
	font-weight: 500;
}

.sidebar-textbox ul.contact-details li {
	text-align: left;
	padding-left: 60px;
	position: relative;
	width: 100%;
	display: inline-block;
	margin: 10px 0;
	line-height: 24px;
}

.sidebar-textbox ul.contact-details li a { color: #66676b; }

.sidebar-textbox ul.contact-details li strong {
	display: block;
	color: #333;
}

.sidebar-textbox ul.contact-details li i {
	height: 100%;
	position: absolute;
	left: 0;
	font-size: 32px;
	color: #333;
	top: 10px
}

/* Coming Soon Page
------------------------------------- */
.coming-soon-page {
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	position: relative;
}

.coming-soon-page .container {
	z-index: 15;
	position: relative;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 992px) {
	.coming-soon-page {
		min-height: 100vh;
		height: auto;
	}
	.coming-soon-page .container {
		padding-top: 50px;
		padding-bottom: 50px;
		top: auto;
		transform: translateY(0%);
	}
}

.coming-soon-page:before {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 10;
	content: "";
	background-color: rgba(26,26,26,0.92)
}

.coming-soon-page h2,
.coming-soon-page h3 {
	margin: 0;
	padding: 0;
}

.coming-soon-page h2 {
	font-size: 46px;
	color: #fff;
}

.coming-soon-page h3 {
	font-size: 34px;
	font-weight: 300;
	margin: 30px 0 30px 0;
	color: rgba(255,255,255,0.9);
}

.coming-soon-page .main-search-input-item input {
	font-size: 16px;
	font-weight: 600;
}

.coming-soon-page .gray-style.main-search-input {
	max-width: 650px;
	margin: 0 auto;
}

.coming-soon-page .main-search-input button.button { font-size: 16px; }

/* Countdown */
#countdown {
	font-weight: 600;
	float: none;
	display: inline-block;
}

#countdown div {
	display: inline-block;
	margin: 0 5px;
	float: left;
}

#countdown div:first-child i { border: none;}

#countdown span {
	background-color: rgba(255,255,255,0.1);
	font-size: 40px;
	color: #fff;
	width: 120px;
	display: inline-block;
	padding: 32px 0;
	font-weight: 400;
	letter-spacing: -1px;
	border-radius: 3px 3px 0 0;
}

#countdown i {
	display: block;
	font-style: normal;
	margin: 0;
	text-transform: uppercase;
	font-size: 13px;
	padding: 4px 0;
	letter-spacing: 1px;
	background-color: #fff;
	color: #333;
	border-radius: 0 0 3px 3px;
}

.countdown-text {
	font-size: 24px;
	margin-top: 15px;
	line-height: 36px;
	font-weight: 300;
}

@media (max-width: 550px) {
	#countdown,
	#countdown div,
	#countdown span {
		width: 100%;
	}
	#countdown div {
		padding: 10px 0;
	}
}

/* Blog Styles
------------------------------------- */
.blog-post {
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
	background-color: #fff;
	display: inline-block;
	width: 100%;
	border-radius: 3px;
	margin: 15px 0;
}

section.fullwidth .blog-post { margin: 5px 0 0 0; }

.post-img {
	position: relative;
	height: 100%;
	width: 100%;
	display: block;
}

.post-img img {
	width: 100%;
	border-radius: 3px 3px 0 0;
}

.post-img:after {
	position: absolute;
	height: 100%;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	content: "";
	z-index: 9;
	opacity: 0.1;
	background: #333;
	transition: opacity 0.4s;
	border-radius: 3px 3px 0 0;
}

.post-img:hover:after {
	opacity: 0.5;
}

/* Post Hover Icon */
.post-img:before {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	display: block;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	content: "";
	z-index: 119;
	transition: 0.3s;
	transform: translateY(-80%);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 50%;
	background-color: #66676b;
	background-image: url(../images/plus-icon.svg);
	background-repeat: no-repeat;
	background-position: 50%
}

.post-img:hover:before {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%);
}

/* Content Styling */
.post-content { padding: 38px; }

.post-content p { margin: 18px 0 0 ; }

.post-content h3 {
	margin: 0;
	line-height: 34px;
	font-size: 22px;
}

.post-content h3 a { color: #333; }
.post-content h3 a:hover {color: #66676b; }

.post-content .meta-tags span {
	margin: 0 0 15px 0;
	display: inline-block;
	color: #888;
}

.post-content a.read-more {
	color: #66676b;
	margin: 23px 0 2px 0;
	display: inline-block;
}

a.read-more i {
	font-size: 20px;
	position: relative;
	padding-left: 4px;
	top: 1px;
	transition: 0.2s;
}

 a.read-more:hover i {
	padding-left: 7px;
}

/* Post Meta */
.post-meta {
	list-style: none;
	padding: 0;
	margin: 5px 0 0 0;
}

.post-meta li {
	display: inline-block;
	color: #888;
}

.post-meta li:after {
	content: "";
	width: 1px;
	height: 12px;
	background: #d0d0d0;
	display: inline-block;
	position: relative;
	top: 0px;
	margin: 0 10px;

}

.post-meta li:last-child:after { display: none; }

.post-meta li a { color: #888; }

.post-meta li a:hover {
	color: #66676b;
}

/* Blog Page Common Style */
.blog-page .blog-post {
	margin: 0 0 45px 0;
}

.blog-page h4.headline { font-size: 22px !important; font-weight: 400; }

/* Search Widget */
.search-blog-input { position: relative; }

.widget .search-blog-input .input:before {
	content: "\e090";
	font-size: 17px;
	color: #a0a0a0;
	position: absolute;
	display: inline-block;
	font-family: "simple-line-icons";
	right: 18px;
	top: 13px;
	margin-bottom: 0;
	background-color: #fff;
	padding-left: 7px;
}

#contact textarea,
#contact input,
.widget .search-blog-input input {
	transition: box-shadow 0.2s !important;
}

#contact textarea:focus,
#contact input:focus,
.widget .search-blog-input input:focus {
	transition: box-shadow 0.2s !important;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
}

/* Blog Widget Tabs */
.widget-tabs {
	padding: 0;
	list-style: none;
}

.widget-tabs li {
	padding: 0 0 27px 0;
	margin: 24px 0 0 0;
	border-bottom: 1px solid #e0e0e0;
}

.widget .tab-content { padding-bottom: 0; }

.widget-thumb a img {
	display: block;
	width: 95px;
	height: 95px;
	float: left;
	border-radius: 3px;
	margin: 3px 22px 0 0;
}

.widget-thumb {
	width: 85px;
	margin-right: 23px;
}

.widget-text h5 {
	font-size: 15px;
	line-height: 24px;
	margin: 0 0 5px 0;
}

.widget-text h5 a { color: #333; }
.widget-text h5 a:hover { color: #66676b }

.widget-text span {
	color: #888;
	font-weight: 400;
	line-height: 22px;
	margin: 0;
	display: block;
}

.widget-thumb {
	display: inline-block;
}

.widget-thumb a img {
	width: 85px;
	height: auto;
}

.widget-text {
	display: inline-block;
	width: 70%;
	padding: 0;
	position: relative;
	top: -2px;
}

.widget-tabs .widget-content {
	display: table;
}

.widget-tabs .widget-content .widget-text {
	display: table-cell;
	vertical-align: middle;
}

.widget-tabs li {
	padding: 0 0 20px 0;
	margin: 24px 0 0 0;
}

.widget-tabs li:first-child {
	padding: 0 0 20px 0;
	margin: 32px 0 0 0;
}

.widget-tabs li:last-child {
	border: none;
	padding-bottom: 0;
}

.widget h3 {
	margin-top: 0;
	margin-bottom: 25px;
	font-size: 22px;
}

/* Single Post */
.single-post p {
	margin: 20px 0;
}

.single-post p:last-child {
	margin-bottom: 0px;
}

.single-post .post-img {
	border-radius: 3px 3px 0 0;
}

.blog-page .blog-post .post-content,
.single-post .post-content {
	padding: 36px 43px;
}

/* About Author
------------------------------------- */
.about-author {
    margin: 10px 0 45px 0;
    padding: 30px 35px;
	background: #f8f8f8;
	border-radius: 4px;
}

.about-author p { margin: 5px 0 5px 0; }

.about-author a {
	position: relative;
	top: -7px;
	color: #66676b;
}

.about-author h4 {
	letter-spacing: 0;
}

.about-author img {
	float: left;
	margin: 7px 5px 5px 5px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
}

.about-description {
	margin: 2px 0 0 150px;
}

/* Blog Compact Item
------------------------------------- */

.blog-compact-item-container {
	box-shadow: 0 0 7px 0 rgba(0, 0, 0, .12);
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	background: transparent;
	transform: translate3d(0,0,0);
	transition: transform 0.3s;
	margin-bottom: 30px;
}

.blog-compact-item-container:hover {
	transform: translate3d(0,-6px,0);
}

.blog-compact-item {
	background: #ccc;
	border-radius: 4px;
	height: 100%;
	display: block;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	height: 480px;
	z-index: 100;
	cursor: pointer;
}

.blog-compact-item img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.blog-compact-item:before {
	content: "";
	top: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9;
	background: linear-gradient(to top, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.65) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
/*	background-color: rgba(35,35,37,0.1);*/
	border-radius: 4px;
	opacity: 1;
}

.blog-compact-item-content {
	position: absolute;
	bottom: 32px;
	left: 0;
	padding: 0 34px;
	width: 100%;
	z-index: 50;
	box-sizing: border-box;
}

.blog-compact-item-content h3 {
	color: #fff;
	font-size: 20px;
	padding: 5px 0;
	font-weight: 500;
	margin: 2px 0 0 0;
	line-height: 31px;
}

.blog-compact-item-content span {
	font-size: 16px;
	font-weight: 300;
	display: inline-block;
	color: rgba(255,255,255,0.7);
}

.blog-compact-item-content p {
	font-size: 16px;
	font-weight: 300;
	display: inline-block;
	color: rgba(255,255,255,0.8);
	margin: 7px 0 0 0;
}

span.blog-item-tag {
	text-transform: uppercase;
	font-size: 9.7px;
	letter-spacing: 2.5px;
	font-weight: 60;
	background: #66676b;
	border-radius: 50px;
	padding: 5px 16px;
	line-height: 20px;
	color: #fff;
	font-weight: 400;
	margin-bottom: 9px;
	position: absolute;
	top: 30px;
	left: 32px;
	z-index: 110;
}

.blog-post-tags {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	opacity: 0.9;
}

.blog-post-tags li {
	display: inline-block;
	margin-right: 5px;
}

.blog-post-tags li i {
	margin-right: 3px;
	font-weight: normal;
	display: inline-block;
}

/* Buttons
------------------------------------- */

button.button,
input[type="button"],
input[type="submit"],
a.button.border,
a.button {
	background-color: #66676b;
	top: 0;
	padding: 9px 20px;
	color: #fff;
	position: relative;
	font-size: 15px;
	font-weight: 600;
	display: inline-block;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	margin-right: 6px;
	overflow: hidden;
	border: none;
	border-radius: 50px;
}

input[type="button"],
input[type="submit"] {
	line-height: 32px;
}

button.button:before,
a.button:before {
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: all 0.2s;
}

button.button:hover:before,
a.button:hover:before {
	opacity: 0.1;
}

a.button.white {
	background-color: #fff;
	color: #333;
}

button.button { line-height: 26px; }

/* Border Button Style */
a.button.border:before { display: none; }

a.button.border {
	background-color: transparent;
	color: #66676b;
	border: 1px solid #66676b;
	padding: 9px 21px;
}

a.button.border:hover {
	background-color: #66676b;
	color: #fff;
	opacity: 1;
}

a.button.border.white {
	border-color: #fff;
	color: #fff;
}

a.button.border.white:hover {
	background-color: #fff;
	color: #66676b;
}

/* Full Width Button */
button.button.fullwidth,
a.button.fullwidth {
	width: 100%;
	text-align: center;
}

a.button.white.border:hover { color: #333; }

.button i { padding-right: 4px; }

.centered-content { text-align: center; }
.centered-content .button { min-width: 130px;  }

a.button.border { font-weight:500; }

/* Icon Box #2
------------------------------------- */
.icon-box-2 {
	text-align: center;
	margin-top: 45px;
	position: relative;
}

.icon-box-2 i {
	width: 120px;
	height: 80px;
	background-color: #fff;
	border-radius: 50%;
	line-height: 80px;
	font-size: 60px;
	display: inline-block;
	margin-bottom: 10px;
	text-align: center;
	overflow: hidden;
	color: #66676b;
	position: relative;
	z-index: 11;
}

.icon-box-2 span {
	color: #666;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
}

.icon-box-2 h4 {
	margin: 4px 0;
	line-height: 26px;
}

.icon-box-2 h3 {
	margin: 4px 0;
	line-height: 26px;
	font-size: 19px;
	font-weight: 500;
}

.icon-box-2 p {
	margin-top: 15px;
	font-size: 16px;
	margin-bottom: 20px
}

section.fullwidth .icon-box-2 p {
	margin-bottom: 0px;
}

.icon-box-2.with-line:before {
	content: "";
	height: 1px;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 40px;
	background: #e9e9e9;
	display: block;
	z-index: 9;
}

section.fullwidth .icon-box-2 {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.07);
    padding: 40px;
    background: #fff;
    border-radius: 4px;
    transition: 0.4s;
    cursor: default;
    margin: 20px 0;
}

section.fullwidth .icon-box-2.with-line:before { display: none; }

section.fullwidth .icon-box-2 i {
    background-color: rgba(102, 103, 107, 0.07);
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 38px;
}

section.fullwidth .icon-box-2:hover {
    transform: translateY(-8px);
}

/* Icon Box #3
------------------------------------- */
.icon-box-3 {
	text-align: left;
	padding-left: 90px;
	position: relative;
	width: 100%;
	display: inline-block;
	margin: 20px 0;
}

/* Edge Icon Box */
.icon-box-3 h4 {
	font-size: 18px;
	font-weight: 600;
}

.icon-box-3 i {
	font-size: 54px;
	color: #333;
	height: 60px;
	margin: 10px 0;
	display: inline-block;
	height: 100%;
	position: absolute;
	left: 0;
}

.icon-box-3 p {
	color: rgba(51,51,51,0.7);
	margin-top: 3px;
	display: inline-block;
}

/* Rounded */
.icon-box-1.rounded i,
.icon-box-2.rounded i,
.icon-box-3.rounded i {
	width: 110px;
	height: 110px;
	background-color: #666;
	border-radius: 50%;
	color: #fff;
	line-height: 110px;
	font-size: 50px;
	display: inline-block;
	margin-bottom: 20px;
	text-align: center;
	overflow: hidden;
}

.rounded i:before {
	position: relative;
	z-index: 11;
}

/* Background Animation */
.icon-box-1.rounded i,
.icon-box-2.rounded i,
.icon-box-3.rounded i{
	transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
	transform: translate3d(0,0,0) rotate(0);
}

body .icon-box-1.rounded:hover i,
body .icon-box-2.rounded:hover i,
body .icon-box-3.rounded:hover i {
	color: #fff;
}

/* Icon Box Shadow Animation*/
.icon-box-1.rounded i:after,
.icon-box-2.rounded i:after,
.icon-box-3.rounded i:after {
	content: "";
	width: 120%;
	height: 0px;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #fff;
	z-index: 8;
	transition: height 0.3s ease-in-out, opacity 0.3s ease-out;
	opacity: 0;
	transform: translate3d(50%,-50%,0) scale(1) rotate(45deg);
}

.icon-box-1.rounded:hover i:after,
.icon-box-2.rounded:hover i:after,
.icon-box-3.rounded:hover i:after { height: 145%; opacity: 0.1; }

/* Dark and Light Icon Box Styles */
.icon-box-1.rounded.dark i,
.icon-box-2.rounded.dark i,
.icon-box-3.rounded.dark i{
	background-color: #222;
}

.icon-box-1.rounded.light i,
.icon-box-2.rounded.light i,
.icon-box-3.rounded.light i{
	color: #333;
	background-color: #f2f2f2;
}

.icon-box-3.rounded {
	padding-left: 120px;
}

.icon-box-3.rounded i {
	width: 90px;
	height: 90px;
	font-size: 40px;
	line-height: 90px;
}

/* White colors */
body .white-text {color: #fff; }

.white-text .icon-box-1 p,
.white-text .icon-box-2 p,
.white-text .icon-box-3 p,
.white-text .icon-box-4 p { color: rgba(255,255,255,0.85); }

.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text .icon-box-1 h4,
.white-text .icon-box-2 h4,
.white-text .icon-box-3 h4,
.white-text .icon-box-4 h4,
.white-text .icon-box-1 i,
.white-text .icon-box-2 i,
.white-text .icon-box-3 i,
.white-text .icon-box-4 i { color: #fff; }

@media (max-width: 1659px) {
	.icon-box-3.rounded { padding-left: 110px; }

	.icon-box-3.rounded i {
		width: 80px;
		height: 80px;
		font-size: 38px;
		line-height: 80px;
	}
}

/* Tables
------------------------------------- */
table.basic-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border:none;
	margin-bottom: 15px;
}

table.basic-table th {
	background-color: #66676b;
	text-align: left;
	color: #fff;
	vertical-align: top;
	font-weight: 500;
}

table.basic-table th:first-child { border-radius: 4px 0 0 4px; }
table.basic-table th:last-child { border-radius: 0 4px 4px 0; }

table.basic-table th,
table.basic-table td {
	padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
	background-color: #f6f6f6
}

table.basic-table { margin-bottom: 0; }

@media screen and (max-width: 600px) {

	table.basic-table { border: 0; }
	table.basic-table th { display: none; }

	table.basic-table tr {
		display: block;
		margin-bottom: 0;
	}
	table.basic-table td {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: 14px;
		text-align: right;
	}

	table.basic-table td:before {
		content: attr(data-label);
		float: left;
		font-weight: 600;
	}

	table.basic-table td:last-child { border-bottom: 0; }
}

/* Accordion / Toggles
------------------------------------- */

.ui-accordion .ui-accordion-header,
.trigger a {
	display: block;
	cursor: pointer;
	position: relative;
	padding: 0;
	line-height: 26px;
	outline: none;
	color: #333;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	transition: background-color 0.2s, color 0.2s;
	padding: 16px 27px;
	margin: -1px 0 0 0;
}

.ui-accordion .ui-accordion-header i,
.trigger a i {
	font-size: 18px;
	top: 1px;
	position: relative;
	padding-right: 3px;
}

.style-2 .ui-accordion .ui-accordion-header i,
.style-2 .trigger a i {
	padding-right: 6px;
}

.style-2 .ui-accordion .ui-accordion-header:hover,
.style-2 .trigger a:hover { color: #66676b; }

.trigger.active a,
.ui-accordion .ui-accordion-header-active:hover,
.ui-accordion .ui-accordion-header-active {
	background-color: #66676b;
	border-color: #66676b;
	color: #fff;
}

.ui-accordion .ui-accordion-header i,
.trigger a i {
	margin: 0 4px 0 0;
	position: relative;
}

.ui-accordion .ui-accordion-content,
.toggle-container {
	padding: 28px 30px;
	border: 1px solid #e0e0e0;
	border-top: none;
}

.ui-accordion .ui-accordion-content p,
.toggle-container p { margin: 0; }

/* Style 2 of accordions and toggles */
.style-2 .ui-accordion .ui-accordion-header,
.style-2 .trigger a {
	border: none;
	margin: 0;
	padding: 27px 0;
	text-transform: none;
	font-size: 17px;
	font-weight: 500;
	background-color: transparent;
	color: #333;
	padding-right: 60px;
	font-weight: 400;
}

body .style-2 .ui-accordion .ui-accordion-header,
body .style-2 .trigger a { text-transform: none; }

.style-2 .ui-accordion .ui-accordion-content,
.style-2 .toggle-container {
	padding: 0px 0 30px 0;
	border: none;
}

.style-2 .trigger.active a,
.style-2 .ui-accordion .ui-accordion-header-active:hover,
.style-2 .ui-accordion .ui-accordion-header-active {
	background-color: transparent;
	border-color: transparent;
	color: #66676b;
	transition: color 0.1s;
}

.style-2 .ui-accordion .ui-accordion-header,
.style-2 .ui-accordion .ui-accordion-content,
.style-2 .toggle-wrap {
	border-bottom: 1px solid #e0e0e0
}

.style-2 .ui-accordion .ui-accordion-header-active { border: none; }

.accordion h3 .sl-icon-plus,
.trigger .sl-icon-plus {
	position: absolute;
	right: 0;
	top: 50%;
	font-size: 26px;
	transform: translate3d(0,-50%,0) rotate(0);
	transition: 0.2s;

}
.accordion h3.ui-accordion-header-active .sl-icon-plus,
.trigger.active .sl-icon-plus {
	margin-top: 2px;
	transform: translate3d(0,-50%,0) rotate(45deg);
}

/* Share Buttons
------------------------------------- */
.share-buttons {
	padding: 0;
	list-style: none;
}

.share-buttons li {
	display: inline-block;
	margin: 0 6px 8px 0;
}

.share-buttons li a {
	background: #fff;
	border: 1px solid #666;
	border-radius: 50px;
	font-weight: 500;
	font-size: 13px;
	padding: 7px 20px;
	transition: 0.3s;
	display: inline-block;
	line-height: 17px;
	font-weight: 500;
}

.share-buttons li a:hover { color: #fff; }

.share-buttons li i {
	font-size: 16px;
	position: relative;
	right: 3px;
	top: 1px;
}

/* fb */
.share-buttons li a.fb-share:hover { background: #3b5998; color: #fff; }
.share-buttons li a.fb-share {
	border-color: #3b5998;
	color: #3b5998;
}

/* twitter */
.share-buttons li a.twitter-share:hover { background: #1da1f2; color: #fff; }
.share-buttons li a.twitter-share {
	border-color: #1da1f2;
	color: #1da1f2;
}

/* gplus */
.share-buttons li a.gplus-share:hover { background: #dd4b39; color: #fff; }
.share-buttons li a.gplus-share {
	border-color: #dd4b39;
	color: #dd4b39;
}

/* pinterest */
.share-buttons li a.pinterest-share:hover { background: #bd081c; color: #fff; }
.share-buttons li a.pinterest-share {
	border-color: #bd081c;
	color: #bd081c;
}

/* Post Navigation
------------------------------------- */
#posts-nav {
	padding: 0;
	list-style: none;
	width: 100%;
	position: relative;
	margin: 0;
	display: inline-block;
	min-height: 60px;
}

#posts-nav li span {
	display: block;
	color: #888;
	font-size: 15px;
	margin-bottom: 1px;
	font-weight: 400;
}

#posts-nav li {
	position: absolute;
	font-size: 17px;
	font-weight: 500;
	width: 50%;
}

#posts-nav li a {
	transition: transform 0.3s, color 0.3s 0s;
	color: #333;
	display: inline-block;
}

#posts-nav li a:hover { color: #66676b; }

#posts-nav li.next-post {
	right: 0;
	text-align: right;
}

#posts-nav li.prev-post {
	left: 0;
}

#posts-nav li.next-post a { padding-right: 50px; }
#posts-nav li.prev-post a { padding-left: 50px; }

#posts-nav li.prev-post a:before,
#posts-nav li.next-post a:before {
	font-family: "simple-line-icons";
	font-size: 20px;
	position: absolute;
	color: inherit;
	top: 50%;
	transform: translate3d(0,-50%,0);
	transition: transform 0.3s;
}

#posts-nav li.next-post a:before {
	right: 0;
	content: "\e606";
}

#posts-nav li.prev-post a:before {
	left: 0;
	content: "\e605"
}

#posts-nav li.next-post a:hover:before { transform: translate3d(5px,-50%,0); }
#posts-nav li.prev-post a:hover:before { transform: translate3d(-5px,-50%,0); }

/* Pricing Tables
------------------------------------- */
.pricing-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	position: relative;
}

.plan {
	flex: 1;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
	text-align: center;
	position: relative;
	z-index: 9;
	overflow: hidden;
}

.plan-price {
	width: 100%;
	background: #f9f9f9;
	padding: 45px 30px;
	padding-top: 48px;
}

.plan:first-child .plan-price { border-radius: 4px 0 0 0; }
.plan:first-child { border-radius: 4px 0 4px 4px; }

.plan:last-child .plan-price { border-radius: 0 4px 0 0; }
.plan:last-child { border-radius: 0 4px 4px 0; }

.plan-price h3 {
	margin: 0;
	color: #888;
	font-weight: 400;
	font-size: 22px;
}

.plan.featured .listing-badge {
	background-color: #fff;
	color: #66676b;
}

.plan-price .value {
	display: block;
	font-size: 37px;
	line-height: 35px;
	padding: 22px 0 0 0;
	color: #333;
}

.plan-price .period {
	color: #888;
	margin-top: 20px;
	padding: 0 10%;
	display: block;
}

.plan-features {
	padding: 35px 30px;
	background: #fff;
	border-radius: 4px;
}

.plan-features ul {
	list-style: none;
	padding: 0;
}

.plan-features ul li {
	padding: 3px 0;
}

.plan-features a.button {
	margin-top: 20px;
}

/* featured plan*/
.plan.featured {
	margin-left: -1px;
	margin-right: -1px;
	transform: translateY(-23px);
	border-radius: 0 0 4px 4px;
	z-index: 11;
}

.plan.featured .plan-price {
	background-color: #66676b;
	padding: 50px 30px;
	border-radius: 4px 4px 0 0;
}

.plan.featured .plan-price h3 {
	color: #fff;
}

.plan.featured .plan-price .value {
	color: #fff;
}

.plan.featured .plan-price .period {
	color: #fff;
	line-height: 23px;
}

.plan.featured .plan-features { padding: 45px 30px; }

.plan.featured .listing-badges .featured {
	background: #fff;
	color: #66676b;
}

/* List Styles
------------------------------------- */

.list-4,
.list-3,
.list-2,
.list-1 {
	padding: 3px 0 0 0;
	font-size: 16px;
}

.list-4 li,
.list-3 li,
.list-2 li,
.list-1 li {
	list-style: none;
	margin: 14px 0;
	line-height: 27px;
	margin-left: 22px;
	position: relative;
}

.list-1.alt li { margin: 12px 0; margin-left: 22px; }

.list-4 li:first-child,
.list-3 li:first-child,
.list-2 li:first-child,
.list-1 li:first-child {
	margin-top: 0;
}

.list-4 li:before,
.list-3 li:before,
.list-2 li:before,
.list-1 li:before {
	font-family: "FontAwesome";
	margin: 0;
	position: relative;
	color: #66676b;
	float: left;
	margin-left: -22px;
	display: block;
}

.list-1.gray li:before {
	color: #777;
}

.list-4 li:before { content: "\f192"; font-size: 14px; top: 1px; }
.list-3 li:before { content: "\f058"; font-size: 15px; top: 1px; }
.list-2 li:before { content: "\f00c"; font-size: 14px; }
.list-1 li:before { content: "\f0c8"; font-size: 8px; }

.list-4 li { margin-left: 27px; }
.list-4 li:before { margin-left: -27px; }

/* Numbered Style */
.numbered ol {
	counter-reset: li;
	list-style: none;
	padding: 0;
	margin-left: 18px;
	display: inline-block;
	font-size: 16px;
}

.numbered ol li {
	display: inline-block;
	padding: 6px 0;
	width: 100%;
}

.numbered ol > li::before {
	content: counter(li);
	counter-increment: li;
	font-size: 16px;
	line-height: 33px;
	width: 36px;
	height: 36px;
	display: inline-block;
	border: 1px solid #333;
	border-radius: 50%;
	text-align: center;
	margin: 0;
	margin-left: 0;
	font-weight: 500;
	color: #333;
	position: relative;
	float: left;
	left: -18px;
	font-size: 15px;
	transform: translateY(-10%);
}

.numbered.color ol > li::before {
	border: 1px solid #66676b;
	color: #66676b;
}

.numbered.color.filled ol > li::before {
	border: 1px solid #66676b;
	color: #fff;
	background-color: #66676b;
}

mark.color {
    background-color: #66676b;
    border-radius: 4px;
}

mark { border-radius: 4px; }

.demo h1, .demo h2, .demo h3, .demo h4, .demo h5, .demo h6 {
    line-height: 40px;
}

/* Tooltips
------------------------------------- */
#tiptip_holder {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99999;
}

#tiptip_holder.tip_top {
	padding-bottom: 5px;
	-webkit-transform: translateX(12px)
}

#tiptip_holder.tip_bottom { padding-top: 5px; }
#tiptip_holder.tip_right { padding-left: 5px; }
#tiptip_holder.tip_left { padding-right: 5px; }

#tiptip_content {
	color: #fff;
	font-size: 13px;
	line-height: 16px;
	padding: 6px 10px;
	background-color: #333;
	border-radius: 3px;
}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow { border-top-color: #333; }
#tiptip_holder.tip_bottom #tiptip_arrow { border-bottom-color: #333; }
#tiptip_holder.tip_right #tiptip_arrow { border-right-color:#333; }
#tiptip_holder.tip_left #tiptip_arrow { border-left-color: #333; }

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: #333;
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: #333;
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: #333;
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: #333;
}

/* Info Box
------------------------------------- */
.info-box {
	background-color: #fff;
	display: inline-block;
	width: 100%;
	border-radius: 3px;
	padding: 23px 27px;
	border-top: 2px solid #66676b;
	background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
	background-color: #66676b;
	color: #66676b;
}

.info-box.no-border {
	border: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(255,255,255,0.93));
	background-color: #66676b;
}

.info-box h4 {
	margin: 0;
	font-size: 19px;
	color: #66676b;
	margin-bottom: 20px;
	margin-top: 0px;
}

.info-box p {
	margin-bottom: 0;
	font-size: 15px;
	line-height: 26px;
}

.info-box.large {
	padding: 36px;

}

/* Notification Boxes
------------------------------------- */
#result .success,
.notification {
	line-height: 24px;
	margin-bottom: 15px;
	position: relative;
	padding: 20px 26px;
	padding-right: 50px;
	border-radius: 3px;
}

.notification p { margin: 0; font-size: 15px; }

#result .success,
.notification.success {
	background-color: #EBF6E0;
}

#result .success,
.notification.success,
.notification.success a,
.notification.success strong {
	color: #5f9025;
}

.notification.error {
	background-color: #ffe9e9;
}
.notification.error,
.notification.error a,
.notification.error strong {
	color: #de5959;
}

.notification.warning {
	background-color: #FBFADD;
}
.notification.warning,
.notification.warning a,
.notification.warning strong {
	color: #8f872e;
}

.notification.notice h4 { font-size: 19px; margin: 3px 0 15px 0; }
.notification.notice h4,
.notification.notice,
.notification.notice a,
.notification.notice strong {
	color: #3184ae
}

.notification.notice {
	background-color: #E9F7FE;
}

.notification.notice.large{
	padding: 32px 36px;
}

#dashboard .success {
	background-color: #e6f3d8;
}

#dashboard .notice {
	background-color: #e1f3fc;
}

#dashboard .warning {
	background-color: #f6f4c9;
}

body .notification strong { border: none; }

.notification.success .close,
.notification.error .close,
.notification.warning .close,
.notification.notice .close {
	padding: 0px 9px;
	position: absolute;
	right: 0;
	top: 22px;
	display: block;
	height: 8px;
	width: 8px;
	cursor: pointer;
}

.notification.notice p span i { font-weight: 500; }
.notification a.button {
	float: right;
	color: #fff;
	margin-top: 3px;
}

.notification.notice a.button { background-color: #388fc5; }
.notification.warning a.button { background-color: #dfbe51; }
.notification.error a.button { background-color: #d34c4c; }
.notification.success a.button { background-color: #79ba38; }

.notification.closeable a.close:before {
	content: "\f00d";
	font-family: "FontAwesome";
	position: absolute;
	right: 25px;
	top: 0;
	cursor: pointer;
}

/* Image Hovers
------------------------------------- */
.img-box {
	height: 350px;
	display: inline-block;
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 90;
	margin: 10px 0;
	border-radius: 3px;
}

.img-box-background {
	background-size: cover;
	background-position: 50%;
	width: 100%;
	height: 100%;
	transition: all 0.55s;
	position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transition: transform 0.35s ease-out;
}

.img-box:hover .img-box-background { transform: scale(1.07); }

.img-box:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	background-color: #222;
	opacity: 0.3;
	z-index: 99;
	transition: 0.3s ease-out;
}

.img-box-content {
	position: absolute;
	z-index: 101;
	top: 50%;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	transform: translate(0,-50.5%);
}

.img-box-content h4 {
	font-size: 28px;
	line-height: 36px;
	color: #fff;
	margin: 0;
}

.img-box-content span {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    padding: 4px 12px;
    margin-top: 4px;
    line-height: 20px;
    display: inline-block;
    border-radius: 50px;
    font-size: 15px;
    transition: 0.3s;
}

.alternative-imagebox .img-box-content {
    transform: none;
    top: initial;
    bottom: 30px;
    padding-left: 30px;
    text-align: left;
}

.alternative-imagebox .img-box-content h4 { font-size: 22px; }
.alternative-imagebox.img-box { height: 270px; }

.alternative-imagebox.img-box:before {
	opacity: 1;
	background: -webkit-linear-gradient(bottom, rgba(35,35,37,0.7) 0%, rgba(35,35,37,0.35) 45%, rgba(22,22,23,0.1) 60%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(bottom, rgba(35,35,37,0.7) 0%, rgba(35,35,37,0.35) 45%, rgba(22,22,23,0.1) 60%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to top, rgba(35,35,37,0.7) 0%, rgba(35,35,37,0.35) 45%, rgba(22,22,23,0.1) 60%, rgba(0,0,0,0) 100%);
	background-color: rgba(35,35,37,0);
}

/* Testimonials
------------------------------------- */
.testimonial-box {
	background: transparent;
	border-radius: 6px;
	padding: 38px;
	padding-left: 110px;
	color: #888;
	position: relative;
	margin: 18px 0;
	box-shadow: none;
	transition: 0.4s;
	cursor: grab;
}

.testimonial-carousel .slick-slide {
	margin: 0 20px 30px 20px;
	opacity: 0.5;
	transition: 0.4s;
	pointer-events: all;
}

.testimonial-carousel .slick-slide.slick-active .testimonial-box {
	background: #66676b;
	color: #fff;
}

.testimonial-carousel .slick-slide.slick-active .testimonial:before {
	color: #66676b;
}

.testimonial:before {
	position: absolute;
	margin: 0 auto;
	display: block;
	width: 100%;
	text-align: center;
	bottom: -10px;
	left: 0;
	content: "\f0dd";
	font-family: "FontAwesome";
	font-size: 42px;
	color: transparent;
	background-color: transparent;
	cursor: default;
}

.testimonial:after {
	position: absolute;
	top: 47px;
	left: 42px;
	content: "\f10d";
	font-family: "FontAwesome";
	font-size: 38px;
	opacity: 0.3;
	color: #222;
	background-color: transparent;
	cursor: default;
}

.testimonial,
.testimonial p {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.testimonial-author {
	display: block;
	width: 100%;
	padding: 20px 0 15px 0;
	text-align: center;
	margin: 0 auto;
}

.testimonial-author img {
	width: 60px;
	display:inline-block;
	text-align: center;
	height: auto;
	border-radius: 50%;
	margin: 0 auto;
    border: 4px solid #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    box-sizing: content-box;
}

.testimonial-author h4 {
	display: block;
	width: 100%;
	font-size: 16px;
	padding-top: 5px;
	color: #333;
	font-weight: 500;
}

.testimonial-author h4 span {
	display: block;
	color: #888;
	padding-top: 6px;
	font-weight: 400;
	font-size: 15px;
}

.testimonial-box .star-rating {
	height: 30px;
	display: inline-block;
	margin-bottom: -10px;
	margin-top: 15px;
}

.testimonial-author h4 {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.testimonial-author h4 span {
    color: #888;
    margin-top: 8px;
    font-weight: 400;
    font-size: 14px;
    display: inline-block;
    line-height: 20px;
    padding: 4px 14px;
    border-radius: 50px;
    align-self: center;
    background: #f0f0f0;
    color: #999;
    transition: 0.3s;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 2.5px;
    padding: 4px 16px;
    line-height: 20px;
    font-weight: 400;
}

.slick-current .testimonial-author h4 span {
    background: rgba(102, 103, 107, 0.06);
    color: #66676b;
}

/* Info Banner
------------------------------------- */
.info-banner {
	display: block;
	width: 100%;
	padding: 90px 0;
	color: #fff;
	margin: 0;
}

.info-banner-content {
	position: relative;
	z-index: 199;
}

.info-banner.centered { text-align: center; }

.info-banner-content a.button {
	margin: 0 20px -15px 20px;
	position: relative;
}

.flip-banner h1,
.flip-banner h2,
.flip-banner h3,
.flip-banner h4,
.flip-banner h5,
.flip-banner h6,
.flip-banner a,
.info-banner-content h1,
.info-banner-content h2,
.info-banner-content h3,
.info-banner-content h4,
.info-banner-content h5,
.info-banner-content h6,
.info-banner-content a,
.info-banner-content {
	color: #fff;
	display: inline-block;
	margin: 0;
	position: relative;
}

/* Styles for info banner with parallax */
.text-content {
	background: transparent;
	padding: 110px 0px;
	font-weight: 500;
	z-index: 999;
	position: relative;
}

.text-content.white-font {
	color: #fff;
}

.text-content h1,
.text-content h2,
.text-content h3,
.text-content h4,
.text-content h5 {
	color: #fff;
}

.text-content.white-font h1,
.text-content.white-font h2,
.text-content.white-font h3,
.text-content.white-font h4,
.text-content.white-font h5 {
	color: #fff;
}

.text-content a.button {
	padding: 10px 26px;
	font-size: 16px;
	font-weight: 600;
}

.text-content.white-font a.button:hover {
	background-color: #fff;
	color: #333;
}

.text-content a.button:before {
	display: none;
}

.text-content p {
	font-size: 18px;
	font-weight: 400;
	line-height: 34px;
}

.text-content h2 { margin-bottom: 30px; line-height: 46px; font-size: 36px; font-weight: 500; }

.top-1 { position: relative; top: -1px; }
.top-0 { position: relative; }

/* Image Edge
------------------------------------- */
.image-edge {
	background-color: #f8f8f8;
	position: relative;
	overflow: hidden;
	margin: 35px 0 0 0;
	height: 50vw;
	max-height: 640px;
	overflow: hidden;
	padding: 0;
}

.image-edge #googlemaps,
.image-edge .google-map-container { height: 100%; }

.image-edge-content {
	padding: 0;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	width: 50%;
	padding: 0 9%;
}

.image-edge.left .image-edge-content { padding-left: 6%; }

.image-edge-content h3.headline {
	width: 100%;
	display: block;
	margin-top: 0;
}

/* Photo */
.edge-bg {
	position: absolute;
	width: 50%;
	top: 0;
	right: 0px;
	height: 100%;
	background-size: 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.edge-bg:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(34,34,34,0.1);
}

/* Left-photo version */
.image-edge.left .image-edge-content { left: 50%;}
.image-edge.left .edge-bg { left:0px; }

.image-edge.left .container {
	transform: translateX(54%);
	-webkit-transform: translateX(54%);
}

/* Styles for dark version  */
.image-edge.dark { background-color: #282828; color: #fff; }

.image-edge.dark h1,
.image-edge.dark h2,
.image-edge.dark h3,
.image-edge.dark h4,
.image-edge.dark h5 { color: #fff;}

.presentation-content h2,
.image-edge h2 {
	line-height: 56px;
	font-weight: 600;
	font-size: 40px;
	letter-spacing: -0.5px;
}

.presentation-content p,
.image-edge p { font-size: 20px; color: #828282; line-height: 34px;}
.image-edge.dark p { color: rgba(255,255,255,0.8);}

/* List */
.image-edge-content ul {
	list-style: none;
	padding: 0;
}

.image-edge-content ul li { margin-bottom: 30px; }
.image-edge-content ul li:last-child { margin-bottom: 0px; }

.image-edge-content h4 i {
	position: relative;
	top: -1px;
	margin-right: 2px;
}

@media (max-width: 767px) {
	.edge-bg {
		position: relative;
		height: 400px;
		width: 100%;
		display: block;
		left: 0;
		right: 0;
	}
}

/* Flip Banner
------------------------------------- */
.flip-banner {
	display: block;
	width: 100%;
	height: 180px;
	position: relative;
	text-align: center;
	overflow: hidden;
	z-index: 9999;
}

.flip-banner:after {
	background-color: #000;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	display: block;
	z-index: 100;
	transition: all 0.6s;
}

.flip-banner:hover:after {
	opacity: 0.6;
}

.flip-banner-content {
	position: relative;
	top: 50%;
	z-index: 200;
}

.flip-banner h2 {
	font-size: 32px;
	line-height: 40px;
	position: relative;
	width: 100%;
	display: block;
}

.flip-banner-content .flip-visible,
.flip-banner-content .flip-hidden {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
	transition: all 0.45s cubic-bezier(.87,-.41,.19,1.44);
}

.flip-banner:hover .flip-banner-content .flip-hidden,
.flip-banner-content .flip-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%);
}

.flip-banner:hover .flip-banner-content .flip-visible,
.flip-banner-content .flip-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateY(150%);
}

.flip-banner:hover .flip-banner-content .flip-visible {
	transform: translateY(-150%);
}

.flip-banner i { padding: 0 10px; }
.flip-banner .sl {
	position: relative;
	top: 1px;
	font-size: 26px;
}

@media (max-width: 767px) {
	.flip-banner .sl {
		font-size: 18px;
	}

	.flip-banner h2 {
		font-size: 22px;
		line-height: 34px;
	}
}

/* Tabs
------------------------------------- */
.tabs-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.tabs-nav li a i {
	padding-right: 5px;
	font-size: 16px;
	top: 1px;
	position: relative;
}

.tabs-nav li {
	float: left;
	line-height: 45px;
	padding: 0;
	margin-right: 4px;
	position: relative;
	z-index: 12;
}

.tabs-nav li a,
.tab-reviews {
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.tabs-nav li a {
	border-bottom: 1px solid transparent;
	color: #333;
	display: inline-block;
	outline: none;
	padding: 7px 15px;
	text-decoration: none;
	font-size: 15px;
	z-index: 11;
	position: relative;
	margin-bottom: -1px;
}

.tabs-nav li a:hover { border-color: #66676b; }

.tab-reviews { color: #aaa; }

.tabs-nav li.active .tab-reviews { color: #fff; }
.tabs-nav li a:hover,
.tabs-nav li.active a {
	border-color: #66676b;
	color: #66676b;
	z-index: 11;
}

.tab-content {
	padding: 28px 33px;
	position: relative;
	z-index: 10;
	display: inline-block;
	width: 100%;
}

.tabs-container {
	overflow: hidden;
	width: 100%;
}

.tab-content p:last-child { margin-bottom: 0; }

.style-2 .tabs-container { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 3px; }

/* Tabs Style 1 */
.style-1 .tabs-container .tab-content {
	border: none;
	border-top: 1px solid #e0e0e0;
	padding: 30px 0 0 0;
}

/* Taba Style 3 */
.style-3 .tabs-nav {
	text-align: center;
}

.style-3 .tabs-nav li {
	float: none;
	line-height: 32px;
	padding: 0;
	margin-right: 4px;
	position: relative;
	z-index: 12;
	display: inline-block;
	text-align: center;
}

.style-3 .tabs-nav li a {
	border: none;
	color: #333;
	display: inline-block;
	outline: none;
	padding: 7px 24px;
	text-decoration: none;
	font-size: 14px;
	z-index: 11;
	position: relative;
	margin-bottom: -1px;
	background-color: #fff;
	border-radius: 3px;
	font-size: 13px;
}

.style-3 .tabs-nav li a:hover,
.style-3 .tabs-nav li.active a {
	border-color: #66676b;
	background-color: #66676b;
	color: #fff;
	z-index: 11;
}

.style-3 .tabs-container .tab-content {
	border: none;
	padding: 30px 0 0 0;
}

/* Tabs Style 4 */
.style-4 .tabs-nav {
	width: 35%;
	display: table-cell;
}

.style-4 .tabs-container {
	width: 65%;
	padding-left: 20px;
	display: table-cell;
	vertical-align: middle;
}

.style-4 .tabs-container .tab-content {
	border: none;
	padding: 10px 0 0 0;
}

.style-4.tabs { display: table; }

.style-4 .tabs-nav li a {
	float: none;
	width: 90%;
	border: none;
	padding: 0;
	background-color: #fff;
	margin: 0 0 1px 0;
	border: none;
	padding: 9px 24px;
	line-height: 30px;
	border-radius: 3px;
}

.style-4 .tabs-nav li.active a {
	background-color: #66676b;
	color: #fff;
}

.style-4 .tabs-nav li {
	width: 100%;

}

/* Tabs Style 5 */
.style-5 .tabs-nav li {
	width: 33.33%;
}

.stytle-5 .tabs-container .widget-text {
	position: relative;
	top: 50px;
	transform: transitionY(-50%);
	display: inline-block;
}

.style-5 .tabs-nav {
	bottom: 5px;
	position: relative;
}

.style-5 .tabs-nav li a {
	border: none;
	background-color: #f2f2f2;
	color: #333;
	border-radius: 4px;
	padding: 0;
}

.style-5 .tabs-nav li.active a {
	background-color: #66676b;
	color: #fff;
}

.style-5 .tabs-container .tab-content {
	box-shadow: none;
	border: none;
	padding: 20px 0 0 0;
}

/* Login Register
------------------------------------- */
.rememberme {
	display: block;
	margin-top: 10px;
	cursor: pointer;
}

.sign-in-form .tabs-container { overflow: visible; }

.sign-in-form .tabs-nav li {
    line-height: 15px;
}

.sign-in-form .tabs-nav li a {
    padding: 0 15px 18px 15px;
    color: #666;
}

.sign-in-form .tabs-nav li a:hover,
.sign-in-form .tabs-nav li.active a {
    color: #66676b;
}

.lost_password a { margin: 0; color: #666; font-size: 15px; }
.lost_password:hover a { color: #66676b; }

.rememberme input {
	margin: 0 2px 0 0;
	display: inline-block;
	min-height: auto;
	width: auto;
}

.myaccount input.button {
	margin-bottom: 0;
}

.sign-in-form label {
	position: relative;
	color: #666;
	font-size: 15px;
}

.sign-in-form label input {
	margin-top: 8px;
	padding-left: 45px;
	height: 53px;
}

.sign-in-form label input[type="checkbox"] {
	height: auto;
}

.sign-in-form input {
	transition: box-shadow 0.2s !important;
}

.sign-in-form input:focus {
	transition: box-shadow 0.2s !important;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
}

.sign-in-form label i {
	font-size: 21px;
	color: #a0a0a0;
	position: absolute;
	left: 15px;
	bottom: 13px;
}

.sign-in-form .button {
	line-height: 26px;
	height: auto;
	min-width: 120px;
	margin-bottom: 0;
}

/* Social Icons
------------------------------------- */
.social-icons { padding-left: 5px; }

.social-icons li {
	display: inline;
	float: left;
	text-align: left;
	margin-right: 16px;
	margin-top: 11px;
	transform:scale(1.19);
	-webkit-transform:scale(1.19);
	-webkit-filter: blur(radius);
}

.social-icons li a {
	width: 44px;
	height: 44px;
	display: inline-block;
	background-color: #f3f3f3;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
}

.social-icons.fixed li a {
	display: block;
}

/* Common Styles */
.social-icons li a i {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	position: absolute;
	z-index: 20;
	transform:scale(0.9);
	-webkit-transform:scale(0.9);
	-webkit-filter: blur(radius);
}

.social-icons li a:hover,
.social-icons li a i {
	color: #fff;
}

.social-icons li a i {
	top: -30px;
	opacity:0;
}

.social-icons li a:hover i {
	top: 0;
	opacity: 1;
}

/* Rounded Style */
.social-icons.rounded li a { border-radius: 50%; }

/* Border Style */
.social-icons.border li a {
	background-color: #fff;
	border: 1px solid #e0e0e0;
}

.social-icons.border li a:hover {
	border-color: transparent;
}

/* Color Style */
.social-icons.color li a {
	border-color: transparent;
}
.social-icons.color li a i,
.social-icons.color li a:hover i {
	top: 0;
	opacity: 1;
}

.social-icons.color a:before { opacity: 0; }

/* Fixed Style */
.social-icons.fixed {
	position: fixed;
	left: 0;
	padding-left: 2px;
	top: 100px;
	width: 50px;
}

.social-icons.fixed li {
	transform:scale(1.15);
	-webkit-transform:scale(1.15);
	margin-top: 7px;
}

.social-icons.fixed li a { background-color: rgba(51,51,51,0.35); }
.social-icons.fixed li a:before { color: #fff; }

.twitter:before,
.wordpress:before,
.facebook:before,
.linkedin:before,
.steam:before,
.tumblr:before,
.github:before,
.delicious:before,
.instagram:before,
.xing:before,
.amazon:before,
.dropbox:before,
.paypal:before,
.lastfm:before,
.gplus:before,
.yahoo:before,
.pinterest:before,
.dribbble:before,
.flickr:before,
.reddit:before,
.vimeo:before,
.spotify:before,
.rss:before,
.youtube:before,
.blogger:before,
.appstore:before,
.digg:before,
.evernote:before,
.fivehundredpx:before,
.forrst:before,
.stumbleupon:before,
.dribbble:before {
	font-family: "fontello";
	font-size: 16px;
	line-height: 16px;
	color: #a0a0a0;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	position: absolute;
	z-index: 20;
	transform:scale(0.9);
}

/* Icon Styles */
.twitter:before,
.social-icons li a.twitter i {font-size: 14px ;}
.twitter i, .twitter:before { margin: 13px 0 0 12px;  }
.twitter:before { content: "\54"; top: 0; opacity:1; }
.twitter:hover:before { top: 30px; opacity: 0; }
.twitter:hover { background-color: #3bc1ed !important; }
.twitter:hover,
.social-icons.color  .twitter,
.social-icons.fixed .twitter:hover { background-color: #3bc1ed; border-color: #3bc1ed; }

.dribbble i, .dribbble:before { margin: 13px 0 0 13px; }
.dribbble:before { content: "\44"; top: 0; opacity:1; }
.dribbble:hover:before { top: 30px; opacity: 0; }
.dribbble:hover { background-color: #ef5a92 !important; }
.social-icons.color .dribbble,
.social-icons.fixed .dribbble:hover { background-color: #ef5a92 ; border-color: #ef5a92 ; }

.facebook i, .facebook:before { margin: 13px 0 0 16px; }
.facebook:before { content: "\66"; top: 0; opacity:1; }
.facebook:hover:before { top: 30px; opacity: 0; }
.facebook:hover { background-color: #4a6d9d !important; }
.social-icons.color .facebook,
.social-icons.fixed .facebook:hover { background-color: #4a6d9d ; border-color: #4a6d9d ;}

.linkedin i, .linkedin:before { margin: 13px 0 0 13px; }
.linkedin:before { content: "\4c"; top: 0; opacity:1; }
.linkedin:hover:before { top: 30px; opacity: 0; }
.linkedin:hover { background-color: #0b7bb5 !important; }
.social-icons.color .linkedin,
.social-icons.fixed .linkedin:hover { background-color: #0b7bb5 ; border-color: #0b7bb5 ;}

.delicious i, .delicious:before { margin: 13px 0 0 13px; }
.delicious:before { content: "\23"; top: 0; opacity:1; }
.delicious:hover:before { top: 30px; opacity: 0; }
.delicious:hover { background-color: #3274d1 !important ; }
.social-icons.color .delicious,
.social-icons.fixed .delicious:hover { background-color: #3274d1 ; border-color: #3274d1 ;}

.paypal i, .paypal:before { margin: 13px 0 0 13px; }
.paypal:before { content: "\24"; top: 0; opacity:1; }
.paypal:hover:before { top: 30px; opacity: 0; }
.paypal:hover { background-color: #2e689a !important ; }
.social-icons.color .paypal,
.social-icons.fixed .paypal:hover { background-color: #2e689a ; border-color:#2e689a  ;}

.gplus i, .gplus:before { margin: 13px 0 0 13px; }
.gplus:before { content: "\f0d5"; top: 0; opacity:1; }
.gplus:hover:before { top: 30px; opacity: 0; }
.gplus:hover { background-color: #d53824 !important ; }
.social-icons.color .gplus,
.social-icons.fixed .gplus:hover { background-color: #d53824 ;border-color: #d53824 ;}

.stumbleupon i, .stumbleupon:before { margin: 13px 0 0 11px; }
.stumbleupon:before { content: "\2f"; top: 0; opacity:1; }
.stumbleupon:hover:before { top: 30px; opacity: 0; }
.stumbleupon:hover { background-color: #eb4924 !important ; }
.social-icons.color .stumbleupon,
.social-icons.fixed .stumbleupon:hover { background-color: #eb4924 ; border-color:#eb4924  ;}

.fivehundredpx i, .fivehundredpx:before { margin: 13px 0 0 11px; }
.fivehundredpx:before { content: "\30"; top: 0; opacity:1; }
.fivehundredpx:hover:before { top: 30px; opacity: 0; }
.fivehundredpx:hover { background-color: #444 !important ; }
.social-icons.color .fivehundredpx,
.social-icons.fixed .fivehundredpx:hover { background-color: #444 ; border-color:  #444 ;}

.pinterest i, .pinterest:before { margin: 13px 0 0 15px; }
.pinterest:before { content: "\31"; top: 0; opacity:1; }
.pinterest:hover:before { top: 30px; opacity: 0; }
.pinterest:hover { background-color: #cb1f25 !important ; }
.social-icons.color .pinterest,
.social-icons.fixed .pinterest:hover { background-color: #cb1f25 ; border-color: #cb1f25 ;}

.forrst i, .forrst:before { margin: 13px 0 0 15px; }
.forrst:before { content: "\3a"; top: 0; opacity:1; }
.forrst:hover:before { top: 30px; opacity: 0; }
.forrst:hover { background-color: #40833e !important ; }
.social-icons.color .forrst,
.social-icons.fixed .forrst:hover { background-color: #40833e ; border-color:  #40833e ;}

.digg i, .digg:before { margin: 13px 0 0 12px; }
.digg:before { content: "\3b"; top: 0; opacity:1; }
.digg:hover:before { top: 30px; opacity: 0; }
.digg:hover { background-color: #205685 !important ; }
.social-icons.color .digg,
.social-icons.fixed .digg:hover { background-color: #205685 ; border-color: #205685 ;}

.spotify i, .spotify:before { margin: 13px 0 0 13px; }
.spotify:before { content: "\3d"; top: 0; opacity:1; }
.spotify:hover:before { top: 30px; opacity: 0; }
.spotify:hover { background-color: #6ca405 !important ; }
.social-icons.color .spotify,
.social-icons.fixed .spotify:hover { background-color: #6ca405 ; border-color: #6ca405 ;}

.reddit i, .reddit:before { margin: 13px 0 0 12px; }
.reddit:before { content: "\3e"; top: 0; opacity:1; }
.reddit:hover:before { top: 30px; opacity: 0; }
.reddit:hover { background-color: #404040 !important ; }
.social-icons.color .reddit,
.social-icons.fixed .reddit:hover { background-color: #404040 ; border-color:  #404040 ;}

.appstore i, .appstore:before { margin: 13px 0 0 14px; }
.appstore:before { content: "\41"; top: 0; opacity:1; }
.appstore:hover:before { top: 30px; opacity: 0; }
.appstore:hover { background-color: #c0c0c0 !important ; }
.social-icons.color .appstore,
.social-icons.fixed .appstore:hover { background-color: #c0c0c0 ; border-color: #c0c0c0 ;}

.blogger i, .blogger:before { margin: 13px 0 0 13px; font-size: 14px ; }
.blogger:before { content: "\42"; top: 0; opacity:1; }
.blogger:hover:before { top: 30px; opacity: 0; }
.blogger:hover { background-color: #ff6501 !important ; }
.social-icons.color .blogger,
.social-icons.fixed .blogger:hover { background-color: #ff6501 ; border-color:#ff6501  ;}

.dribbble i, .dribbble:before { margin: 13px 0 0 13px; }
.dribbble:before { content: "\44"; top: 0; opacity:1; }
.dribbble:hover:before { top: 30px; opacity: 0; }
.dribbble:hover { background-color: #ef5a92 !important ; }
.social-icons.color .dribbble,
.social-icons.fixed .dribbble:hover { background-color: #ef5a92 ; border-color: #ef5a92 ;}

.evernote i, .evernote:before { margin: 13px 0 0 15px; }
.evernote:before { content: "\45"; top: 0; opacity:1; }
.evernote:hover:before { top: 30px; opacity: 0; }
.evernote:hover { background-color: #6bb130  !important; }
.social-icons.color .evernote,
.social-icons.fixed .evernote:hover { background-color: #6bb130 ; border-color: #6bb130 ;}

.flickr i, .flickr:before { margin: 13px 0 0 13px; }
.flickr:before { content: "\46"; top: 0; opacity:1; }
.flickr:hover:before { top: 30px; opacity: 0; }
.flickr:hover { background-color: #136dd5  !important; }
.social-icons.color .flickr,
.social-icons.fixed .flickr:hover { background-color: #136dd5 ;border-color: #136dd5 ; }

.rss i, .rss:before { margin: 13px 0 0 14px; font-size: 14px ; }
.rss:before { content: "\52"; top: 0; opacity:1; }
.rss:hover:before { top: 30px; opacity: 0; }
.rss:hover { background-color: #fe8f00  !important; }
.social-icons.color .rss,
.social-icons.fixed .rss:hover { background-color: #fe8f00 ; border-color: #fe8f00 ;}

.youtube i, .youtube:before { margin: 13px 0 0 14px; font-size: 18px ; }
.youtube:before { content: "\55"; top: 0; opacity:1; }
.youtube:hover:before { top: 30px; opacity: 0; }
.youtube:hover { background-color: #bf2f29  !important; }
.social-icons.color .youtube,
.social-icons.fixed .youtube:hover { background-color: #bf2f29 ;border-color: #bf2f29 ; }

.vimeo i, .vimeo:before { margin: 13px 0 0 13px; font-size: 14px ; }
.vimeo:before { content: "\56"; top: 0; opacity:1; }
.vimeo:hover:before { top: 30px; opacity: 0; }
.vimeo:hover { background-color: #4c8ab0  !important; }
.social-icons.color .vimeo,
.social-icons.fixed .vimeo:hover { background-color: #4c8ab0 ; border-color: #4c8ab0 ;}

.xing i, .xing:before { margin: 13px 0 0 14px; }
.xing:before { content: "\58"; top: 0; opacity:1; }
.xing:hover:before { top: 30px; opacity: 0; }
.xing:hover { background-color: #036568 !important ; }
.social-icons.color .xing,
.social-icons.fixed .xing:hover { background-color: #036568 ; border-color: #036568 ;}

.yahoo i, .yahoo:before { margin: 13px 0 0 11px; }
.yahoo:before { content: "\59"; top: 0; opacity:1; }
.yahoo:hover:before { top: 30px; opacity: 0; }
.yahoo:hover { background-color: #9251a2  !important; }
.social-icons.color .yahoo,
.social-icons.fixed .yahoo:hover { background-color: #9251a2 ; border-color: #9251a2 ;}

.amazon i, .amazon:before { margin: 13px 0 0 12px; }
.amazon:before { content: "\61"; top: 0; opacity:1; }
.amazon:hover:before { top: 30px; opacity: 0; }
.amazon:hover { background-color: #2f3842  !important; }
.social-icons.color .amazon,
.social-icons.fixed .amazon:hover { background-color: #2f3842 ; border-color: #2f3842  ;}

.steam i, .steam:before { margin: 13px 0 0 11px; }
.steam:before { content: "\62"; top: 0; opacity:1; }
.steam:hover:before { top: 30px; opacity: 0; }
.steam:hover { background-color: #383838 !important ; }
.social-icons.color .steam,
.social-icons.fixed .steam:hover { background-color: #383838 ; border-color:  #383838 ;}

.dropbox i, .dropbox:before { margin: 13px 0 0 13px; }
.dropbox:before { content: "\64"; top: 0; opacity:1; }
.dropbox:hover:before { top: 30px; opacity: 0; }
.dropbox:hover { background-color: #2c92dd !important ; }
.social-icons.color .dropbox,
.social-icons.fixed .dropbox:hover { background-color: #2c92dd ;border-color:#2c92dd  ; }

.github i, .github:before { margin: 13px 0 0 13px; }
.github:before { content: "\67"; top: 0; opacity:1; }
.github:hover:before { top: 30px; opacity: 0; }
.github:hover { background-color: #5c7381  !important; }
.social-icons.color .github,
.social-icons.fixed .github:hover { background-color: #5c7381 ;border-color: #5c7381 ; }

.lastfm i, .lastfm:before { margin: 13px 0 0 11px; }
.lastfm:before { content: "\6c"; top: 0; opacity:1; }
.lastfm:hover:before { top: 30px; opacity: 0; }
.lastfm:hover { background-color: #d21309 !important ; }
.social-icons.color .lastfm,
.social-icons.fixed .lastfm:hover { background-color: #d21309 ;border-color: #d21309 ; }

.tumblr i, .tumblr:before { margin: 13px 0 0 15px; }
.tumblr:before { content: "\74"; top: 0; opacity:1; }
.tumblr:hover:before { top: 30px; opacity: 0; }
.tumblr:hover { background-color: #3d658d !important ; }
.social-icons.color .tumblr,
.social-icons.fixed .tumblr:hover { background-color: #3d658d ; border-color: #3d658d ; }

.wordpress i, .wordpress:before { margin: 13px 0 0 14px; }
.wordpress:before { content: "\77"; top: 0; opacity:1; }
.wordpress:hover:before { top: 30px; opacity: 0; }
.wordpress:hover { background-color: #383838  !important; }
.social-icons.color .wordpress,
.social-icons.fixed .wordpress:hover { background-color: #383838 ; border-color: #383838 ;}

.instagram i, .instagram:before { margin: 13px 0 0 13px; }
.instagram:before { content: "\f31f"; top: 0; opacity:1; }
.instagram:hover:before { top: 30px; opacity: 0; }
.instagram:hover { background-color: #3f6f94  !important; }
.social-icons.color .instagram,
.social-icons.fixed .instagram:hover { background-color: #3f6f94 ;border-color:#3f6f94  ; }

/* Web Font */
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot');
  src: url('../fonts/fontello.eot') format('embedded-opentype'),
	   url('../fonts/fontello.woff') format('woff'),
	   url('../fonts/fontello.ttf') format('truetype'),
	   url('../fonts/fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.social-icons li i {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 16px;
	font-size: 16px;
	width: auto;
}

.icon-delicious:before { content: '\23'; } /* '#' */
.icon-paypal:before { content: '\24'; } /* '$' */
.icon-gplus:before { content: '\f0d5'; } /* '+' */
.icon-stumbleupon:before { content: '\2f'; } /* '/' */
.icon-fivehundredpx:before { content: '\30'; } /* '0' */
.icon-pinterest:before { content: '\31'; } /* '1' */
.icon-forrst:before { content: '\3a'; } /* ':' */
.icon-digg:before { content: '\3b'; } /* ';' */
.icon-spotify:before { content: '\3d'; } /* '=' */
.icon-reddit:before { content: '\3e'; } /* '&gt;' */
.icon-appstore:before { content: '\41'; } /* 'A' */
.icon-blogger:before { content: '\42'; } /* 'B' */
.icon-dribbble:before { content: '\44'; } /* 'D' */
.icon-evernote:before { content: '\45'; } /* 'E' */
.icon-flickr:before { content: '\46'; } /* 'F' */
.icon-linkedin:before { content: '\4c'; } /* 'L' */
.icon-rss:before { content: '\52'; } /* 'R' */
.icon-twitter:before { content: '\54'; } /* 'T' */
.icon-youtube:before { content: '\55'; } /* 'U' */
.icon-vimeo:before { content: '\56'; } /* 'V' */
.icon-xing:before { content: '\58'; } /* 'X' */
.icon-yahoo:before { content: '\59'; } /* 'Y' */
.icon-amazon:before { content: '\61'; } /* 'a' */
.icon-steam:before { content: '\62'; } /* 'b' */
.icon-dropbox:before { content: '\64'; } /* 'd' */
.icon-facebook:before { content: '\66'; } /* 'f' */
.icon-github:before { content: '\67'; } /* 'g' */
.icon-lastfm:before { content: '\6c'; } /* 'l' */
.icon-tumblr:before { content: '\74'; } /* 't' */
.icon-wordpress:before { content: '\77'; } /* 'w' */
.icon-linkedin-rect:before { content: '\f31b'; } /* '?' */
.icon-instagram:before { content: '\f31f'; } 

/* Social Icons styles for topbar
------------------------------------- */
.agent ul.social-icons,
#footer ul.social-icons,
.listing-share ul.social-icons,
#top-bar ul.social-icons {
	margin: 0;
	padding: 0;
}

.listing-share .social-icons li a,
.agent .social-icons li a,
#footer .social-icons li a,
#top-bar .social-icons li a {
	width: 45px;
	height: 45px;
	display: inline-block;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	transform:scale(1);
	margin-right: 0;
}

.listing-share .social-icons li,
.agent .social-icons li,
#footer .social-icons li,
#top-bar .social-icons li {
	border-radius: 0;
	transform:scale(1);
	-webkit-transform:scale(1);
	-webkit-filter: blur(radius);
}

.listing-share .social-icons li a i,
.listing-share .social-icons li a:before,
.agent .social-icons li a i,
.agent .social-icons li a:before,
#footer .social-icons li a i,
#footer .social-icons li a:before,
#top-bar .social-icons li a i,
#top-bar .social-icons li a:before {
	transform:scale(1.1) translateY(calc(-50% - 2px));
	-moz-transform:scale(1.1) translateY(calc(-50% - 1px));
	-ms-transform:scale(1.1) translateY(-50%);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	margin-top: 55%;
}

.listing-share .social-icons li a.twitter i,
.listing-share .social-icons li a.twitter:before,
.agent .social-icons li a.twitter i,
.agent .social-icons li a.twitter:before,
#footer .social-icons li a.twitter i,
#footer .social-icons li a.twitter:before,
#top-bar .social-icons li a.twitter i,
#top-bar .social-icons li a.twitter:before { transform:scale(1.1) translateY(calc(-50% - 1px)); }

/* Header Icon Styles */
#top-bar .social-icons { float: right; }

.agent .social-icons li,
#footer .social-icons li,
#top-bar .social-icons li {
	margin: 0;
	padding: 0;
	float: left;
	line-height: 0;
}

#top-bar .social-icons li a:before,
#top-bar .social-icons li a i { font-size: 14px; color: #fff; }
#top-bar .social-icons li .twitter:before,
#top-bar .social-icons li .twitter i:before { font-size: 12px; }

#top-bar .social-icons li a:hover {
	background: #fff !important;
	border-color: transparent;
}

#top-bar .social-icons li a:hover i {
	color: #66676b;
}

/* Social Icons styles for footer
------------------------------------- */
.listing-share .social-icons li a,
.agent .social-icons li a,
#footer .social-icons li a {
	width: 38px;
	height: 40px;
	background-color: transparent;
}

.agent .social-icons,
#footer .social-icons {
	position: relative;
	left: -13px;
}

.agent .social-icons li,
#footer .social-icons li {
	margin: 0;
	padding: 0;
	float: left;
	line-height: 0;
}

.listing-share .social-icons li a:before,
.listing-share .social-icons li a i,
.agent .social-icons li a:before,
.agent .social-icons li a i,
#footer .social-icons li a:before,
#footer .social-icons li a i { font-size: 15px; color: #a0a0a0; }

.listing-share .social-icons li .twitter:before,
.listing-share .social-icons li .twitter i:before,
.listing-share .social-icons li .vimeo:before,
.listing-share .social-icons li .vimeo i:before,
.agent .social-icons li .twitter:before,
.agent .social-icons li .twitter i:before,
.agent .social-icons li .vimeo:before,
.agent .social-icons li .vimeo i:before,
#footer .social-icons li .twitter:before,
#footer .social-icons li .twitter i:before,
#footer .social-icons li .vimeo:before,
#footer .social-icons li .vimeo i:before { font-size: 13px; }

.listing-share .social-icons li a:hover,
.agent .social-icons li a:hover,
#footer .social-icons li a:hover {
	background: transparent !important;
	border-color: transparent;
}

.listing-share .social-icons li a:hover i,
.agent .social-icons li a:hover i,
#footer .social-icons li a:hover i {
	color: #66676b;
}

/* Custom Checkboxes
------------------------------------- */
.checkboxes {
	list-style: none;
	padding: 0;
}

.checkboxes.in-row label { margin-top: 9px;}
.checkboxes.one-in-row label { margin-top: 9px; width: 100%; }

.checkboxes li { padding: 4px 0; }
.checkboxes li:last-child { margin-bottom: -8px; }

.checkboxes label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 28px;
	margin-right: 20px;
	margin-bottom: 0;
	line-height: 24px;
	font-size: 16px;
}

.checkboxes label span {
	color: #909090;
}

.checkboxes input[type=checkbox] { display: none; }

.checkboxes label:before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 3px;
	background-color: #fff;
	border: 2px solid #d0d0d0;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 0.25s;
	font-family: "FontAwesome";
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 15px;
}

.checkboxes input[type=checkbox]:checked + label:before {
	content: "\f00c";
	background-color: #66676b;
	border: 2px solid #66676b;
}

/* Listing Item Layout Style
------------------------------------- */
.listing-item-container.list-layout {
	background: transparent;
	background-color: #f9f9f9;
	margin-bottom: 25px;
}

.listing-item-container.list-layout:hover {
	transform: translate3d(6px,0,0);
}

.listing-item-container.list-layout .listing-item {
	display: flex;
	background-color: transparent;
	height: 220px;
}

.listing-item-container.list-layout .listing-item:before {
	display: none;
}

.listing-item-container.list-layout .listing-item img {
	border-radius: 0;
}

.listing-item-container.list-layout .listing-item-content {
	flex: 5;
	position: relative;
	bottom: 0;
	left: 0;
	padding: 0;
	width: 100%;
	z-index: 50;
	box-sizing: border-box;
}

.listing-item-container.list-layout .listing-item-image {
	min-height: 200px;
	flex: 2;
	height: 100%;
	overflow: hidden;
	border-radius: 4px 0 0 4px;
	position: relative;
}

.listing-item-container.list-layout .listing-item-image:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	display: block;
	background-color: #272729;
	opacity: 0.2;
}

.listing-item-container.list-layout span.like-icon {
	bottom: 50%;
	transform: translateY(50%);
	background-color: #eee;
	color: #9d9d9d;
	right: 35px;
}

.listing-item-container.list-layout span.like-icon.liked,
.listing-item-container.list-layout span.like-icon:hover {
	background-color: #f3103c;
	color: #fff;
}

.listing-item-container.list-layout .listing-item-inner {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 35px;
	padding-right: 120px;
}

.listing-item-container.list-layout .listing-item-inner h3 { color: #333; }
.listing-item-container.list-layout .listing-item-inner span { color: #808080; }

.listing-item-container.list-layout .star-rating { padding: 8px 0 0 0; }
.listing-item-container.list-layout .numerical-rating { margin: 10px 0 5px 0; display: block; }

.listing-item-container.list-layout .listing-item-details {
    position: absolute;
    bottom: 25px;
   	right: 35px;
   	left: auto;
   	top: auto;
    padding: 0;
    width: auto;
    z-index: 50;
    color: #888;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
}

/* Listing Item
------------------------------------- */

.listing-item-container {
/*	background: linear-gradient(to top, #f4f4f4 0%, #f9f9f9 10%); */
	background-color: #f6f6f6;
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transform: translate3d(0,0,0);
	transition: transform 0.3s;
	margin-bottom: 30px;
}

section.fullwidth .listing-item-container,
.fs-content .listing-item-container {
	box-shadow: 0 0 8px 0 rgba(0,0,0,0.08);
	background-color: #fff;
	background: #fff;
}

section.fullwidth .listing-item-container.list-layout,
.fs-content .listing-item-container.list-layout {
	box-shadow: none;
}

.listing-item-container:hover { transform: translate3d(0,-6px,0); }

.listing-item {
	background: #ccc;
	border-radius: 4px 4px 0 0;
	height: 100%;
	display: block;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	height: 265px;
	z-index: 100;
	cursor: pointer;
}

.listing-item img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	border-radius: 4px 4px 0 0;
}

.listing-item:before {
	content: "";
	top: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9;
	background: linear-gradient(to top, rgba(35,35,37,0.9) 0%, rgba(35,35,37,0.45) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
	background-color: rgba(35,35,37,0.2);
	border-radius: 4px 4px 0 0;
	opacity: 1;
}

.listing-item-content {
	position: absolute;
	bottom: 28px;
	left: 0;
	padding: 0 32px;
	padding-right: 90px;
	width: 100%;
	z-index: 50;
	box-sizing: border-box;
}

.listing-item-content h3 {
	color: #fff;
	font-size: 20px;
	bottom: -1px;
	position: relative;
	font-weight: 500;
	margin: 0;
	line-height: 31px;
}

.listing-item-content span {
	font-size: 16px;
	font-weight: 300;
	display: inline-block;
	color: rgba(255,255,255,0.7);
}

.listing-item-container.list-layout span.tag,
.listing-item-content span.tag {
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 2.5px;
	font-weight: 60;
	background: #66676b;
	border-radius: 50px;
	padding: 4px 16px;
	line-height: 20px;
	color: #fff;
	font-weight: 400;
	margin-bottom: 9px;
}

.listing-item-container.list-layout span.tag {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: #66676b;
	margin: 0;
	z-index: 10;
    line-height: 14px;
    padding: 7px 16px;
    margin-right: 20px;
    text-align: center;
}

/* Listing item details */
.listing-item-details {
	position: absolute;
	top: 24px;
	left: 0;
	padding: 0 32px;
	width: 100%;
	z-index: 50;
	color: #fff;
	box-sizing: border-box;
	font-weight: 500;
	font-size: 15px;
}

.listing-item-details ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.listing-item-details ul li {
	display: inline-block;
	margin-right: 6px;
	line-height: 20px;
}

.listing-item-details ul li i {
	display: inline-block;
	margin: 0 3px 0 0;
	position: relative;
	top: 0px;
	font-size: 14px;
}

/* Listing Item Alternative Version*/
.listing-item-container.compact .listing-item { border-radius: 4px; }
.listing-item-container.compact .star-rating { padding: 5px 0 0 0; }

.listing-item-container.compact .rating-counter {
	color: rgba(255,255,255,0.7);
}

.listing-item-container.compact .star-rating .star.empty:before,
.listing-item-container.compact .star-rating .star.half:before { color: rgba(255,255,255,0.3); }

.listing-item-container.compact .listing-item-content span.tag { background-color: #66676b; }

/* Number rating*/
.numerical-rating {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
	text-align: center;
	line-height: 26px;
	height: 26px;
	width: 44px;
	display: inline-block;
	font-family: "Open Sans";
	position: relative;
	border-radius: 50px;
	letter-spacing: -0.5px;
	background-color: rgba(255,255,255,0.2);
	margin: 15px 32px;
}

.compact .numerical-rating { margin: 0 0 8px 0; }

.numerical-rating:before {	content: attr(data-rating); }

.numerical-rating.high { background-color: #64bc36; }
.numerical-rating.mid { background-color: #c0c52a; }
.numerical-rating.low { background-color: #ee3535; }

.infoBox .numerical-rating .rating-counter,
.numerical-rating .rating-counter {
	position: absolute;
	top: 0;
	left: 14px;
	width: auto;
	display: inline-block;
	font-weight: 400;
	font-size: 15px;
	width: 150px;
	color: #909090;
}

.infoBox .numerical-rating .rating-counter { left: 12px; }

.infoBox .numerical-rating {
	margin: 0;
	font-family: "Open Sans";
}

/* Star Rating */
.star-rating { display: block; font-size: 17px; }

.listing-item-container .star-rating {
	padding: 15px 32px;
}

.star-rating .star {
	display: inline-block;
	margin: 0;
	padding: 0;
	float: left;
	margin-right: 4px;
	position: relative;
}

.rating-counter {
	color: #909090;
	padding-left: 5px;
	display: inline-block;
	font-size: 15px;
}

.star-rating .rating-counter {
	top: -1px;
	position: relative;
}

.infoBox .star-rating .rating-counter {
	font-size: 15px;
	top: -2px;
}

.star-rating .star.half:after,
.star-rating .star:before {
	font-family: "FontAwesome";
	content: "\f005";
	display: block;
	color: #ffc600;
}

.star-rating .star.empty:before { color: #ddd; }

.rating:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.star-rating .star.half:before { color: #ddd; }
.star-rating .star.half:after {
	color: #ffc600;
	position: absolute;
	top:0;
	width: 50%;
	display: block;
	height: 100%;
	overflow: hidden;
}

/* Like Icon */
span.like-icon {
	color: #fff;
	font-size: 19px;
	position: absolute;
	z-index: 101;
	right: 30px;
	bottom: 30px;
	cursor: normal;
	background-color: rgba(24,24,24,0.4);
	display: block;
	height: 44px;
	width: 44px;
	border-radius: 50%;
	transition: all 0.4s;
}

.like-icon:before,
.like-icon:after {
	transition: opacity 0.3s, transform 0.4s cubic-bezier(.0,-.41,.19,2.5);
	font-family: "FontAwesome";
	position: absolute;
	right: 0;
	left: 0;
	text-align: center;
	top: 9px;
}

.like-icon:before {
	content: "\f08a";
	transform: scale(0.95);
}

.like-icon:after {
	content: "\f004";
	opacity: 0;
	transform: scale(0.5);
}

.like-icon.liked:after {
	opacity: 1;
	transform: scale(0.95);
}

.like-icon:hover,
.like-icon.liked {
	background-color: #f3103c;
}

.like-icon.liked:before{
	opacity: 0;
}

/* Badges */
.listing-item { overflow: hidden; }

.listing-badge {
	background-color: #333;
	float: left;
	position: absolute;
	transform: rotate(45deg);
	right: -64px;
	top: 22px;
	text-align: center;
	width: 200px;
	font-size: 12.5px;
	margin: 0;
	z-index: 999;
	color: #fff;
	font-weight: 500;
	line-height: 28px;
}

.listing-badge.now-open {
	background-color: #54ba1d;
}

.listing-badge.now-closed {
	background-color: #e91721;
}

/* Small Category Boxes
------------------------------------- */
.categories-boxes-container {
	width: calc(100% + 20px);
	left: -20px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.category-small-box {
	float: left;
	background-color: #f2f2f2;
	border-radius: 4px;
	margin: 20px 0 0 20px;
	padding: 20px 16px;
	text-align: center;
	color: #777;
	transition: 0.4s;
	transform: scale(1);
	vertical-align: top;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Hover Animation */
.category-small-box:hover {
	background-color: #66676b;
	color: #fff;
/* 	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05); */
	transform: translateY(-6px);
}

.category-small-box h4 {
    font-size: 16px;
    color: #333;
    transition: 0.4s;
    line-height: 22px;
    margin-top: 9px;
    margin-bottom: 7px;
}

.category-small-box i {
	font-size: 38px;
	height: 40px;
	display: inline-block;
	margin-top: 20px;
}

.category-small-box:hover h4 { color: #fff; }

/* Media Queries For Small Category Boxes */
@media (max-width: 768px) {
	.category-small-box { width: calc(100% * (1/2) - 21px); }
}
@media (min-width: 768px) {
	.category-small-box { width: calc(100% * (1/3) - 21px); }
}
@media (min-width: 992px) {
	.category-small-box { width: calc(100% * (1/3) - 21px); }
}
@media (min-width: 1240px) {
	.category-small-box { width: calc(100% * (1/6) - 21px); }
}

/* Colored Category Boxes */
.category-small-box {  background-color: #f8f8f8; }

.category-small-box h4 {
    color: #777;
    transition: 0.3s;
    font-weight: 500;
}

.category-small-box i {
    color: #66676b;
    transition: 0.3s;
}

.category-small-box:hover h4,
.category-small-box:hover i {
    color: #fff;
    transition: 0.3s;
}

.category-small-box h4 { display: block; }
.category-small-box .category-box-counter {
    font-size: 13px;
    font-weight: 400;
    color: #909090;
    border-radius: 50px;
    background-color: rgba(0,0,0,0.04);
    display: block;
    width: 40px;
    text-align: center;
    margin: 0 auto;
    left: auto;
    right: auto;
    margin-bottom: 12px;
    transition: 0.4s;
    padding: 2px 0;
    line-height: 22px;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.category-small-box:hover .category-box-counter { 
    color: #fff;  
    background-color: rgba(0,0,0,0.15);
}

/* Titlebar
------------------------------------- */
#titlebar {
	background-color: #f8f8f8;
	position: relative;
	padding: 70px 0;
	margin-bottom: 65px;
}

#titlebar.gradient {
	background: linear-gradient(to bottom, #f7f7f7 0%, rgba(255,255,255,0.5));
	padding-bottom: 10px;
}

#titlebar span a,
#titlebar span {
	font-size: 20px;
	color: #888;
	margin-bottom: 3px;
	margin-top: 6px;
	display: inline-block;
}

#titlebar #breadcrumbs span {
	font-size: 13px
}

#titlebar h1,
#titlebar h2 {
	font-size: 32px;
	line-height: 40px;
	margin: 1px 0 3px 0;
}

/* Breadcrumbs */
#breadcrumbs {
	position: absolute;
	right: 15px;
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	color: #888;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

#breadcrumbs ul { margin: 0; }

#breadcrumbs ul li a {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	color: #888;
}

#breadcrumbs ul li a:hover { color: #666 }

#breadcrumbs ul li {
	display: inline-block;
	list-style: none;
	margin: 0 0 0 10px;
}

#breadcrumbs ul li:first-child:before { display: none; }

#breadcrumbs ul li:before {
	content: "\f105";
	font-family: "FontAwesome";
	color: #a0a0a0;
	font-size: 14px;
	margin-right: 15px;
}

#titlebar.photo-bg #breadcrumbs ul li,
#titlebar.photo-bg #breadcrumbs ul li a,
#titlebar.photo-bg #breadcrumbs ul li:before { color: #fff; }

/* Parallax Titlebar
------------------------------------- */
.parallax #titlebar {
	background-color: transparent;
	position: relative;
	z-index: 999;
	padding: 90px 0;
}

.parallax #titlebar h1,
.parallax #titlebar h2,
.parallax #titlebar #breadcrumbs ul li,
.parallax #titlebar #breadcrumbs ul li a,
.parallax #titlebar #breadcrumbs ul li::before {color: #fff}

.parallax #titlebar span a,
.parallax #titlebar span { color: rgba(255,255,255,0.7); }

/* 404 Error Page
----------------------------------- */
#not-found { margin: 40px 0 80px 0; }

#not-found.center { text-align: center; }

#not-found h2 {
	text-align: center;
	font-size: 220px;
	line-height: 210px;
	font-weight: 500;
	letter-spacing: -8px;
}

#not-found p {
	text-align: center;
	font-size: 30px;
	line-height: 48px;
	display: inline-block;
	margin-top: 10px;
	color: #999;
}

#not-found i {
	color: #e0e0e0;
	font-size: 190px;
	top: 16px;
	position: relative;
}

@media (max-width: 767px) {
	#not-found h2 {
		font-size: 110px;
		line-height: 110px;
	}

	#not-found p {
		font-size: 20px;
		line-height: 38px;
	}

	#not-found i {
		font-size: 120px;
		top: 16px;
	}
}

/*  04. Dashboard
---------------------------------------------------------------------- */
#dashboard {
	background-color: #f7f7f7;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Flexbox Adjustments */
.dashboard-content { flex: 1 1 0%; }
.dashboard-nav { flex: 0 0 260px; }

.dashboard-content {
	padding: 40px 0 0 45px;
	position: relative;
	z-index: 10;
	min-width: 0;
	box-sizing: border-box;
}

.dashboard-nav,
.dashboard #logo {
	min-width: 260px;
	max-width: 260px;
}

.dashboard-nav {
	position: relative;
	margin: 40px 0 40px 0;
	overflow: hidden;
}

/* Navigation Scrolling */
.dashboard-nav-inner {
	height: 100%;
	width: 277px;
	overflow-y: scroll;
	position: relative;
	display: block;
	padding: 10px 0 25px 0;
}

.messages-container-inner .messages-inbox ul::-webkit-scrollbar { width: 17px; }

.dashboard-nav-inner {
    max-height: 900px;
    width: calc(100% + 17px);
    overflow-y: scroll;
    position: relative;
    display: block;
    padding: 10px 0 25px 0;
}

@media (max-width: 991px) {
	.dashboard-nav-inner {
	    max-height: 900px;
	    width: calc(100% + 18px);
	}
}
/* Navigation Scrolling - End */

header.fullwidth.dashboard .container { padding-left: 285px; }

/* Dashboard Logo */
.dashboard #logo {
	display: block;
	background-color: #333;
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	margin: 0;
}

.dashboard #logo a {
	margin-left: 33px;
	display: inline-block;
	height: 100%;
}

.dashboard #logo a img {
	top: 50%;
	position: relative;
	transform: translate3d(0,-50%,0);
}

/* Dashboard Footer */
#dashboard .copyrights {
	padding: 40px 0;
	margin: 0;
	display: block;
	text-align: left;
	border: none;
}

.dashboard #logo a { display: none; }
.dashboard #logo a.dashboard-logo { display: inline-block;}

/* Dashboard Navigation
------------------------------------- */
.dashboard-nav {
	background-color: #2a2a2a;
	display: block;
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.12);
	z-index: 11;
}

a.dashboard-responsive-nav-trigger { display: none; }

.dashboard-nav ul {
	list-style: none;
	padding: 0;
	margin: 15px 0 0 0;
}

.dashboard-nav ul:before {
	content: attr(data-submenu-title);
	padding: 0 30px;
	margin-bottom: 5px;
	display: block;
	color: #999;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 1px;
}

/* 1st Level */
.dashboard-nav ul li {
	color: #eee;
	display: block;
	border-left: 3px solid transparent;
	transition: 0.3s;
	line-height: 24px;
	font-size: 15px;
}

.dashboard-nav ul li a {
	color: #eee;
	display: block;
	padding: 11px 27px;
	transition: 0.3s;
	cursor: pointer;
}

.dashboard-nav ul li a i {
	padding-right: 8px;
	width: 20px;
}

.dashboard-nav ul li a:hover { color: #fff; }

/* Nav Tag */
.dashboard-nav ul li span.nav-tag {
	background-color: rgba(255,255,255,0.2);
	font-family: "Open Sans";
	font-weight: 600;
	display: inline-block;
	font-size: 11px;
	line-height: 20px;
	color: #fff;
	padding: 0;
	padding: 0 7px;
	box-sizing: border-box;
	text-align: center;
	min-width: 20px;
	height: 20px;
	letter-spacing: -0.5px;
	text-align: center;
	border-radius: 50px;
	margin-left: 4px;
}

.dashboard-nav ul li span.nav-tag.messages {top: -2px; position: relative; }
.dashboard-nav ul li span.nav-tag.messages { background-color: #64bc36; }
.dashboard-nav ul li span.nav-tag.yellow { background-color: #FFC107; }
#dashboard .dashboard-nav ul li span.nav-tag.yellow { color: #1c1d21; }
.dashboard-nav ul li span.nav-tag.green { background-color: #28A745; }
.dashboard-nav ul li span.nav-tag.orange { background-color: #FD7E14; }
.dashboard-nav ul li span.nav-tag.pink { background-color: #DC3545; }
.dashboard-nav ul li span.nav-tag.gray { background-color: #6C757D; }

/* Dropdown Styles */
.dashboard-nav ul li ul {
	padding: 0;
	margin: 0;
	visibility: hidden;
	max-height: 0;
	opacity: 0;
	line-height: 0;
	transition: 0.2s;
}

.dashboard-nav ul li.active ul {
	visibility: visible;
	padding: 0 0 15px 0;
	line-height: 24px;
	opacity: 1;
	max-height: 300px;
}

.dashboard-nav ul li ul li {
	color: #eee;
	background-color: transparent;
	border: none;
	padding-left: 54px;
	position: relative;
	margin: 0;
}

.dashboard-nav ul li ul li a { padding: 7px 0; }

.dashboard-nav ul li ul li:hover {
	color: #fff;
	border: none;
	background-color: transparent;
}

/* Indicator Arrow */
.dashboard-nav ul li a:after {
	font-family: "FontAwesome";
	content: '\f107';
	right: 27px;
	font-size: 16px;
	position: absolute;
	transition: 0.2s;
	color: rgba(255,255,255,0.5);
}

.dashboard-nav ul li.active a:after { transform: rotate(180deg); }

.dashboard-nav ul li ul:before,
.dashboard-nav ul li a:only-child:after { content: ''; display: none; }

/* Hover State */
.dashboard-nav ul li ul li:hover a { padding-left: 4px; }

.dashboard-nav ul li.active,
.dashboard-nav ul li:hover {
	color: #fff;
	border-color: #66676b;
	background-color: rgba(255,255,255,0.05);
}

/* Dashboard Titlebar
------------------------------------- */
#dashboard #titlebar {
	padding: 0;
	margin: 0 0 40px 0;
	display: block;
	background-color: transparent;
	background: transparent;
}

#dashboard #titlebar h2 {
	font-size: 30px;
	line-height: 38px;
}

/* Dashboard Stats Boxes
------------------------------------- */
.dashboard-stat {
	display: inline-block;
	padding: 0;
	height: 160px;
	background-color: #444;
	color: #fff;
	border-radius: 4px;
	width: 100%;
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
	transition: 0.3s;
	cursor: default;
}

.dashboard-stat:hover { transform: translateY(-4px); }

.dashboard-stat-content {
	position: absolute;
	left: 32px;
	top: 50%;
	width: 45%;
	transform: translateY(-50%);
}

.dashboard-stat-content h4 {
	font-size: 42px;
	font-weight: 600;
	padding: 0;
	margin: 0;
	color: #fff;
	font-family: "Open Sans";
	letter-spacing: -1px;
}

.dashboard-stat-content span {
	font-size: 18px;
	margin-top: 4px;
	line-height: 24px;
	font-weight: 300;
	display: inline-block;
}

.dashboard-stat-icon {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-40%);
	font-size: 80px;
	opacity: 0.3;
}

/* Colors */
.dashboard-stat.color-1 {
	background: linear-gradient(to left, rgba(255,255,255,0) 25%, rgba(255,255,255,0.2));
	background-color: #64bc36;
}

.dashboard-stat.color-2 {
	background: linear-gradient(to left, rgba(255,255,255,0) 25%, rgba(255,255,255,0.1));
	background-color: #363841;
}

.dashboard-stat.color-3 {
	background: linear-gradient(to left, rgba(255,255,255,0) 25%, rgba(255,255,255,0.3));
	background-color: #ffae00;
}

.dashboard-stat.color-4 {
	background: linear-gradient(to left, rgba(255,255,255,0) 25%, rgba(255,255,255,0.1));
	background-color: #f3103c;
}

/* Dashboard Pagination
------------------------------------- */
/* Restyled to match the Recent Activities pagination (.el-ra-*, further
   down this file) — same boxed pill buttons + solid-black active state —
   so every dashboard list (Reviews, Listings, Messages) shares one
   pagination look instead of the theme's plain circle-on-hover default
   this component used to render. */
#dashboard .pagination-container .pagination {
	margin-top: 0;
	padding-top: 20px;
	border-top: 1px solid #ececef;
}
#dashboard .pagination-container .pagination ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}
#dashboard .pagination-container .pagination ul li a,
#dashboard .pagination-next-prev ul li a {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 9px;
	border: 1px solid #ececef;
	background-color: #fff;
	color: #6b6f7d;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 34px;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#dashboard .pagination-container .pagination ul li a i { line-height: 1; }
#dashboard .pagination ul li a.current-page,
#dashboard .pagination .current {
	background-color: #1c1d21;
	border-color: #1c1d21;
	color: #fff;
}
#dashboard .pagination ul li a:hover,
#dashboard .pagination-next-prev ul li a:hover {
	background-color: #fff;
	border-color: #f0104a;
	color: #f0104a;
}
#dashboard .pagination ul li a.current-page:hover,
#dashboard .pagination .current:hover {
	background-color: #1c1d21;
	border-color: #1c1d21;
	color: #fff;
}
/* the literal "..." truncation marker is not a real page — keep it
   unboxed plain text, same convention as the Recent Activities pager
   (which has no ellipsis state to begin with since it never shows more
   than a handful of page numbers). */
#dashboard .pagination-container .pagination ul li a.pagination-ellipsis {
	border-color: transparent;
	background: transparent;
	color: #a0a0a0;
	cursor: default;
	font-weight: 700;
}
#dashboard .pagination-container .pagination ul li a.pagination-ellipsis:hover {
	border-color: transparent;
	background: transparent;
	color: #a0a0a0;
}

/* Dashboard Messages
------------------------------------- */
.messages-container {
	margin: 0;
	box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
	border-radius: 4px;
	background-color: #fff;
}

.messages-headline {
	font-size: 16px;
	margin: 0;
	padding: 22px 30px;
	color: #333;
	background-color: #fff;
	display: block;
	border-bottom: 1px solid #eaeaea;
	border-radius: 4px 4px 0 0;
	position: relative;
}

.messages-headline h4 {
	font-size: 16px;
	color: #333;
	padding: 0;
	margin: 0;
	font-weight: 600;
	display: inline-block;
}

.message-action {
	border-radius: 50px;
	font-size: 13px;
	color: #666;
	font-weight: 500;
	display: inline-block;
	transition: 0.3s;
	color: #666;
	padding: 0;
	float: right;
}

.message-action:hover { color: #ee3535; }

/* List */
.messages-inbox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.message-avatar img {
	display: inline-block;
	width: 54px;
	height: 54px;
	border-radius: 50%;
}

.messages-inbox ul li a {
	position: relative;
	display: block;
	padding: 30px;
}

.messages-inbox ul li { border-bottom: 1px solid #eaeaea; transition: 0.2s; }
.messages-inbox ul li:last-child { border-bottom: none; }

.messages-inbox ul li.unread,
.messages-inbox ul li:hover { background-color: #fbfbfb; }

.messages-inbox ul li.active-message { background-color: #fafafa; }

.messages-inbox .message-avatar {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
}

.messages-inbox .message-by {
	margin-left: 85px;
	font-size: 15px;
	color: #666;
}

.messages-inbox .message-by p {
	margin: 0;
	padding: 0;
	line-height: 27px;
	font-size: 15px;
}

.message-by-headline h5,
.message-by-headline span {
	display: inline-block;
}

.message-by-headline span {
	float: right;
	color: #888;
	font-size: 14px;
}

.message-by-headline h5 {
	font-weight: 600;
	color: #333;
	margin: 0 0 7px 0;
	padding: 0;
}

.message-by-headline:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.message-by h5 i {
	background-color: #64bc36;
	border-radius: 50px;
	line-height: 20px;
	font-size: 12px;
	color: #fff;
	font-style: normal;
	padding: 3px 8px;
	margin-left: 3px;
}

/* Single Message */
.messages-container-inner {
	display: flex;
}

.messages-container-inner .messages-inbox,
.messages-container-inner .message-content {
	flex: 1;
}

/*  Scrollbar Hide */
.messages-container-inner .messages-inbox { overflow: hidden; }

.messages-container-inner .messages-inbox ul {
    max-height: 800px;
	overflow-y: scroll;
	width: 357px;
}

.messages-container-inner .messages-inbox ul::-webkit-scrollbar { width: 17px; }
/*  Scrollbar Hide - End */

.messages-container-inner .message-content { padding: 30px; }

.messages-container-inner .messages-inbox {
	max-width: 340px;
	border-right: 1px solid #eaeaea;
}

.messages-container-inner .messages-inbox ul li a { padding: 25px; }

.messages-container-inner .messages-inbox .message-by p {
	height: 26px;
	max-width: 205px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: 14px;
	color: #888;
}

.messages-container-inner .message-avatar img {
	width: 40px;
	height: 40px;
}

.messages-container-inner .messages-inbox .message-avatar { left: 25px; }
.messages-container-inner .messages-inbox .message-by { margin-left: 60px }

.messages-container-inner .message-by-headline h5 {
	font-size: 14px;
	margin-bottom: 3px;
	max-width: 160px;
	line-height: 23px;
}

.messages-container-inner .message-by-headline span {
	font-size: 13px;
	position: absolute;
	top: 25px;
	right: 25px
}

/* Message Bubbles */
.message-bubble {
	display: block;
	position: relative;
	margin-bottom: 25px;
}

.message-bubble .message-avatar {
	position: absolute;
	left: 0;
	top: 0;
}

.message-bubble .message-avatar img {
	width: 50px;
	height: 50px;
}

.message-bubble .message-text {
	margin-left: 70px;
	background-color: #f6f6f6;
	border-radius: 4px;
	padding: 20px;
	position: relative;
}

.message-bubble .message-text p {
	font-size: 15px;
	padding: 0;
	margin: 0;
	line-height: 27px;
}

.message-bubble .message-text:before {
	position: absolute;
	top: 12px;
	left: -9px;
	content: "\f0d9";
	font-family: "FontAwesome";
	font-size: 31px;
	color: #f6f6f6;
}

/* Message Bubble "me" */
.message-bubble.me .message-avatar {
	left: auto;
	right: 0;
}

.message-bubble.me .message-text {
	margin-left: 0;
	margin-right: 70px;
}

.message-bubble.me .message-text:before {
	left: auto;
	right: -11px;
	content: "\f0da";
}

/* Reply */
.message-reply {
	display: block;
	margin-top: 15px;
}

.message-reply textarea {
	max-width: 100%;
	width: 100%;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	padding: 15px 20px;
}

.message-reply button { border-radius: 4px; margin-top: 5px; }

/* Dashboard List Box
------------------------------------- */
.dashboard-list-box {
	margin: 30px 0 0 0;
	box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
	border-radius: 4px;
}

/* Button */
.dashboard-list-box .button {
	padding: 6px 15px;
	line-height: 20px;
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.dashboard-list-box .button.gray:before { display: none; }
.dashboard-list-box .button.gray {
	background-color: #e9e9e9;
	color: #666;
}

.dashboard-list-box .button.gray:hover {
	background-color: #66676b;
	color: #fff;
}

.dashboard-list-box h4 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	padding: 25px 30px;
	color: #333;
	background-color: #fff;
	display: block;
	border-bottom: 1px solid #eaeaea;
	border-radius: 4px 4px 0 0;
}

.dashboard-list-box h4.gray {
	background-color: #fbfbfb
}

.dashboard-list-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: #fff;
	border-radius: 0 0 4px 4px;
}

.dashboard-list-box ul li {
	padding: 23px 30px;
	border-bottom: 1px solid #eaeaea;
	transition: 0.3s;
	position: relative;
}

/*.dashboard-list-box ul li:nth(2n+1) {
	background-color: #fcfcfc
}*/

.dashboard-list-box.with-icons ul li { padding-left: 87px; }

.dashboard-list-box ul li:last-child { border: none; }

.dashboard-list-box ul li:hover { background-color: #fbfbfb; }
.dashboard-list-box .numerical-rating { margin: 0 3px; }

.dashboard-list-box ul li i.list-box-icon {
	height: 38px;
	width: 38px;
	color: #777;
	text-align: center;
	line-height: 37px;
	border-radius: 50%;
	transition: 0.3s;
	display: inline-block;
	background-color: #eee;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30px;
}

.dashboard-list-box ul li:hover i.list-box-icon { background-color: #eaeaea; }

/* Static Content */
.dashboard-list-box-static {
	padding: 30px;
	background-color: #fff;
}

.dashboard-list-box-static .button {
	padding: 12px 20px;
	font-size: 15px;
	margin-bottom: 3px;
}

/* Close List Item */
a.close-list-item {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
	opacity: 0;
	padding: 4px;
	color: #ea2828;
	transition: 0.3s;
}

.dashboard-list-box ul li:hover a.close-list-item { opacity: 1; }

/* Reset for child ul  */
.dashboard-list-box ul ul { background-color: transparent; }

.dashboard-list-box ul ul li:nth-last-child(2n+1) { background-color: transparent; }
.dashboard-list-box ul ul li {
	padding: 0;
	border: none;
	transition: 0.3s;
	background-color: transparent;
	display: inline-block;
}

.dashboard-list-box ul ul li:hover { background-color: transparent; }

/* Sorting */
.dashboard-list-box .sort-by {
	top: 16px;
	right: 26px;
}

.dashboard-list-box .sort-by .chosen-container-single .chosen-single { background-color: transparent; padding: 0 4px; }
.dashboard-list-box .chosen-container .chosen-results li { border: none; }

/* Invoices
------------------------------------- */
.dashboard-list-box.invoices li { padding: 20px 30px; }
.dashboard-list-box.invoices ul li strong { color: #333; }

.dashboard-list-box.invoices ul ul {
	line-height: 22px;
	padding-bottom: 2px;
	color: #909090;
}

.dashboard-list-box.invoices ul ul li { padding: 0; }

.dashboard-list-box.invoices ul ul li:after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #e0e0e0;
	position: relative;
	margin: 0 10px;
}

.dashboard-list-box.invoices ul ul li:last-child:after { display: none; }

.paid { color: #64bc36; }
.unpaid { color: #ee3535; }

/* Button to right */
.buttons-to-right,
.dashboard-list-box .button.to-right {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translate3d(0,-49%,0);
	-moz-transform: translate3d(0,-50%,0);
	opacity: 0;
	transition: 0.4s;
	box-shadow: 0px 0px 10px 15px #fbfbfb;
}

.dashboard-list-box li:hover .buttons-to-right,
.dashboard-list-box li:hover .button.to-right { opacity: 1; }

.buttons-to-right { box-shadow: none; }
.buttons-to-right .button { margin-left: 2px; }

.dashboard-list-box .button i { padding-right: 2px; position: relative; top: 1px; }
.dashboard-list-box .button i.fa-remove { padding-right: 1px; }

/* Booking Buttons */
.buttons-to-right a.button.approve:hover { background-color: #64bc36; }
.buttons-to-right a.button.reject:hover { background-color: #e42929; }

/* My Profile Page
------------------------------------- */
.edit-profile-photo img {
	border-radius: 4px;
	max-width: 240px;
	width: 100%;
}

.edit-profile-photo {
	position: relative;
	display: block;
	margin-bottom: 35px;
}

.change-photo-btn {
	font-weight: 600;
	padding: 5px 6px;
	color: #333;
	background-color: #fff;
	border-radius: 50px;
	display: inline-block;
	position: relative;
	font-size: 13px;
	width: auto;
	transition: 0.3s;
	cursor: pointer;
	line-height: 20px;
	position: absolute;
	bottom: 15px;
	left: 15px;
	width: auto;
}

.photoUpload {
    position: relative;
    overflow: hidden;
    padding: 3px 12px;
	cursor: pointer;
}

.photoUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.change-photo-btn:hover {
	color: #fff;
	background-color: #66676b;
}

.change-photo-btn i { margin-right: 2px; }

.my-profile label {
	margin-top: 27px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	margin-bottom: 9px;
}

.my-profile { display: block; }

.my-profile label i { margin-right: 3px; }

.my-profile textarea {
	height: 200px; }

/* Dashbaord Wallet
------------------------------------- */
.paid span,.unpaid span { font-weight: 600; }
.paid {color:#48ad13;}
.wallet-currency {
    font-weight: 500;
    border-radius: 3px;
    background: rgba(255,255,255,0.2);
    font-size: 16px;
    line-height: 25px;
    padding: 3px 7px;
}
.comission-taken {
	border-radius: 3px;
	font-size: 14px;
	color: #888;
	font-weight: 400;
	background: #f4f4f4;
	display: inline-block;
	padding: 6px 10px;
	float: right;
	position: relative;
	top: -3px;
}
.comission-taken strong {
	font-weight: 600;
	color: #666;
}
@media (max-width: 768px) {
	.comission-taken { float: none; display: block;margin-top: 10px; padding: 0; background: transparent; }
}

/* List Box Listings
------------------------------------- */
.list-box-listing {
	display: flex;
	padding: 5px 0;
	position: relative;
}

/* Image */
.list-box-listing-img {
	flex: 1;
	max-width: 150px;
	position: relative;
}

.list-box-listing-img a {
	width: 100%;
	height: 100%;
	display: inline-block;
	overflow: hidden;
	position: relative;
	z-index: 10;
}

.list-box-listing-img a:before {
	content: "";
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgba(22,22,22,0.2);
	border-radius: 4px;
	z-index: 11;
}

.list-box-listing-img a img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

/* Bookings Styles */
.bookings { margin: 10px 0; }

.bookings .list-box-listing-img a:before { display: none; }
.bookings .list-box-listing-img {
	max-width: 70px;
	max-height: 70px;
	border-radius: 50%;
	overflow: hidden;
}

.bookings .list-box-listing-content .inner {
	top:0;
	transform: none
}

.bookings .list-box-listing-img {
    margin-right: 5px;
}

.bookings .list-box-listing-content .inner h3 { margin-bottom: 20px; }

.inner-booking-list h5 {
	display: inline-block;
	font-weight: 600;
	margin: 0;
	color: #666;
}

.inner-booking-list ul {
	display: inline-block;
	padding: 0;
	margin-bottom: 0;
}

.inner-booking-list ul li {
	display: inline-block;
	padding: 0;
	margin: 0 0 4px 0;
}

.inner-booking-list ul li:after {
	content: "";
	display: inline-block;
	position: relative;
	margin: 0 10px;
	height: 12px;
	top: 1px;
	background-color: #ddd;
	width: 1px;
}

.inner-booking-list ul li:last-child:after { display: none; }

.inner-booking-list ul li.highlighted {
	padding: 2px 10px;
	line-height: 22px;
	font-weight: 500;
	font-size: 14px;
	background-color: #eee !important;
    color: #777;
	border-radius: 50px;
	display: inline-block;
}

.pending-booking .inner-booking-list ul li.highlighted {
	background-color: #E9F7FE !important;
    color: #3184ae;
}

.approved-booking .inner-booking-list ul li.highlighted {
	background-color: #EBF6E0 !important;
    color: #5f9025;
}

.bookings .inner h3 span.booking-status {
    border-radius: 50px;
    line-height: 20px;
    font-weight: 600;
    font-size: 12px;
    color: #fff;
    font-style: normal;
    padding: 2px 8px;
    margin-left: 3px;
    position: relative;
    top: -2px;
}

.approved-booking .bookings .inner h3 span.booking-status { background-color: #64bc36; }
.pending-booking .bookings .inner h3 span.booking-status{ background-color: #61b2db; }
.canceled-booking .bookings .inner h3 span.booking-status { background-color: #ee3535; }

.bookings .inner h3 span.booking-status.unpaid { background-color: #ee3535; }

/* Content */
.list-box-listing-content {
	flex: 1;
	padding-left: 25px;
}

.list-box-listing-content .inner {
	position: relative;
	top: 14px;
/*	transform: translateY(-50%);*/
	vertical-align: top;
}

.list-box-listing-content .inner h3 {
	font-size: 18px;
	bottom: -2px;
	position: relative;
	font-weight: 500;
	margin: 0;
	line-height: 27px;
}

.list-box-listing-content .inner span {
	font-size: 15px;
	font-weight: 300;
	display: inline-block;
}

.list-box-listing-content .inner .numerical-rating,
.list-box-listing-content .inner .star-rating {
	margin: 5px 0 0 0;
	display: block;
}

/* Dashbaord Reviews
------------------------------------- */
.dashboard-list-box .comments.listing-reviews li {
	margin: 19px 0 10px 0;
}

.dashboard-list-box  a.rate-review {
    border: none;
    color: #666;
    background-color: #eee;
    padding: 4px 18px;
}

.dashboard-list-box  a.rate-review:hover {
    background-color: #66676b;
    color: #fff;
}

.dashboard-list-box .comment-by-listing {
	display: inline-block;
	color: #888;
}

.dashboard-list-box .comment-by-listing.own-comment,
.dashboard-list-box .comment-by-listing.own-comment a { color: #444; }

.dashboard-list-box .comment-by-listing a { color: #888; }
.dashboard-list-box .comment-by-listing a:hover { color: #66676b; }

/* Checkbox slide */
.add-listing-section label.switch {
	position: absolute;
	right: 40px;
	top: 30px;
	z-index: 100;
}

.add-listing-section {
	position: relative;
}

.add-listing-section .switcher-content {
	opacity: 0.4;
	pointer-events: none;
	transition: 0.4s;
}

.add-listing-section.switcher-on .switcher-content {
	opacity: 1;
	pointer-events: all;
}

label.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
	margin-top: 0;
	margin-bottom: 0px;
}

.switch input {display:none;}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 50px;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50px;
}

input:checked + .slider {
	background-color: #66676b;
}

input:checked + .slider:before {
	transform: translateX(30px);
}

/* Add Listing
------------------------------------- */
.add-listing-section {
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 12px 0 rgba(0,0,0,0.06);
	padding: 0 40px 25px 40px;
}

.add-listing-headline {
	width: calc(100% + 80px);
	left: -40px;
	position: relative;
	padding: 30px 40px;
	margin: 0 0 30px 0;
	border-radius: 4px 4px 0 0;
	background-color: #fcfcfc;
	border-bottom: 1px solid #eaeaea;
}

.add-listing-headline h3 {
	padding: 0;
	margin: 0;
	line-height: 32px;
	font-size: 22px;
	position: relative;
	top: 1px;
}

#add-listing h5 {
	font-size: 15px;
	font-weight: 600;
	color: #333;
	margin-bottom: 17px;
}

#add-listing h5 span {
	color: #888;
	font-weight: 400;
}

#add-listing h5 i {
	padding-right: 4px;
}

.add-listing-headline i {
	padding-right: 7px;
	display: inline-block;
	position: relative;
	top: 1px;
}

.button.preview {
	margin-top: 40px;
	font-size: 18px;
	font-weight: 400;
	padding: 11px 26px;
	display: inline-block;
}

.button.preview i { padding: 0; margin: 0 0 0 4px;}

.add-listing-section .row.with-forms input,
.add-listing-section .row.with-forms input[type="text"],
.add-listing-section .row.with-forms input[type="password"],
.add-listing-section .row.with-forms input[type="email"],
.add-listing-section .row.with-forms input[type="number"],
.add-listing-section .row.with-forms textarea,
.add-listing-section .row.with-forms input,
.add-listing-section .row.with-forms select,
.add-listing-section .row.with-forms .chosen-container {
    margin-bottom: 22px;
}
.add-listing-section textarea { min-height: 200px; margin-bottom: 35px; }

#add-listing h5.fb-input { color: #3b5998; }
#add-listing h5.twitter-input { color: #1da1f2; }
#add-listing h5.gplus-input { color: #dd4b39; }

/* Tips */
.tip {
	font-style: normal;
	position: relative;
	top: -1px;
	left: 2px;
	display: inline-block;
	cursor: help;
	color: #fff;
	font-size: 11px;
	line-height: 0;
	width: 18px;
	height: 18px;
	background: #66676b;
	display: inline-block;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	padding: 0 !important;
	font-weight: 500;
}

.tip-content {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, calc(-100% - 20px));
	-ms-transform: translate(-50%, -100%);
	background: #333;
	color: #fff;
	padding: 13px 15px;
	min-width: 200px;
	max-width: 200px;
	font-size: 13px;
	border-radius: 4px;
	line-height: 19px;
    pointer-events: none;
    z-index: 999;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
}

.tip:hover .tip-content {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, calc(-100% - 13px));
	-ms-transform: translate(-50%, -115%);
}

.tip:after {
	font-family: "FontAwesome";
	content: "\f128";
	line-height: 19px;
	display: inline-block;
	position: relative;
	text-align: center;
	-moz-transform: translateY(-1px);
}

.tip-content:after {
	font-family: "FontAwesome";
	content:"\f0dd";
	position: absolute;
	bottom: 3px;
	left: 50%;
	font-size: 22px;
	color: #333;
	transform: translate(-50%,50%);
}

/* Opening Hours
------------------------------------- */
.opening-day { margin-bottom: 22px; }
.opening-day h5 { margin-top: 17px; transition: 0.15s; }
.opening-day:hover h5 { color: #66676b !important; }
.opening-day .chosen-container .chosen-results { max-height: 200px; }

/* Slots
------------------------------------- */
.add-listing-headline i.fa { top: -2px; }

.availability-slots {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 30px);
}

.day-slots {
	margin: 0 25px 30px 0;
	flex: 0 0 calc(25% - 25px);
}

/* 24 hour clock type */
.availability-slots.twenty-four-clock i.am-pm,
.availability-slots.twenty-four-clock select.twelve-hr { display: none; }

/* Slot Headline */
.day-slot-headline {
	background-color: #66676b;
	color: #fff;
	text-align: center;
	border-radius: 4px;
	padding: 7px 10px;
	position: relative;
	cursor: default;
	font-weight: 600;
}

/* No Slots */
.no-slots {
	background-color: #f0f0f0;
	border-radius: 4px;
	margin-top: 8px;
	padding: 10px;
	display: flex;
	cursor: default;
	text-align: center;
	width: 100%;
	display: block;
	font-size: 14px;
	font-weight: 600;
	transition: 0.4s;
	opacity: 1;
	max-height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 8px;
}

.no-slots,
.no-slots-fadeout {
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
}

.no-slots.no-slots-fadein {
	opacity: 1;
	max-height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 8px;
	display: block;
}

/* Single Slot */
.single-slot {
	background-color: #f3f3f3;
	border-radius: 4px;
	margin-top: 8px;
	padding: 0;
	display: flex;
	cursor: move;
}

.single-slot.slot-animation {
	animation-name: slotFadeIn;
	animation-duration: 0.3s;
}

@keyframes slotFadeIn {
	0% { opacity: 0; max-height: 0; }
	100% { opacity: 1; max-height: 150px; }
}

.single-slot.cloned { display: none; }

.single-slot-left {
	flex: 1;
	padding: 12px 17px;
}

.single-slot-right { 
    flex: 0 0 auto;
    background-color: #eee;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 4px 4px 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 17px;
}

.single-slot-right strong {
	display: flex;
	font-weight: 600;
	font-size: 14px;
	width: 100%;
	line-height: 20px;
	margin-bottom: 3px;
}

.single-slot-time {
	font-weight: 700;
	color: #666;
	line-height: 20px;
	font-size: 14px;
	margin-bottom: 4px;
}

.single-slot-time i.am-pm {
	font-style: normal;
}

/* Remove Button */
.remove-slot {
	background-color: #c8c8c8;
	color: #fff;
	border: none;
	border-radius: 3px;
	height: 19px;
	width: 19px;
	line-height: 17px;
	font-size: 11px;
	transition: 0.3s;
	font-weight: 500;
}

.remove-slot i {
	position: relative;
	left: -1px;
}

.remove-slot:hover {
	background-color: #ec2c2c;
}

/* Add Slot */
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70% {transform: translateX(-5px);}
	20%, 40%, 60% {transform: translateX(5px);}
}

.add-slot-shake-error {
	animation-name: shake;
	animation-duration: 0.6s;
}

.add-slot {
	display: flex;
	width: 100%;
	background-color: #333;
	border-radius: 4px;
	margin-top: 8px;
	padding: 8px;
}

.add-slot span {
	font-size: 14px;
	color: #aaa;
	padding: 0 8px;
	font-weight: 600;
	font-size: 12px;
	position: relative;
	top: 1px;
}

.add-slot-inputs {
	flex: 1;
	display: flex;
	padding: 0;
}

.add-slot-btn { flex: 0 0 1; }

.add-slot-btn button {
	outline: none;
	background-color: #fff;
	color: #333;
	border: none;
	border-radius: 4px;
	margin-left: 10px;
	font-size: 14px;
	font-weight: 600;
	height: 100%;
	padding: 0 15px;
	transition: 0.3s;
}

.add-slot-btn button:hover {
	background-color: #66676b;
	color: #fff;
}

.add-slot-inputs select,
.add-slot-inputs input {
	background-color: #4a4a4a;
	border: none;
	padding: 0;
	height: 28px;
	line-height: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	margin-right:0;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
	width: 100%;
	box-shadow: none;
}

input[type="time"]::-webkit-clear-button{
    display:none;
}

.add-slot-inputs select {
	margin-right: 0;
	border-radius: 0 3px 3px 0;
	padding-left: 8px;
	border-left: 1px solid rgba(255,255,255,0.1);
	width: auto;
	font-size: 13px;
	margin-left: -4px;
}
.add-slot-inputs select option {
	background-color: #333;
	outline: none;
	border: none;
	cursor: pointer;
}

.add-slot-inputs input::-webkit-outer-spin-button,
.add-slot-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

.add-slot-inputs input{ padding-right: 4px; }
.availability-slots.twenty-four-clock .add-slot-inputs input{
    padding-right: 0;
}

/* Plus Minus Buttons */
.plusminus {
  display: inline-block;
  position: relative;
  font-size: 0;
  overflow: hidden;
  border-radius: 0;
  width: 44px;
  height: 72px;
}

.plusminus button {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #aaa;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  font-family: FontAwesome;
  cursor: pointer;
  transition: 0.3s;
}

.plusminus button:focus {
	outline: none;
}

.plusminus button:hover {
	background-color: #333;
	color: #fff;
}

.plusminus button:disabled:hover {
  background: #bbb;
  color: #fff;
  cursor: default;
}

.plusminus button:first-child {
  bottom: 0;
}
.plusminus button:first-child:before {
  content: "\f068";
  line-height: 25px;
}
.plusminus button:last-child {
  top: 0;
}
.plusminus button:last-child:before {
  content: "\f067";
  line-height: 25px;
}

.plusminus input[type="number"] {
	position: absolute;
	width: 24px;
	height: 24px;
	top: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	line-height: 24px;
	font-weight: 700;
	text-align: center;
}
.plusminus input[type="number"]::-webkit-outer-spin-button, 
.plusminus input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.plusminus.horiz {
	width: 74px;
	height: 24px;
}

.plusminus.horiz button:first-child {
	left: 0;
	border-radius: 3px;
}

.plusminus.horiz button:last-child {
	right: 0;
	border-radius: 3px;
	margin-left: 1px;
}

.plusminus.horiz:after {
	bottom: 0;
}

.plusminus.horiz input[type="number"] {
	position: absolute;
	top: 0;
	left: 25px;
	border-radius: 3px;
}

/* Slots Media Queries */
@media (max-width: 1920px) {
	.day-slots {
		flex: 0 0 calc(25% - 25px);
	}
}

@media (max-width: 1660px) {
	.day-slots {
		flex: 0 0 calc(33.3% - 25px);
	}
}

@media (max-width: 1366px) {
	.day-slots {
		flex: 0 0 calc(33.3% - 25px);
	}
}

@media (max-width: 1365px) {
	.day-slots {
		flex: 0 0 calc(50% - 25px);
	}
}

@media (max-width: 1040px) {
	.availability-slots {
		width: 100%;
	}
	.day-slots {
		flex: 0 0 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {
	.availability-slots {
		width: 100%;
	}
	.day-slots {
		flex: 0 0 100%;
		margin-right: 0;
		margin-bottom: 30px;
		flex-direction: column;
	}
	.add-slot-inputs input { width: 100%; }
	.add-slot-inputs span { opacity: 0; width: 5px; height: 10px; }
	.add-slot-inputs { width: 100%; }
	.add-slot { flex-direction: column; }
	.add-slot-btn button {
		width: 100%;
		margin-left: 0;
		margin-top: 8px; 
		background-color: rgba(255,255,255,0.15); 
		color: #fff;
		padding: 3px 0;
	}
}

/* Pricing
------------------------------------- */
#pricing-list-container {
	width: 100%;
	margin-top: 10px;
}

.pricing-list-item td {
	display: flex;
	width: 100%;
	margin-bottom: 5px;
}

.pricing-list-item td .fm-input,
.pricing-list-item td .fm-move,
.pricing-list-item td .fm-close {
	flex: 1;
	position: relative;
}

.pricing-list-item td .fm-move,
.pricing-list-item td .fm-close {
	max-width: 40px;
}

.pricing-list-item td .fm-move {
	cursor: move;
	line-height: 51px;
	color: #666;
	font-size: 17px;
}

.pricing-list-item td .fm-close { text-align: right; }

.pricing-list-item td .fm-close a {
	padding: 10px;
	padding-right: 0;
	color: #ea2828;
	display: inline-block;
}

.pricing-list-item td .fm-input { margin-right: 20px; }

.pricing-list-item td .fm-input.pricing-name { max-width: 350px; }

.pricing-list-item td .fm-input.pricing-price {
	max-width: 150px;
	margin-right: 0;
}

.pricing-submenu { display: block; padding-top: 20px; }
.pricing-submenu input { background-color: #fafafa; }
.pricing-submenu.pricing-list-item td .fm-input { margin-right: 0; }

#pricing-list-container tbody tr:first-child.pricing-list-item.pricing-submenu {
	padding-top: 0;
}

/* Data unit for price input */
.data-unit {
	position: absolute;
	top: 12px;
	right: 19px;
	font-style: normal;
	color: #aaa;
	z-index: 110;
	background-color: transparent;
	outline: 0;
	border: 0;
	padding: 0 0 0 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	pointer-events:none;
	background-color: #fff;
}

/* Add pricing Menu Button */
.add-pricing-submenu.button:before,
.add-pricing-list-item.button:before { display: none; }

.add-pricing-submenu.button,
.add-pricing-list-item.button {
	margin-top: 15px;
	margin-bottom: 5px;
	background-color: #f0f0f0;
	color: #666;
	padding: 8px 22px;
	font-weight: 500;
}

.add-pricing-submenu.button:hover,
.add-pricing-list-item.button:hover {
	color: #fff;
	background-color: #66676b;
}

/* Add Listing Form Out of Dashboard
------------------------------------- */
.separated-form .add-listing-section {
	border: 1px solid #eaeaea;
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.04);
}

.separated-form .button.preview {
	padding: 14px 38px;
}

#titlebar i.sl { margin-right: 4px; }
.notification.notice.large h4 { font-weight: 500; }

/* Leaflet Maps
------------------------------------- */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}

/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}

.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}

/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}

/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}

/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
	
.leaflet-bar a,
.leaflet-bar a:hover {

	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
}
	
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}

.leaflet-bar a.leaflet-disabled {
	cursor: default;
	pointer-events:none;
	}

.leaflet-touch .leaflet-bar a {
	width: 34px;
	height: 34px;
	line-height: 34px;
}

.leaflet-touch .leaflet-bar a i {
    line-height: 34px;
	left: -1px;
	position: relative;
}

body #submit_map {
    outline: none;
    margin-bottom: 30px;
}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 15px;
	text-align: center;
	}

/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(images/marker-icon.png);
	}

/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
    background: #fff;
    margin: 10px;
    border-radius: 3px;
    padding: 4px 8px;
    color: #777;
    font-weight: 500;
    line-height: 15px;
}

.leaflet-container .leaflet-control-attribution a {
    color: #333;
    text-decoration: none !important;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	background-clip: padding-box;
	}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 50%;
    margin: 5px 10px;
    transition: color 0.3s, background-color 0.3s;
    box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 15px;
    height: 34px;
    width: 34px;
    -webkit-text-stroke: 1px #fff;
    transition: 0.3s;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
    background-color: #f91942;
    -webkit-text-stroke: 1px #f91942;
    color: #fff;
}

.marker-container:hover .marker-card,
.clicked .marker-container .marker-card, 
.map-marker-container.clicked .marker-card { transform: rotateY(180deg) translateY(-4px); }

/* Popup
----------------------------------------*/
.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 25px;
}

.leaflet-popup-content-wrapper {
	padding: 0;
	text-align: left;
	border-radius: 4px
}

.leaflet-popup-content  {
	width: 270px;
}

.leaflet-popup-content p {
	margin: 0;
}

.leaflet-listing-img-container img {
    border-radius: 4px 4px 0 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.leaflet-listing-img-container {
    position: relative;
    height: 210px;
    display: block;
    border-radius: 4px;
    overflow: hidden;
}

.leaflet-listing-img-container:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    background: linear-gradient(to top, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.40) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
    background-color: rgba(35,35,37,0.2);
}

.leaflet-listing-item-content {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 24px;
    width: 100%;
    z-index: 50;
    box-sizing: border-box;
}

.leaflet-listing-item-content h3 {
    color: #fff;
    font-size: 18px;
    padding: 0 0 2px 0;
    font-weight: 500;
    margin: 0;
    line-height: 25px;
}

.leaflet-listing-content {
    padding: 16px 22px;
    width: 100%;
    z-index: 50;
    box-sizing: border-box;  
    position: relative;
}

.leaflet-listing-content .not-rated {
    color: #888;
}

.leaflet-listing-content .star-rating {
    font-size: 16px;
    margin-top: 1px;
    display: block;
    line-height: 18px;
}

.leaflet-listing-content .numerical-rating {
	margin: 0;
}

.leaflet-listing-item-content span {
    font-size: 15px;
    font-weight: 300;
    display: inline-block;
    color: rgba(255,255,255,0.7);
    line-height: 24px;
    display: block;;
}

.leaflet-popup-tip-container {
	width: 30px;
	height: 30px;
	position: absolute;
	left: 50%;
	margin-left: -15px;
	overflow: hidden;
	pointer-events: none;
	background: transparent;
	}

.leaflet-popup-tip {

    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
	}

.leaflet-popup-content-wrapper {
	background: white;
	color: #333;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
    }

.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-block;
	z-index: 999;
	text-align: center;
	line-height: 29px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	height: 29px;
	width: 29px;
	background-color: #fff;
	color: #333;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	font-family: "FontAwesome";
	border-radius: 50%;
	-webkit-text-stroke: 1px #fff;
	}
	
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #fff;
	background-color: #f91942;
	-webkit-text-stroke: 1px #f91942;
}

.leaflet-container a.leaflet-popup-close-button:before {
	content: "\f00d";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	font-size: 14px;
	line-height: 29px;
	height: 29px;
	width: 29px;
	border-radius: 100%;
}

.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}

/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}

/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* Clusters
----------------------------------------*/
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
	background-color: transparent;
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
}

.marker-cluster div {
	margin-left: 5px;
	margin-top: 5px;
	text-align: center;
	font-size: 15px;
	color: #fff;
	font-weight: 600;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	line-height: 36px;
	background-color: #66676b;
	position: relative;
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background-color: #f91942;
}

.marker-cluster div:before {
	border: 7px solid #f91942;
	opacity: 0.2;
	box-shadow: inset 0 0 0 4px #f91942;
	content: '';
	position:absolute;
	border-radius: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: cluster-animation 2.5s infinite;
}

.marker-cluster span {
    font-family: Arial, sans-serif;
    line-height: 36px;
}

.leaflet-control-geocoder {
  border-radius: 4px;
  background: white;
  min-width: 26px;
  min-height: 26px;
}

.leaflet-touch .leaflet-control-geocoder {
  min-width: 30px;
  min-height: 30px;
}

.leaflet-control-geocoder a,
.leaflet-control-geocoder .leaflet-control-geocoder-icon {
  border-bottom: none;
  display: inline-block;
}

.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.leaflet-control-geocoder a:hover,
.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
  border-bottom: none;
  display: inline-block;
}

.leaflet-control-geocoder-form {
  display: none;
  vertical-align: middle;
}
.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
  display: inline-block;
}
.leaflet-control-geocoder-form input {
  font-size: 120%;
  border: 0;
  background-color: transparent;
  width: 246px;
}

.leaflet-control-geocoder-icon {
  border-radius: 4px;
  width: 26px;
  height: 26px;
  border: none;
  background-color: white;
  background-image: url(images/geocoder.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.leaflet-touch .leaflet-control-geocoder-icon {
  width: 30px;
  height: 30px;
}

.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
  background-image: url(images/throbber.gif);
}

.leaflet-control-geocoder-form-no-error {
  display: none;
}

.leaflet-control-geocoder-form input:focus {
  outline: none;
}

.leaflet-control-geocoder-form button {
  display: none;
}
.leaflet-control-geocoder-error {
  margin-top: 8px;
  margin-left: 8px;
  display: block;
  color: #444;
}
.leaflet-control-geocoder-alternatives {
  display: block;
  width: 272px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.leaflet-control-geocoder-alternatives-minimized {
  display: none;
  height: 0;
}
.leaflet-control-geocoder-alternatives li {
  white-space: nowrap;
  display: block;
  overflow: hidden;
  padding: 5px 8px;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.leaflet-control-geocoder-alternatives li a,
.leaflet-control-geocoder-alternatives li a:hover {
  width: inherit;
  height: inherit;
  line-height: inherit;
  background: inherit;
  border-radius: inherit;
  text-align: left;
}

.leaflet-control-geocoder-alternatives li:last-child {
  border-bottom: none;
}
.leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-selected {
  background-color: #f5f5f5;
}
.leaflet-control-geocoder-address-detail {
}
.leaflet-control-geocoder-address-context {
  color: #666;
}	

/* Touch Gestures
----------------------------------------*/
@-webkit-keyframes leaflet-gestures-fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes leaflet-gestures-fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.leaflet-container:after {
  -webkit-animation: leaflet-gestures-fadein 0.8s backwards;
          animation: leaflet-gestures-fadein 0.8s backwards;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 22px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 461;
  pointer-events: none; }

.leaflet-gesture-handling-touch-warning:after,
.leaflet-gesture-handling-scroll-warning:after {
  -webkit-animation: leaflet-gestures-fadein 0.8s forwards;
          animation: leaflet-gestures-fadein 0.8s forwards; }

.leaflet-gesture-handling-touch-warning:after {
  content: attr(data-gesture-handling-touch-content); }

.leaflet-gesture-handling-scroll-warning:after {
  content: attr(data-gesture-handling-scroll-content); }

/* Leaflet autocomplete  */
#leaflet-geocode-cont {
	position: absolute;
	z-index: 110;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 0 0 4px 4px;
	top: 48px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.05);
	display: none;
	width: 100%;
}

#leaflet-geocode-cont.active {
	display: block;
}

#leaflet-geocode-cont ul { 
	list-style: none;
	padding: 0;
	margin: 0;
}

#leaflet-geocode-cont ul li { 
	color: #888;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	padding: 11px 15px;
	padding-left: 38px;
	margin: 0;
	border-bottom: 1px solid #e8e8e8;
	cursor: pointer;
	transition: 0.3s;
	position: relative;
/*     white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}

#leaflet-geocode-cont ul li:before { 
	content: "\f041";
	font-family: "FontAwesome";
	font-size: 14px;
	position: absolute;
	top: 10px;
	left: 20px;
	margin-right: 0;
	color: #aaa;
	transition: 0.3s;
}

#leaflet-geocode-cont ul li:hover:before {
	color: #a0a0a0;
} 

#leaflet-geocode-cont ul li:last-child { 
	border: none;
	border-radius: 0 0 4px 4px;
}

#leaflet-geocode-cont ul li.selected,
#leaflet-geocode-cont ul li:hover {
	background: #fafafa;
} 

#leaflet-geocode-cont span.highlight {
	color: #222;
	font-weight: 700;
}
.type-and-hit-enter {
	display: block;
	position:absolute;
	right: 16px;
	top: 13px;
	z-index: 120;
	background-color: #f0f0f0;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #888;
	line-height: 18px;
	padding: 3px 7px;
	pointer-events: none;
	opacity: 0;
	transition: 0.4s;
	transform: translateX(4px);
}

.tip-visible-focusin.type-and-hit-enter,
.tip-visible.type-and-hit-enter {
	opacity: 1;
	transform: translateX(0);
}

.main-search-container.alt-search-box #leaflet-geocode-cont { top: 51px; } 
.main-search-input.gray-style .type-and-hit-enter,
.main-search-inner .type-and-hit-enter { top: 11px; right: 25px; } 
.main-search-container.alt-search-box .type-and-hit-enter { right: 19px; top: 14px; }

@media (min-width: 992px) {
        .main-search-input .osm-dropdown-active #leaflet-geocode-cont,
        .main-search-container:not(.alt-search-box) .osm-dropdown-active #leaflet-geocode-cont {
            box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
            border: none;
            padding-top: 45px;
            top: 0;
            z-index: 10;
            border-radius: 4px;
        }
        
        .main-search-input.gray-style .osm-dropdown-active #leaflet-geocode-cont {
            box-shadow: none;
            border: 1px solid #e0e0e0;
        }
        
        .main-search-input .osm-dropdown-active #leaflet-geocode-cont ul li:first-child,
        .main-search-container:not(.alt-search-box) .osm-dropdown-active #leaflet-geocode-cont ul li:first-child { border-top: 1px solid #e8e8e8; }
}

@media (max-width: 992px) {
    .main-search-container:not(.alt-search-box) #leaflet-geocode-cont { top: 52px; } 
    .main-search-input.gray-style .type-and-hit-enter,
    .main-search-container:not(.alt-search-box) .type-and-hit-enter { top: 16px; right: 20px; } 
}

#leaflet-geocode-cont ul li.powered-by-osm { 
	display: block;
	padding: 9px 0;
	padding-right: 20px;
	font-size: 12px;
	font-weight: 500;
	color: #999;
	pointer-events: none;
	text-align: right;
}

#leaflet-geocode-cont ul li.powered-by-osm strong {
	color: #333;
	position: relative;
	padding-left: 26px;
} 

#leaflet-geocode-cont ul li.powered-by-osm strong:before {
	background-image: url(https://i.imgur.com/YaiaYGw.png);
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 17px;
	width: 17px;
	display: inline-block;
	position: absolute;
	left: 5px;
	top: -2px
}

#leaflet-geocode-cont ul li.powered-by-osm:before { content: ""; }
.leaflet-control-geocoder {
  border-radius: 4px;
  background: white;
  min-width: 26px;
  min-height: 26px;
}

.leaflet-touch .leaflet-control-geocoder {
  min-width: 30px;
  min-height: 30px;
}

.leaflet-control-geocoder a,
.leaflet-control-geocoder .leaflet-control-geocoder-icon {
  border-bottom: none;
  display: inline-block;
}

.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
  width: inherit;
  height: inherit;
  line-height: inherit;
}

.leaflet-control-geocoder a:hover,
.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
  border-bottom: none;
  display: inline-block;
}

.leaflet-control-geocoder-form {
  display: none;
  vertical-align: middle;
}
.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
  display: inline-block;
}
.leaflet-control-geocoder-form input {
  font-size: 120%;
  border: 0;
  background-color: transparent;
  width: 246px;
}

.leaflet-control-geocoder-icon {
  border-radius: 4px;
  width: 26px;
  height: 26px;
  border: none;
  background-color: white;
  background-image: url(images/geocoder.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.leaflet-touch .leaflet-control-geocoder-icon {
  width: 30px;
  height: 30px;
}

.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
  background-image: url(images/throbber.gif);
}

.leaflet-control-geocoder-form-no-error {
  display: none;
}

.leaflet-control-geocoder-form input:focus {
  outline: none;
}

.leaflet-control-geocoder-form button {
  display: none;
}
.leaflet-control-geocoder-error {
  margin-top: 8px;
  margin-left: 8px;
  display: block;
  color: #444;
}
.leaflet-control-geocoder-alternatives {
  display: block;
  width: 272px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.leaflet-control-geocoder-alternatives-minimized {
  display: none;
  height: 0;
}
.leaflet-control-geocoder-alternatives li {
  white-space: nowrap;
  display: block;
  overflow: hidden;
  padding: 5px 8px;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.leaflet-control-geocoder-alternatives li a,
.leaflet-control-geocoder-alternatives li a:hover {
  width: inherit;
  height: inherit;
  line-height: inherit;
  background: inherit;
  border-radius: inherit;
  text-align: left;
}

.leaflet-control-geocoder-alternatives li:last-child {
  border-bottom: none;
}
.leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-selected {
  background-color: #f5f5f5;
}
.leaflet-control-geocoder-address-detail {
}
.leaflet-control-geocoder-address-context {
  color: #666;
}

/* Google Maps
------------------------------------- */
.infoBox { border-radius: 4px; }

.map-box {
	background-color: #fff;
	margin-bottom: 20px;
	border-radius: 4px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	position: relative;
}

.map-box .listing-img-container img {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.map-box h4 {
	margin: 0;
	padding: 0;
}

.map-box h4 a {
	padding: 0 0 2px 0;
	font-size: 17px;
	line-height: 25px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	display: inline-block;
}

.listing-img-container {
	position: relative;
	height: 100%;
	display: block;
}

.map-box h4 a:hover { color: #66676b; }

.map-box p {
	padding: 0;
	line-height: 25px;
	margin: 2px 0 0 0;
	font-size: 14px;
}

.map-box ul.listing-details {
	padding: 0;
	font-size: 14px;
	display: none;
}

.map-box .listing-title {
	padding: 16px 22px;
}

.map-box .listing-img-content {
	padding: 18px 22px;
}

.map-box .listing-img-content span {
	font-size: 21px;
}

.map-box .listing-img-content .listing-price i {
    font-size: 15px;
    margin: -7px 0 0 0;
}

.infoBox > img {
	position: absolute !important;
	right: 0px;
	top: 0px;
}

.map-box .listing-img-container::before {
    content:"";
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
	background: linear-gradient(to top, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.40) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
	background-color: rgba(35,35,37,0.2);
}

.map-box .listing-item-content {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 24px;
    width: 100%;
    z-index: 50;
    box-sizing: border-box;
}

.map-box .listing-item-content h3 {
    color: #fff;
    font-size: 18px;
    padding: 0 0 2px 0;
    font-weight: 500;
    margin: 0;
    line-height: 27px;
}

.map-box .listing-item-content span {
    font-size: 15px;
    font-weight: 300;
    display: inline-block;
    color: rgba(255,255,255,0.7);
}

/* Close Button */
.infoBox-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-block;
	z-index: 999;
	text-align: center;
	line-height: 29px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	height: 29px;
	width: 29px;
	background-color: #fff;
	color: #333;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	font-family: "FontAwesome";
	border-radius: 50%;
	-webkit-text-stroke: 1px #fff;
}

.infoBox-close:hover {
	color: #fff;
	background-color: #66676b;
	-webkit-text-stroke: 1px #66676b;
}

/* Read More Icon */
.map-box-icon {
	height: 38px;
	width: 38px;
	position: absolute;
	bottom:0;
	right:0;
	background-color: #3685cf;
	display: block;
	color: #fff;
	font-size: 12px;
	z-index: 101;
	text-align: center;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translateX(50%);
	-ms-transform: translateX(50%);
	transform: translateX(50%);
	opacity:0;
	visibility: hidden;
}

.map-box-icon:before {
	content: "\f064";
	font-family: "FontAwesome";
	position: relative;
	top: 7px;
	display: block;
}

.map-box-image:hover .map-box-icon {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateX(0);
}

.map-box-image {
	position: relative;
	overflow: hidden;
	display: block;
}

.infoBox {
	-webkit-animation: fadeIn 0.9s;
	animation: fadeIn 0.9s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fadeIn {
    from {opacity: 0; }
    to {opacity: 1; }
}

/* Standard syntax */
@keyframes fadeIn {
    from {opacity: 0; }
    to {opacity: 1; }
}

.infoBox .star-rating {
    font-size: 16px;
    margin-top: 1px;
}

.infoBox .star-rating span { margin-right: 3px; }

.infoBox .rating-counter {
	position: relative;
	top: -1px;
}

.infoBox:after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fff;
}

#map {
	height: 100%;
	width: 100%;
	margin: 0;
	z-index: 990;
	outline: none;
}

#map-container {
	position: relative;
	top: 0;
	left: 0;
	height: 520px;
	width: 100%;
	z-index: 990;
	margin-bottom: 60px;
	outline: none;
}

.gmnoprint { margin: 10px; }

#map-container.fullwidth-home-map {
    height: 620px;
    margin-bottom: 0;
}

#map-container.fullwidth-home-map .main-search-inner {
    position: absolute;
    display: block;
    bottom: 60px;
    top: auto;
    transform: none;
    padding-bottom: 0;
    z-index: 9999;
    margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#map-container.fullwidth-home-map .main-search-input {
    margin-top: 0;
}

/* Cluster styles */
.cluster img { display:none }

.cluster-visible {
	text-align: center;
	font-size: 15px !important;
	color: #fff !important;
	font-weight: 500;
	border-radius: 50%;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	background-color: #66676b;
}

.cluster-visible:before {
	border: 7px solid #66676b;
	opacity: 0.2;
	box-shadow: inset 0 0 0 4px #66676b;
	content: '';
	position:absolute;
	border-radius: 50%;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: cluster-animation 2.5s infinite;
}

@keyframes cluster-animation {
	0%,100% {
		transform:scale(1.3) rotate(0deg)
	}
	50% {
		transform:scale(1.5) rotate(90deg)
	}
}

/* Custom Marker */
.map-marker-container {
	position: absolute;
	margin-top: 10px;
	transform: translate3d(-50%,-100%,0);
}

.marker-container {
	position: relative;
	margin: 10px auto;
	width: 40px;
	height: 40px;
	z-index: 1;
	border-radius: 50%;
	cursor: pointer;
	top: -5px;
}

#singleListingMap .marker-container { cursor: default; }

.marker-container { perspective: 1000; }

.marker-card {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 0.4s ease-in-out;
	position: absolute;
	z-index: 1;
}

.marker-container:hover .marker-card,
.map-marker-container.clicked .marker-card { transform: rotateY(180deg) translateY(-4px); }

.marker-arrow {
	width: 0;
	content: "";
	height: 0;
	border-style: solid;
	border-width: 8px 4px 0;
	border-color: #66676b transparent transparent;
	top: 38px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	border-radius: 50%;
	z-index: 1;
}

.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	z-index: 100;
}

.face i {
	line-height: 34px;
	font-size: 20px;
}

.face.front {
	background-color: #fff;
	border: 2px solid #66676b;
	color: #66676b;
	z-index: 100;
}

.face.back {
	transform: rotateY(180deg);
	box-sizing: border-box;
	background: #66676b;
	border-color: #66676b;
	color: #fff;
}

.face.back i { trasform: scaleX(-1); line-height: 38px; font-size: 18px; }

.face.back:after {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	top: 2px;
	left: 2px;
	border: 1px solid rgba(255,255,255,0.65);
	border-radius: 50%;
	position: absolute;
}

/* Custom Zoom Buttons
------------------------------------- */
.custom-zoom-in,
.custom-zoom-out {
	background-color: #fff;
	color: #333;
	cursor: pointer;
	border-radius: 50%;
	margin: 5px 15px;
	transition: color 0.3s, background-color 0.3s;
	box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.2);
	text-align: center;
	font-size: 15px;
	height: 34px;
	width: 34px;
}

.custom-zoom-in:hover,
.custom-zoom-out:hover {
	background-color: #66676b;
	color: #fff;
}

.custom-zoom-in:before,
.custom-zoom-out:before  {
	font-family: "FontAwesome";
	width: 100%;
	line-height: 35px;
	transition: -webkit-text-stroke 0.3s;
	-webkit-text-stroke: 1px #fff;
}

.zoomControlWrapper {
	position: absolute;
	left: 0;
	right: auto;
	width: 70px;
}

.custom-zoom-in:before { content: "\f067"; }
.custom-zoom-out:before  { content: "\f068"; }

.custom-zoom-in:hover:before,
.custom-zoom-out:hover:before  { -webkit-text-stroke: 1px #66676b;  }

/* Prev & Next Buttons
------------------------------------- */
#mapnav-buttons {
	position: absolute;
	transform:translate(0,0);
	z-index: 999;
	font-size: 14px;
	display: inline-block;
	bottom: 20px;
	right: 20px;
	list-style: none;
	padding: 0;
}

#mapnav-buttons.top {
	top: 20px;
	right: 20px;
	bottom: auto;
}

#mapnav-buttons li {
	float: left;
	margin-left: 4px;
	line-height: 20px;
}

#streetView,
#geoLocation,
#scrollEnabling,
#mapnav-buttons a {
	color: #333;
	background-color: #fff;
	padding: 7px 18px;
	padding-top: 9px;
	font-weight: 500;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 50px;
	box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.2);
}

#geoLocation:hover,
#streetView:hover,
#scrollEnabling:hover,
#scrollEnabling.enabled,
#mapnav-buttons a:hover {
	background-color: #66676b;
	color: #fff;
}

#prevpoint:before,
#nextpoint:after {
	font-family: "FontAwesome";
	position: relative;
	font-weight: 500;
	margin: 0 0 0 6px;
	font-size: 17px;
	top: 0px;
	line-height: 1px;
}

#prevpoint:before {
	content: "\f104";
	margin: 0 6px 0 0;
}

#nextpoint:after {
	content:"\f105";
	margin: 0 0 0 6px;
}

#streetView,
#geoLocation,
#scrollEnabling {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 999;
	font-size: 13px;
	line-height: 21px;
}

#streetView:before,
#geoLocation:before,
#scrollEnabling:before {
	content: "\e015";
	font-family: "simple-line-icons";
	position: relative;
	top: 2px;
	margin: 0 6px 0 0;
	font-size: 15px;
	line-height: 1px;
}

#scrollEnabling:before {
	margin-left: -3px;
}

#streetView:before {
	content: "\f21d";
	font-family: "FontAwesome";
	font-size: 16px;
	top: 1px;
	margin-right: 8px;
}

#geoLocation {
	right: auto;
	left: 20px;
	padding: 8px 11px;
}

#geoLocation:before {
	content: "\f192";
	font-family: "FontAwesome";
	font-size: 16px;
	margin: 0;
	top: 2px;
}

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
*/
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

.dropzone, .dropzone * {
box-sizing: border-box; }

.dropzone {
	min-height: 150px;
	border: 2px solid rgba(0, 0, 0, 0.3);
	background: white;
	padding: 20px 20px; }
.dropzone.dz-clickable {
	cursor: pointer; }
.dropzone.dz-clickable * {
	cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
	cursor: pointer; }
.dropzone.dz-started .dz-message {
	display: none; }
.dropzone.dz-drag-hover {
	border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
	opacity: 0.5; }
.dropzone .dz-preview {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 16px;
	min-height: 100px; }
.dropzone .dz-preview:hover {
	z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
	opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
	border-radius: 3px;
	background: #999;
	background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
	opacity: 1; }
.dropzone .dz-preview.dz-image-preview {
	background: white; }
.dropzone .dz-preview.dz-image-preview .dz-details {
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear; }
.dropzone .dz-preview .dz-remove {
	font-size: 14px;
	text-align: center;
	display: block;
	cursor: pointer;
	border: none; }
.dropzone .dz-preview .dz-remove:hover {
	text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
	opacity: 1; }
.dropzone .dz-preview .dz-details {
	z-index: 20;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	font-size: 13px;
	min-width: 100%;
	max-width: 100%;
	padding: 2em 1em;
	text-align: center;
	color: rgba(0, 0, 0, 0.9);
	line-height: 150%; }
.dropzone .dz-preview .dz-details .dz-size {
	margin-bottom: 1em;
	font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
	white-space: nowrap; }
.dropzone .dz-preview .dz-details .dz-filename:hover span {
	border: 1px solid rgba(200, 200, 200, 0.8);
	background-color: rgba(255, 255, 255, 0.8); }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
	overflow: hidden;
	text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
	border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
	background-color: rgba(255, 255, 255, 0.4);
	padding: 0 0.4em;
	border-radius: 3px; }
.dropzone .dz-preview:hover .dz-image img {
	-webkit-transform: scale(1.05, 1.05);
	-moz-transform: scale(1.05, 1.05);
	-ms-transform: scale(1.05, 1.05);
	-o-transform: scale(1.05, 1.05);
	transform: scale(1.05, 1.05);
	-webkit-filter: blur(8px);
	filter: blur(8px);
 }
.dropzone .dz-preview .dz-image {
	border-radius: 3px;
	overflow: hidden;
	width: 120px;
	height: 120px;
	position: relative;
	transition: all 0.3s;
	display: block;
	z-index: 10; }
.dropzone .dz-preview .dz-image img {
	display: block;	filter: blur(0px);  	transition: all 0.4s; }
.dropzone .dz-preview.dz-success .dz-success-mark {
	-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview.dz-error .dz-error-mark {
	opacity: 1;
	-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
	animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
	pointer-events: none;
	opacity: 0;
	z-index: 500;
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	margin-left: -27px;
	margin-top: -27px; }
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
	display: block;
	width: 54px;
	height: 54px; }
.dropzone .dz-preview.dz-processing .dz-progress {
	opacity: 1;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear; }
.dropzone .dz-preview.dz-complete .dz-progress {
	opacity: 0;
	-webkit-transition: opacity 0.4s ease-in;
	-moz-transition: opacity 0.4s ease-in;
	-ms-transition: opacity 0.4s ease-in;
	-o-transition: opacity 0.4s ease-in;
	transition: opacity 0.4s ease-in; }
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
	-webkit-animation: pulse 6s ease infinite;
	-moz-animation: pulse 6s ease infinite;
	-ms-animation: pulse 6s ease infinite;
	-o-animation: pulse 6s ease infinite;
	animation: pulse 6s ease infinite; }
.dropzone .dz-preview .dz-progress {
	opacity: 1;
	z-index: 1000;
	pointer-events: none;
	position: absolute;
	height: 16px;
	left: 50%;
	top: 50%;
	margin-top: -8px;
	width: 80px;
	margin-left: -40px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-transform: scale(1);
	border-radius: 8px;
	overflow: hidden; }
.dropzone .dz-preview .dz-progress .dz-upload {
	background: #333;
	background: linear-gradient(to bottom, #666, #444);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	-webkit-transition: width 300ms ease-in-out;
	-moz-transition: width 300ms ease-in-out;
	-ms-transition: width 300ms ease-in-out;
	-o-transition: width 300ms ease-in-out;
	transition: width 300ms ease-in-out; }
.dropzone .dz-preview.dz-error .dz-error-message {
	display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
	opacity: 1;
	pointer-events: auto; }
.dropzone .dz-preview .dz-error-message {
	pointer-events: none;
	z-index: 1000;
	position: absolute;
	display: block;
	display: none;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	font-size: 13px;
	top: 130px;
	left: -10px;
	width: 140px;
	background: #be2626;
	background: linear-gradient(to bottom, #be2626, #a92222);
	border-radius: 4px;padding: 10px 15px;line-height: 18px;
	color: white;
}
.dropzone .dz-preview .dz-error-message:after {
	content: '';
	position: absolute;
	top: -6px;
	left: 64px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #be2626; }

.dropzone {
	position:relative;
	border: 2px dashed #d0d0d0;
	border-radius: 3px;
	background: #fcfcfc;
	transition: all 0.3s linear;
	margin-bottom: 10px;
	margin-top: 5px;
	display: inline-block;
	width: 100%;
}

.dropzone:hover {
	border: 2px dashed #59b02c;
	background: #fff;
	transition: all 0.35s linear;
}

.dropzone:before {
	position: absolute;
	height: 100%;
	width: 100%;
	content: "";
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
	background-color: #59b02c;
	opacity: 0;
	z-index: 10;
	transition: all 0.3s linear;
	border-radius: 3px;
}

.dropzone:hover:before { opacity: 0.4; }

.dropzone .dz-message {
	text-align: center;
	margin: 50px 0;
	font-size: 17px;
	color: #888;
	transition: all 0.3s linear;
	position: relative;
	z-index: 11;
}

.dropzone:hover .dz-message {
	color: #59b02c;
}

.dz-message i {
	display: block;
	font-size: 32px;
	margin-bottom: 15px;
}

/* Magnific Popup
------------------------------------- */
.mfp-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	overflow: hidden;
	position: fixed;
	background: #000;
	opacity: 0.96;
}

.mfp-wrap {
	top: -10px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2001;
	position: fixed;
	outline: none !important;
	-webkit-backface-visibility: hidden;
}

.mfp-container {
	height: 100%;
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 18px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mfp-container:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
	display: none;
}

.mfp-content {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 505;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
	width: 100%;
	cursor: auto;
}

.mfp-ajax-cur {
	cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}

.mfp-zoom {
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
	cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
 }

.mfp-loading.mfp-figure {
	display: none;
}

.mfp-hide {
	display: none !important;
}

.mfp-preloader {
	color: #aaa;
	position: absolute;
	top: 50%;
	width: auto;
	text-align: center;
	margin-top: -0.8em;
	left: 8px;
	right: 8px;
	z-index: 504;
}

.mfp-preloader a {
	color: #cccccc;
}

.mfp-preloader a:hover {
	color: #fff;
}

.mfp-s-ready .mfp-preloader {
	display: none;
}

.mfp-s-error .mfp-content {
	display: none;
}

.mfp-s-loading .mfp-arrow {
	display: none;
}

button.mfp-close,
button.mfp-arrow {
	overflow: visible;
	cursor: pointer;
	border: 0;
	-webkit-appearance: none;
	display: block;
	padding: 0;
	z-index: 506;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
	right: 0px;
	top: -40px;
}

/* Close Button */
.og-close,
button.mfp-close {
	position: absolute;
	width: 45px;
	height: 45px;
	top: -20px;
	display: block;
	right: -12px;
	cursor: pointer !important;
	z-index: 9999;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border-radius: 50%;
	margin: 0px;
	background-color: transparent;
	outline: none;	transform: translate3d(0,0,0);
}

.mfp-iframe-holder .mfp-close {
	top: -50px;
	right: -12px;
	transform: translate3d(0,0,0);
}

.mfp-gallery .mfp-close {
	top: 20px;
	right: 10px;
}

/* Magnific Popup nests .mfp-close inside .mfp-content by default
   (closeBtnInside), so this rule was hiding the ONLY close button in the
   gallery lightbox with no fallback (no Esc key on mobile, tap-outside is
   unreliable on a full-bleed image) — visitors got stuck in the lightbox.
   Keep it visible, matching the styled circular button.mfp-close rule
   above. */
.mfp-gallery  .mfp-content .mfp-close {
	display: block;
}

.mfp-gallery .mfp-close:after,
.mfp-gallery .mfp-close:before {
	font-family: "FontAwesome";
	font-size: 29px;
	top: 4px;
	left: 50%;
	position: absolute;
	height: 10px;
	transition: 0.3s;
}

.mfp-close::after,
.mfp-close::before {
    top: 0px;
}

.og-close {
	margin: 17px;
	right: 10px;
	background: transparent;
	color: #222;
}

.mfp-close:hover,
.og-close:hover {
	transform: rotate(90deg);
}

.og-close:after,
.og-close:before,
.mfp-close:after,
.mfp-close:before {
	font-family: "FontAwesome";
	font-size: 29px;
	top: 21px;
	left: 50%;
	position: absolute;
	height: 10px;
	transition: 0.3s;
}

.og-close:after,
.og-close:before { top: 7px; font-size: 29px; }

.og-close:after,
.mfp-close:after {
	content:"\f106";
	-webkit-transform: translate(0,0);
	transform: translate(-50%,60%);
}

.og-close:after {
	-webkit-transform: translate(0,0);
	transform: translate(-50%,60%);
}

.og-close:before,
.mfp-close:before {
	content:"\f107";
	-webkit-transform: translate(0,0);
	transform: translate(-50%,0%);
}

#small-dialog .mfp-close,
#sign-in-dialog, .mfp-close,
.mfp-close:hover {
	color: #fff;
}

/* Popup close button*/
#sign-in-dialog .mfp-close,
#small-dialog .mfp-close {
	color: #666;
	background-color: #e4e4e4;
	border-radius: 50%;
	top: 28px;
	right: 40px;
    width: 40px;
    height: 40px;
}

#sign-in-dialog .mfp-close:hover,
#small-dialog .mfp-close:hover {
	color: #fff;
	transform: rotate(0);
	background-color: #66676b;
}

#sign-in-dialog .mfp-close::after,
#sign-in-dialog .mfp-close::before,
#small-dialog .mfp-close::after,
#small-dialog .mfp-close::before {
	top: 4px;
	height: 9px;
	font-size: 21px;
	transition: 0s;
}

.small-dialog-content input[type=submit] {
	width: 100%;
	margin-top: 26px;
	margin-bottom: 10px;
}

.small-dialog-content .divider {
	display: inline-block;
	width: 100%;
	margin-top: 15px;
	padding-bottom: 0;
}

.small-dialog-header {
	font-size: 22px;
	width: calc(100% + 80px);
	position: relative;
	left: -40px;
	top: 0;
	border-radius: 4px 4px 0 0;
	display: inline-block;
	background-color: #f6f6f6;
	padding: 35px 40px;
	margin-bottom: 40px;
}

.small-dialog-header h3 {
	padding: 0;
	margin: 0;
	font-size: 24px;
}

.mfp-counter {
	position: absolute;
	top: 0;
	right: 0;
	color: #aaa;
	font-size: 13px;
	line-height: 18px;
}

.mfp-arrow {
	opacity: 1;
	margin: 0 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	width: 60px;
	height: 60px;
	position: absolute;
	display: block;
	z-index: 100;
	overflow: hidden;
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	outline: none;
}

.mfp-arrow:hover {
	background: #66676b;
	color: #fff;
}

.mfp-arrow.mfp-arrow-left,
.mfp-arrow.mfp-arrow-right {
	font-family: "simple-line-icons";
	font-size: 20px;
}

.mfp-arrow.mfp-arrow-right { right: 15px; }

.mfp-arrow.mfp-arrow-left:before { content: "\e605"; left: -1px; top: 0px; position: relative; }
.mfp-arrow.mfp-arrow-right:before { content: "\e606"; left: 1px; top: 0px; position: relative; }

.mfp-content:hover .mfp-arrow {
	opacity: 1;
}

.mfp-iframe-holder {
	padding-top: 40px;
	padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
	line-height: 0;
	width: 100%;
	max-width: 1180px;
}

.mfp-iframe-scaler {
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-top: 54%;
}

.mfp-iframe-scaler iframe {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	background: black;
}

/* Popup */
#sign-in-dialog,
#small-dialog {
	background: #fff;
	padding: 40px;
	padding-top: 0;
	text-align: left;
	max-width: 610px;
	margin: 40px auto;
	position: relative;
	box-sizing:border-box;
	border-radius: 4px;
}

#sign-in-dialog {
	max-width: 500px;
}

#sign-in-dialog span.line,
#small-dialog span.line {padding-top: 0;}

.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0.001; /* Chrome opacity transition bug */
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}

/* Main image in popup */
img.mfp-img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	line-height: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 40px auto;
	border-radius: 4px;
}

/* The shadow behind the image */
.mfp-figure:after {
	content: '';
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 40px;
	display: block;
	right: 0;
	width: auto;
	height: auto;
	z-index: -1;
	box-shadow: 0 0 18px rgba(11,11,11, 0.6);
}

.mfp-figure {
	line-height: 0;
}

.mfp-bottom-bar {
	margin-top: -30px;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	cursor: auto;
}

.mfp-title {
	text-align: left;
	line-height: 18px;
	color: #f3f3f3;
	word-break: break-word;
	padding-right: 36px;
}

.mfp-figure small {
	color: #bdbdbd;
	display: block;
	font-size: 12px;
	line-height: 14px;
}

.mfp-image-holder .mfp-content {
	max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
	cursor: pointer;
}

/* Media Queries for Magnific Popup */
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {

  .mfp-img-mobile .mfp-image-holder {
	padding-left: 0;
	padding-right: 0;
   }

  .mfp-img-mobile img.mfp-img {
	padding: 0
   }

  /* The shadow behind the image */
  .mfp-img-mobile .mfp-figure:after {
	top: 0;
	bottom: 0;
   }

  .mfp-img-mobile .mfp-bottom-bar {
	background: rgba(0, 0, 0, 0.6);
	bottom: 0;
	margin: 0;
	top: auto;
	padding: 3px 5px;
	position: fixed;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
   }

  .mfp-img-mobile .mfp-bottom-bar:empty {
	padding: 0;
   }

  .mfp-img-mobile .mfp-counter {
	right: 5px;
	top: 3px;
   }

  .mfp-img-mobile .mfp-close {
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	text-align: center;
	padding: 0;
   }

  .mfp-img-mobile .mfp-figure small {
	display: inline;
	margin-left: 5px;
   }
}

.mfp-ie7 .mfp-img {
	padding: 0;
}

.mfp-ie7 .mfp-bottom-bar {
	width: 600px;
	left: 50%;
	margin-left: -300px;
	margin-top: 5px;
	padding-bottom: 5px;
}

.mfp-ie7 .mfp-container {
	padding: 0;
}

.mfp-ie7 .mfp-content {
	padding-top: 44px;
}

.mfp-ie7 .mfp-close {
	top: 0;
	right: 0;
	padding-top: 0;
}

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.92;
	background-color: #111;
}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

/* Parallax Background
------------------------------------- */
.parallax {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    z-index: 99;
}

/* fullscreen setup */
.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;
}

.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* content centering styles */
.centered-content {
    position:relative;
	vertical-align:middle;
	text-align:center;
}

/* Parallax Overlay */
.parallax-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-color: #333;
	opacity: 0.4;
}

/* Parallax Content */
.parallax-content {
	position: relative;
	z-index: 999;
	padding: 105px 0;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

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

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

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

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}

.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}

.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Before slick carousel gets initialised*/
.logo-slick-carousel,
.testimonial-carousel,
.simple-fw-slick-carousel,
.simple-slick-carousel {
	display: none;
}

.slick-initialized.logo-slick-carousel,
.slick-initialized.testimonial-carousel,
.slick-initialized.simple-fw-slick-carousel,
.slick-initialized.simple-slick-carousel {
	display: block;
}

.simple-fw-slick-carousel .fw-carousel-item { padding: 10px 15px 0 15px; }
.simple-fw-slick-carousel {margin: 0 15px; max-width: 100%; box-sizing: border-box; }

/* Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    z-index: 100;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.logo-slick-carousel .slick-prev,
.logo-slick-carousel .slick-next,
.simple-slick-carousel .slick-prev,
.simple-slick-carousel .slick-next { display: none !important; }

.simple-slick-carousel.arrows-nav .slick-prev,
.simple-slick-carousel.arrows-nav .slick-next { display: block !important; }

.slick-prev:hover,
.slick-next:hover {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    color: #999;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'simple-line-icons';
    font-size: 32px;
    line-height: 1;
    opacity: 1;
    color: #aaa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.3s;
}

.white-nav .slick-prev:before,
.white-nav .slick-next:before {
    color: #fff;
}

.slick-prev { left: 3px; transform: translate3d(-90px,-50%,0); }
.slick-next { right: 3px; transform: translate3d(90px,-50%,0); }

.slick-prev:before { content: '\e605'; }
.slick-next:before { content: '\e606'; }

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.no-dots .slick-dots {
    display: none !important;
}

.no-dots .testimonial-carousel .slick-slide { margin-bottom: 0; }

.simple-slick-carousel.slick-dotted.slick-slider { margin-bottom: 0; }
.simple-slick-carousel.slick-dotted.slick-slider.dots-nav { margin-bottom: 30px; }

.simple-slick-carousel .slick-dots { display: none !important; }
.simple-slick-carousel.dots-nav .slick-dots { display: block !important; }

.slick-dots li {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 3px;
    cursor: pointer;
}

.slick-dots li {
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    position: relative;
    outline: none;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin: 0 3px;
	opacity: 1;
	border-radius: 50%;
	line-height: 0;
	box-shadow: inset 0 0 0 2px #c0c0c0;
	transition: all 0.3s;
}

.slick-dots li.slick-active {
	box-shadow: inset 0 0 0 6px #c0c0c0;
	transition: all 0.3s;
}

.slick-dots li:after {
    display: block;
    height: 13px;
    width: 13px;
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	background-color: transparent;
	border-radius: 50%;
	transition: all 0.3s;
	opacity: 0;
	background-color: #c0c0c0;
}

.slick-dots li.slick-active:after {
	opacity: 1;
}

.white-nav .slick-dots li { box-shadow: inset 0 0 0 2px #fff; }
.white-nav .slick-dots li.slick-active { box-shadow: inset 0 0 0 8px #fff; }

.slick-dots li button { display: none;}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

/* Logo Carousel */
.logo-slick-carousel div.item {
	margin-bottom: 30px;
	text-align: center;
	display: inline-block;
}

.logo-slick-carousel div.item img { display: inline-block; }

/* Fullwidth Slick Carousel */
.fullwidth-slick-carousel .slick-slide {
	margin: 0 15px 30px 15px;
	opacity: 0.2;
	transition: 0.4s;
	pointer-events: none;
}

.slick-slide { outline: none; }

.testimonial-carousel .slick-slide.slick-active,
.fullwidth-slick-carousel .slick-slide.slick-active {
	opacity: 1;
	filter: none;
	pointer-events: all;
}

.fullwidth-carousel-container {
	overflow: hidden;
	width: 100%;
}

.category-box-container {
	position: relative;
	height: 100%;
}

.category-box-container.half {
	height: calc(50% - 15px);
	margin-bottom: 30px;
}

.category-box {
	background: #ccc;
	border-radius: 4px;
	height: 100%;
	display: block;
	margin-bottom: 20px;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	overflow: hidden;
	cursor: pointer;
}

.category-box:before {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 9;
	background: -webkit-linear-gradient(bottom, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.4) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(bottom, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.4) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to top, rgba(35,35,37,0.85) 0%, rgba(35,35,37,0.4) 35%, rgba(22,22,23,0) 60%, rgba(0,0,0,0) 100%);
}

.fullwidth-slick-carousel.category-carousel .slick-slide {
	height: 400px;
}

.fullwidth-slick-carousel.category-carousel .slick-slide.fw-carousel-review {
	height: auto;
}

.category-box-content {
	position: absolute;
	bottom: 30px;
	left: 34px;
	width: calc(100% - 68px);
	z-index: 50;
	box-sizing: border-box;
}

.category-box-content h3 {
	color: #fff;
	font-size: 24px;
	padding: 5px 0;
	margin: 0;
}

.category-box-content span {
	font-size: 18px;
	font-weight: 300;
	display: inline-block;
	color: rgba(255,255,255,0.7);
}

.category-box-btn {
	position: absolute;
	right: 32px;
	bottom: 32px;
	z-index: 111;
	background-color: transparent;
	border: 1px solid #fff;
	color: #fff;
	padding: 7px 0px;
	text-align: center;
	min-width: 120px;
	border-radius: 50px;
	transition: all 0.3s;
}

body .category-box-btn:hover {
	background-color: #fff;
	border-color: #fff;
	color: #333;
}

.category-box-content span {
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    border-radius: 50px;
    font-size: 16px;
    padding: 2px 14px;
    transition: 0.4s;
    margin-top: 5px;
    margin-bottom: 3px;
}

.category-box:hover .category-box-content span {
    color: #fff;
    background-color: #66676b;
}

.fw-carousel-item {
	position: relative;
	height: 100%;
}

.category-box-background {
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transition: transform 0.35s ease-out;
	transform: translate3d(0,0,0) scale(1);
	image-rendering: -webkit-optimize-contrast;
}

.category-box:hover .category-box-background { transform: translate3d(0,0,0) scale(1.08); }

/* Simple Slick Carousel */
.simple-slick-carousel {
	height: auto;
	width: calc(100% + 30px);
	left: -10px;
}

.simple-slick-carousel .category-box-container {
	height: 100%;
	display: block;
}

.simple-slick-carousel .slick-slide {
	padding: 10px 15px;
}

/* Masonry Filtering Styles*/
.option-set { padding: 0; margin: 0; }
.option-set li { display: inline-block; margin-right: 2px; }

.option-set li a {
	background: none;
	padding: 5px 16px;
	display: block;
	outline: none;
	border: none;
	font-weight: 600;
	float: right;
	margin: 0;
	font-size: 15px;
	border-radius: 50px;
	background-color: #f0f0f0;
	color: #666;
	line-height: 26px;
	transition: all 0.3s;
}

.option-set li a:hover { background-color: #e9e9e9; }
.option-set li a.selected {
	color: #fff;
	background-color: #66676b;
}

	
	/* Common Styles
	------------------------------------- */

	body {
		color: #707070;
		font-size: 15px;
		line-height: 27px;
		background-color: #fff;
	}

	body p { font-size: 16px; line-height: 29px; }

	#wrapper { background-color: #fff; }

	/* Main Font */
	body, h1, h2, h3, h4, h5, h6,  input[type="text"], input[type="password"], input[type="email"],
	textarea, select, input[type="button"], input[type="submit"], button, #tiptip_content, .map-box p, .map-box div,
	.numerical-rating .rating-counter, body .menu-responsive i.menu-trigger:after
	{ font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: none; }

	/* Headlines */
	h1, h2, h3, h4, h5, h6 {
	  color: #222;
	}

	h1.white, h2.white, h3.white, h4.white, h5.white, h6.white {
	  color: #fff;
	}

	/* Original theme desktop size — a later mobile-tightening pass had
	   edited these base (unscoped) values in place instead of adding a
	   scoped mobile override, which shrank the section headlines on
	   DESKTOP too. Restored here; the tightened mobile-only values now
	   live in the @media(max-width:768px) block below. */
	h3.headline {
		font-size: 29px;
		line-height: 36px;
		margin: 0 0 30px 0;
	}

	h2.headline {
		font-size: 34px;
		line-height: 40px;
		margin: 0 0 30px 0;
	}

	h2.headline span {
		font-size: 22px;
		line-height: 36px;
	}
	
	/* Headline Separator */
	strong.headline-with-separator,
	.headline-with-separator {
		position: relative;
		margin-bottom: 27px;
		font-weight: 400;
		display: block;
	}

	.headline-with-separator:after {
		bottom: -16px;
		left: 2px;
		width: 60px;
		content: "";
		height: 2px;
		border-radius: 6px;
		background: #66676b;
		display: block;
		position: absolute;
		margin: 0 auto;
		text-align: center;
	}

	.centered .headline-with-separator:after {
		left: 0;
		right: 0;
	}

	.headline-extra-spacing span {
	    max-width: 660px;
	    text-align: center;
	    margin-left: auto;
	    margin-right: auto;
	    font-size: 21px;
	}

	.headline span {
		font-size: 21px;
		line-height: 36px;
		margin-top: 10px;
		color: #888;
		font-weight: 300;
		display: block;
	}

	.headline span i {
		color: #66676b;
		font-style: normal;
	}

	h4.headline {
		font-size: 22px;
		line-height: 32px;
		margin: -5px 0 30px 0;
	}

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

	/* DESKTOP: "Most popular escorts across New Zealand" reused the
	   shared centered-headline layout, but per request it now matches
	   the left-aligned title + short pink underline + gray subtitle
	   treatment already used by "About Escort Locate" and "Frequently
	   Asked Questions" (both plain `h3.headline`, no `.centered`).
	   Scoped to this section only — the underlying `.headline.centered`
	   component stays centered everywhere else it's used. The mobile
	   override below already forces text-align:left !important on this
	   title regardless, so it's unaffected by this desktop-only pair. */
	.el-popular-section h3.headline.centered {
		text-align: left;
	}
	.el-popular-section h3.headline.centered .headline-with-separator:after {
		left: 2px;
		right: auto;
	}

	/* DESKTOP: the shared `.headline-with-separator` component's default
	   27px margin-bottom (plus the underline's own -16px offset) left a
	   noticeably large gap between the title and the subtitle line on
	   these 4 homepage sections (Popular Escorts/About/Blog/FAQ). Tighten
	   it here rather than editing the shared component itself, since
	   `.headline-with-separator` is reused site-wide (other pages' hero
	   titles, etc.) and shouldn't be affected. Halves the text-to-underline
	   and underline-to-subtitle spacing symmetrically (8px each side of the
	   2px underline, was 16px/9px) for a crisper, less airy look. Mobile
	   is untouched — it already zeroes this margin and hides the underline
	   entirely via its own `!important` rules in the media query below. */
	.el-popular-section h3.headline .headline-with-separator,
	.el-about-section h3.headline .headline-with-separator,
	.el-home-blog h3.headline .headline-with-separator,
	.el-faq h3.headline .headline-with-separator {
		margin-bottom: 18px;
	}
	.el-popular-section h3.headline .headline-with-separator:after,
	.el-about-section h3.headline .headline-with-separator:after,
	.el-home-blog h3.headline .headline-with-separator:after,
	.el-faq h3.headline .headline-with-separator:after {
		bottom: -8px;
	}

	/* DESKTOP: the shared `h3.headline`/`.headline span` component's
	   theme-original sizes (29px title, 21px subtitle) read as oversized
	   for these 4 homepage section intros, especially the 21px subtitle
	   competing with body copy elsewhere on the page. Scaled both down
	   to a smaller, more refined pairing (24px title / 16px subtitle) and
	   bumped the title to 600 weight to keep it feeling intentional at
	   the smaller size, rather than just shrinking without adjusting
	   weight. Scoped to these 4 sections only — `h3.headline` and
	   `.headline span` are reused site-wide (dashboard cards, other
	   listing pages) and shouldn't shrink there.
	   Explicitly wrapped in a min-width query (unlike the desktop-default
	   rules above it) because it sets font-size directly on the `strong`
	   element: the mobile override below only overrides font-size on the
	   parent `h3.headline`, not on `strong` itself, so without this guard
	   the child's explicit font-size here would leak through and win on
	   mobile too. Mobile keeps its own distinct 20px/hidden-subtitle
	   treatment untouched. */
	@media (min-width: 769px) {
		.el-popular-section h3.headline .headline-with-separator,
		.el-about-section h3.headline .headline-with-separator,
		.el-home-blog h3.headline .headline-with-separator,
		.el-faq h3.headline .headline-with-separator,
		.el-new-escorts h3.headline .headline-with-separator,
		.el-active-escorts h3.headline .headline-with-separator,
		.el-hottest-section h3.headline .headline-with-separator {
			font-size: 24px;
			line-height: 30px;
			font-weight: 600;
		}
		.el-popular-section .headline span,
		.el-about-section .headline span,
		.el-home-blog .headline span,
		.el-faq .headline span,
		.el-new-escorts .headline span,
		.el-active-escorts .headline span,
		.el-hottest-section .headline span {
			font-size: 16px;
			line-height: 26px;
			margin-top: 8px;
		}
	}

	/* MOBILE-ONLY: tighten the shared "h3.headline.centered" section-title
	   component (used by Latest Escorts, Popular Escorts, About, FAQ, Blog,
	   How to Start) — desktop keeps the restored theme-original sizes above.
	   Also tames the generic un-scoped 75px/40px/45px spacing utilities
	   (`.margin-top-75`/`.margin-bottom-40`/`.margin-bottom-45`, defined
	   further below) which are designed for desktop and left a huge dead
	   gap above/below every homepage section title on mobile; the combined
	   tag+class selectors here beat those single-class utility rules on
	   specificity without needing to touch the utility classes themselves
	   (they're used site-wide for many unrelated elements). */
	@media (max-width: 768px) {
		h3.headline {
			font-size: 24px;
			line-height: 30px;
			margin: 0 0 14px 0;
		}
		h3.headline.margin-top-75 { margin-top: 34px !important; }
		h3.headline.margin-bottom-40 { margin-bottom: 22px !important; }
		h3.headline.margin-bottom-45 { margin-bottom: 22px !important; }
		/* "Most popular escorts" card row: on top of the 22px heading
		   margin-bottom above, the row itself also carries the generic
		   35px margin-top-35 utility, stacking to a ~57px gap before the
		   first card — too much dead space on mobile. Scoped to this one
		   row (not the shared margin-top-35 utility, used site-wide). */
		.el-popular-grid.margin-top-35 { margin-top: 18px !important; }
	.headline span {
		font-size: 15px;
		line-height: 23px;
		margin-top: 6px;
	}

	/* MOBILE-ONLY: unify the "Most popular escorts / About Escort Locate /
	   Recent blog posts / Frequently Asked Questions" homepage section
	   titles to match the "Browse by City" (.el-citybrowse-title) heading
	   style exactly — same size/weight/color and the same 18px gap to the
	   content below — bold, left-aligned, no centered/underline treatment,
	   subtitle hidden. Scoped to each section's own wrapper class so the
	   widely-shared `.headline-with-separator`/`.headline.centered`
	   components used on other pages are untouched. Font-size matches
	   .el-citybrowse-title's own breakpoints: 20px here, then 17px below
	   560px (see the matching override alongside .el-citybrowse-title). */
	.el-popular-section h3.headline.centered,
	.el-about-section h3.headline,
	.el-home-blog h3.headline,
	.el-faq h3.headline,
	.el-new-escorts h3.headline,
	.el-active-escorts h3.headline,
	.el-hottest-section h3.headline {
		text-align: left !important;
		font-family: var(--font-sans, inherit) !important;
		font-size: 20px !important;
		line-height: 25px !important;
		font-weight: 700 !important;
		color: #1c1d21 !important;
		margin: 0 0 18px 0 !important;
	}
	.el-popular-section .headline strong.headline-with-separator,
	.el-about-section .headline strong.headline-with-separator,
	.el-home-blog .headline strong.headline-with-separator,
	.el-faq .headline strong.headline-with-separator,
	.el-new-escorts .headline strong.headline-with-separator,
	.el-active-escorts .headline strong.headline-with-separator,
	.el-hottest-section .headline strong.headline-with-separator {
		font-weight: 700 !important;
		color: #1c1d21 !important;
		margin-bottom: 0 !important;
		letter-spacing: -0.01em !important;
		/* Match "Browse by City"/"More ways to find your match" exactly:
		   both use .el-citybrowse-title/.el-explore-title's
		   `font-family: var(--font-sans, inherit)`, which resolves to the
		   site's Plus Jakarta Sans body font. These 4 headings otherwise
		   inherit Outfit from the site-wide h3/.headline typography
		   system (intentional everywhere else), so this mobile-only
		   override is needed just for these 4 to look identical. */
		font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	}
	.el-popular-section .headline strong.headline-with-separator:after,
	.el-about-section .headline strong.headline-with-separator:after,
	.el-home-blog .headline strong.headline-with-separator:after,
	.el-faq .headline strong.headline-with-separator:after,
	.el-new-escorts .headline strong.headline-with-separator:after,
	.el-active-escorts .headline strong.headline-with-separator:after,
	.el-hottest-section .headline strong.headline-with-separator:after {
		display: none !important;
	}
	.el-popular-section .headline span,
	.el-about-section .headline span,
	.el-faq .headline span,
	.el-new-escorts .headline span,
	.el-active-escorts .headline span,
	.el-hottest-section .headline span {
		display: none !important;
	}

	/* MOBILE-ONLY: tighten the large gaps between these same four
	   homepage sections — the unscoped `.margin-top-75`/`.margin-bottom-70`/
	   `.margin-top-70`/`.padding-top-75`/`.padding-bottom-75` utilities and
	   `.el-faq`'s own padding are all sized for desktop and left big dead
	   whitespace above each title on mobile. */
	.el-popular-section.margin-top-45 { margin-top: 24px !important; }
	.el-about-section.margin-top-75 { margin-top: 32px !important; }
	.el-about-section.margin-bottom-70 { margin-bottom: 28px !important; }
	.el-home-blog.margin-top-70 { margin-top: 8px !important; }
	.el-home-blog.padding-top-75 { padding-top: 28px !important; }
	.el-home-blog.padding-bottom-75 { padding-bottom: 28px !important; }
	.el-faq { padding: 28px 0 32px !important; }
}

	.border-top { border-top: 1px solid #e8e8e8; }
	.border-bottom { border-bottom: 1px solid #e8e8e8; }
	.icons-container { overflow: hidden; }

	mark { font-weight: 500; }

	/* Icons Demo Styles */
	.glyph {
		font-size: 16px;
		width: 33%;
		display: inline-block;
		transition: 0.3s;
	}

	h4 span.headline-detail { font-size: 15px; margin-top: 5px;}

	.mls {
		font-size: 16px;
		top: -8px;
		display: inline-block;
		position: relative;
	}

	.fs1 { font-size: 32px; }

	.pbs .im { width: 50px; display: inline-block;}

	.unit,
	.unitRight,
	.fs0 { display: none; }

	.pbs {
		padding: 10px 0 5px 15px;
		border-radius: 4px;
		width: 100%;
		display: inline-block;
		transition: 0.2s;
	}

	.pbs:hover { background-color: #f4f4f4; }
	.sl-icons-demo i { width: 25px;
		display: inline-block;
		top: 1px;
		position: relative;
	}

	.icons .fa.fa-fw { margin-right: 3px; font-size: 14px; }
	.icons .text-muted { display: none; }

	

	/* Margin Top */
	.margin-top-0  { margin-top: 0 !important; }
	.margin-top-1  { margin-top: 1px !important; }
	.margin-top-2  { margin-top: 2px !important; }
	.margin-top-3  { margin-top: 3px !important; }
	.margin-top-4  { margin-top: 4px !important; }
	.margin-top-5  { margin-top: 5px !important; }
	.margin-top-6  { margin-top: 6px !important; }
	.margin-top-7  { margin-top: 7px !important; }
	.margin-top-8  { margin-top: 8px !important; }
	.margin-top-9  { margin-top: 9px !important; }
	.margin-top-10 { margin-top: 10px !important; }
	.margin-top-15 { margin-top: 15px !important; }
	.margin-top-20 { margin-top: 20px !important; }
	.margin-top-25 { margin-top: 25px !important; }
	.margin-top-30 { margin-top: 30px !important; }
	.margin-top-35 { margin-top: 35px !important; }
	.margin-top-40 { margin-top: 40px !important; }
	.margin-top-45 { margin-top: 45px !important; }
	.margin-top-50 { margin-top: 50px !important; }
	.margin-top-55 { margin-top: 55px !important; }
	.margin-top-60 { margin-top: 60px !important; }
	.margin-top-65 { margin-top: 65px !important; }
	.margin-top-70 { margin-top: 70px !important; }
	.margin-top-75 { margin-top: 75px !important; }
	.margin-top-80 { margin-top: 80px !important; }
	.margin-top-85 { margin-top: 85px !important; }
	.margin-top-90 { margin-top: 90px !important; }
	.margin-top-95 { margin-top: 95px !important; }
	.margin-top-100 { margin-top: 100px !important; }
	.margin-top-105 { margin-top: 105px !important; }
	.margin-top-110 { margin-top: 110px !important; }
	.margin-top-115 { margin-top: 115px !important; }
	.margin-top-120 { margin-top: 120px !important; }

	/* Margin Bottom */
	.margin-bottom-0  { margin-bottom: 0 !important; }
	.margin-bottom-5  { margin-bottom: 5px !important; }
	.margin-bottom-10 { margin-bottom: 10px !important; }
	.margin-bottom-15 { margin-bottom: 15px !important; }
	.margin-bottom-20 { margin-bottom: 20px !important; }
	.margin-bottom-25 { margin-bottom: 25px !important; }
	.margin-bottom-30 { margin-bottom: 30px !important; }
	.margin-bottom-35 { margin-bottom: 35px !important; }
	.margin-bottom-40 { margin-bottom: 40px !important; }
	.margin-bottom-45 { margin-bottom: 45px !important; }
	.margin-bottom-50 { margin-bottom: 50px !important; }
	.margin-bottom-55 { margin-bottom: 55px !important; }
	.margin-bottom-55 { margin-bottom: 55px !important; }
	.margin-bottom-55 { margin-bottom: 55px !important; }
	.margin-bottom-55 { margin-bottom: 55px !important; }
	.margin-bottom-60 { margin-bottom: 60px !important; }
	.margin-bottom-65 { margin-bottom: 65px !important; }
	.margin-bottom-70 { margin-bottom: 70px !important; }
	.margin-bottom-75 { margin-bottom: 75px !important; }
	.margin-bottom-80 { margin-bottom: 80px !important; }
	.margin-bottom-85 { margin-bottom: 85px !important; }
	.margin-bottom-90 { margin-bottom: 90px !important; }
	.margin-bottom-95 { margin-bottom: 95px !important; }
	.margin-bottom-100 { margin-bottom: 100px !important; }

	/* Margin Left */
	.margin-left-0  { margin-left: 0 !important; }
	.margin-left-1  { margin-left: 1px !important; }
	.margin-left-2  { margin-left: 2px !important; }
	.margin-left-3  { margin-left: 3px !important; }
	.margin-left-4  { margin-left: 4px !important; }
	.margin-left-5  { margin-left: 5px !important; }
	.margin-left-6  { margin-left: 6px !important; }
	.margin-left-7  { margin-left: 7px !important; }
	.margin-left-8  { margin-left: 8px !important; }
	.margin-left-9  { margin-left: 9px !important; }
	.margin-left-10 { margin-left: 10px !important; }
	.margin-left-15 { margin-left: 15px !important; }
	.margin-left-20 { margin-left: 20px !important; }
	.margin-left-25 { margin-left: 25px !important; }
	.margin-left-30 { margin-left: 30px !important; }
	.margin-left-35 { margin-left: 35px !important; }
	.margin-left-40 { margin-left: 40px !important; }
	.margin-left-45 { margin-left: 45px !important; }
	.margin-left-50 { margin-left: 50px !important; }
	.margin-left-55 { margin-left: 55px !important; }
	.margin-left-60 { margin-left: 60px !important; }
	.margin-left-65 { margin-left: 65px !important; }
	.margin-left-70 { margin-left: 70px !important; }
	.margin-left-75 { margin-left: 75px !important; }
	.margin-left-80 { margin-left: 80px !important; }
	.margin-left-85 { margin-left: 85px !important; }
	.margin-left-90 { margin-left: 90px !important; }
	.margin-left-95 { margin-left: 95px !important; }
	.margin-left-100 { margin-left: 100px !important; }

	/* Margin Right */
	.margin-right-0  { margin-right: 0 !important; }
	.margin-right-1  { margin-right: 1px !important; }
	.margin-right-2  { margin-right: 2px !important; }
	.margin-right-3  { margin-right: 3px !important; }
	.margin-right-4  { margin-right: 4px !important; }
	.margin-right-5  { margin-right: 5px !important; }
	.margin-right-6  { margin-right: 6px !important; }
	.margin-right-7  { margin-right: 7px !important; }
	.margin-right-8  { margin-right: 8px !important; }
	.margin-right-9  { margin-right: 9px !important; }
	.margin-right-10 { margin-right: 10px !important; }
	.margin-right-15 { margin-right: 15px !important; }
	.margin-right-20 { margin-right: 20px !important; }
	.margin-right-25 { margin-right: 25px !important; }
	.margin-right-30 { margin-right: 30px !important; }
	.margin-right-35 { margin-right: 35px !important; }
	.margin-right-40 { margin-right: 40px !important; }
	.margin-right-45 { margin-right: 45px !important; }
	.margin-right-50 { margin-right: 50px !important; }
	.margin-right-55 { margin-right: 55px !important; }
	.margin-right-60 { margin-right: 60px !important; }
	.margin-right-65 { margin-right: 65px !important; }
	.margin-right-70 { margin-right: 70px !important; }
	.margin-right-75 { margin-right: 75px !important; }
	.margin-right-80 { margin-right: 80px !important; }
	.margin-right-85 { margin-right: 85px !important; }
	.margin-right-90 { margin-right: 90px !important; }
	.margin-right-95 { margin-right: 95px !important; }
	.margin-right-100 { margin-right: 100px !important; }

	/* Padding Top */
	.padding-top-0  { padding-top: 0 !important; }
	.padding-top-1  { padding-top: 1px !important; }
	.padding-top-2  { padding-top: 2px !important; }
	.padding-top-3  { padding-top: 3px !important; }
	.padding-top-4  { padding-top: 4px !important; }
	.padding-top-5  { padding-top: 5px !important; }
	.padding-top-6  { padding-top: 6px !important; }
	.padding-top-7  { padding-top: 7px !important; }
	.padding-top-8  { padding-top: 8px !important; }
	.padding-top-9  { padding-top: 9px !important; }
	.padding-top-10 { padding-top: 10px !important; }
	.padding-top-15 { padding-top: 15px !important; }
	.padding-top-20 { padding-top: 20px !important; }
	.padding-top-25 { padding-top: 25px !important; }
	.padding-top-30 { padding-top: 30px !important; }
	.padding-top-35 { padding-top: 35px !important; }
	.padding-top-40 { padding-top: 40px !important; }
	.padding-top-45 { padding-top: 45px !important; }
	.padding-top-50 { padding-top: 50px !important; }
	.padding-top-55 { padding-top: 55px !important; }
	.padding-top-60 { padding-top: 60px !important; }
	.padding-top-65 { padding-top: 65px !important; }
	.padding-top-70 { padding-top: 70px !important; }
	.padding-top-75 { padding-top: 75px !important; }
	.padding-top-80 { padding-top: 80px !important; }
	.padding-top-85 { padding-top: 85px !important; }
	.padding-top-90 { padding-top: 90px !important; }
	.padding-top-95 { padding-top: 95px !important; }
	.padding-top-100 { padding-top: 100px !important; }
	.padding-top-105 { padding-top: 105px !important; }
	.padding-top-110 { padding-top: 110px !important; }
	.padding-top-115 { padding-top: 115px !important; }
	.padding-top-120 { padding-top: 120px !important; }

	/* Padding Bottom */
	.padding-bottom-0  { padding-bottom: 0 !important; }
	.padding-bottom-5  { padding-bottom: 5px !important; }
	.padding-bottom-10 { padding-bottom: 10px !important; }
	.padding-bottom-15 { padding-bottom: 15px !important; }
	.padding-bottom-20 { padding-bottom: 20px !important; }
	.padding-bottom-25 { padding-bottom: 25px !important; }
	.padding-bottom-30 { padding-bottom: 30px !important; }
	.padding-bottom-35 { padding-bottom: 35px !important; }
	.padding-bottom-40 { padding-bottom: 40px !important; }
	.padding-bottom-45 { padding-bottom: 45px !important; }
	.padding-bottom-50 { padding-bottom: 50px !important; }
	.padding-bottom-55 { padding-bottom: 55px !important; }
	.padding-bottom-55 { padding-bottom: 55px !important; }
	.padding-bottom-55 { padding-bottom: 55px !important; }
	.padding-bottom-55 { padding-bottom: 55px !important; }
	.padding-bottom-60 { padding-bottom: 60px !important; }
	.padding-bottom-65 { padding-bottom: 65px !important; }
	.padding-bottom-70 { padding-bottom: 70px !important; }
	.padding-bottom-75 { padding-bottom: 75px !important; }
	.padding-bottom-80 { padding-bottom: 80px !important; }
	.padding-bottom-85 { padding-bottom: 85px !important; }
	.padding-bottom-90 { padding-bottom: 90px !important; }
	.padding-bottom-95 { padding-bottom: 95px !important; }
	.padding-bottom-100 { padding-bottom: 100px !important; }

	/* Padding Right */
	.padding-right-0  { padding-right: 0 !important; }
	.padding-right-5  { padding-right: 5px !important; }
	.padding-right-10 { padding-right: 10px !important; }
	.padding-right-15 { padding-right: 15px !important; }
	.padding-right-20 { padding-right: 20px !important; }
	.padding-right-25 { padding-right: 25px !important; }
	.padding-right-30 { padding-right: 30px !important; }
	.padding-right-35 { padding-right: 35px !important; }
	.padding-right-40 { padding-right: 40px !important; }
	.padding-right-45 { padding-right: 45px !important; }
	.padding-right-50 { padding-right: 50px !important; }
	.padding-right-55 { padding-right: 55px !important; }
	.padding-right-55 { padding-right: 55px !important; }
	.padding-right-55 { padding-right: 55px !important; }
	.padding-right-55 { padding-right: 55px !important; }
	.padding-right-60 { padding-right: 60px !important; }
	.padding-right-65 { padding-right: 65px !important; }
	.padding-right-70 { padding-right: 70px !important; }
	.padding-right-75 { padding-right: 75px !important; }
	.padding-right-80 { padding-right: 80px !important; }
	.padding-right-85 { padding-right: 85px !important; }
	.padding-right-90 { padding-right: 90px !important; }
	.padding-right-95 { padding-right: 95px !important; }
	.padding-right-100 { padding-right: 100px !important; }

	/* Padding Left */
	.padding-left-0  { padding-left: 0 !important; }
	.padding-left-5  { padding-left: 5px !important; }
	.padding-left-10 { padding-left: 10px !important; }
	.padding-left-15 { padding-left: 15px !important; }
	.padding-left-20 { padding-left: 20px !important; }
	.padding-left-25 { padding-left: 25px !important; }
	.padding-left-30 { padding-left: 30px !important; }
	.padding-left-35 { padding-left: 35px !important; }
	.padding-left-40 { padding-left: 40px !important; }
	.padding-left-45 { padding-left: 45px !important; }
	.padding-left-50 { padding-left: 50px !important; }
	.padding-left-55 { padding-left: 55px !important; }
	.padding-left-55 { padding-left: 55px !important; }
	.padding-left-55 { padding-left: 55px !important; }
	.padding-left-55 { padding-left: 55px !important; }
	.padding-left-60 { padding-left: 60px !important; }
	.padding-left-65 { padding-left: 65px !important; }
	.padding-left-70 { padding-left: 70px !important; }
	.padding-left-75 { padding-left: 75px !important; }
	.padding-left-80 { padding-left: 80px !important; }
	.padding-left-85 { padding-left: 85px !important; }
	.padding-left-90 { padding-left: 90px !important; }
	.padding-left-95 { padding-left: 95px !important; }
	.padding-left-100 { padding-left: 100px !important; }

/* Large devices and browsers */
@media (max-width: 1600px) {
	.category-box-btn {
		left: 32px;
		right: auto;
	}

	.category-box-content { bottom: 95px; }

	.category-box-container.half { height: 100%; }
	.fw-carousel-item .category-box-container.half:first-child { display: none; }
	.fullwidth-slick-carousel.category-carousel .slick-slide { height: 350px; }

	.dashboard-stat-icon { font-size: 66px; }
}

/* Laptops */
@media only screen and (max-width: 1366px) and (min-width: 1240px)  {
	.input-with-icon.location a i { padding: 15px 18px 15px 10px; }

	.data-radius-title {
	    margin-top: 7px;
	    line-height: 24px;
	}

	#map-container.fullwidth-home-map { height: 605px; }

	.fs-content .search .row.with-forms .col-fs-6 { width: 50%; }
}

/* Smaller than laptops */
@media (max-width: 1366px) {

	.fullwidth-slick-carousel.category-carousel .slick-slide { height: 320px; }
	.dashboard-stat-icon { font-size: 50px; }
	.main-search-container { height: 600px; }
}

/* Small devices and browsers */
@media only screen and (max-width: 1365px) {

	header.fullwidth.dashboard .container {
		margin-right: auto;
		margin-left: auto;
		padding-left: 15px;
		padding-right: 15px;
		padding: 0 40px;
		width: 100%;
	 }

	/* Dashboard Logo */
	.dashboard #logo {
		background-color: #fff;
		position: relative;
		height: 100%;
		left: 0;
		top: 0;
		margin: 3px 50px 0 0;
		max-width: auto;
		min-width: auto;
	}

	.dashboard #logo a {
		margin-left: 0;
		display: inline-block;
		height: 100%;
	}

	.dashboard #logo a.dashboard-logo { display: none; }

	.dashboard #logo a img {
		top: 0;
		position: relative;
		max-height: 40px;
		transform: translate3d(0,0,0);
	}

	.user-menu {  margin: 0 25px 0 25px; }

	.user-menu ul {
		left: -25px;
		right: auto;
	}

}

/* Smaller than standard 1180 (devices and browsers) */
@media (max-width: 1239px) {

	#navigation.style-1 {
		margin: 25px 0 5px -5px;
		width: 100%;
		padding-top: 15px;
		padding-bottom: 0;
		position: relative;
	}

	#navigation.style-1:before {
		position: absolute;
		width: 100%;
		height: 1px;
		display: block;
		top:0;
		left: 5px;
		content: "";
		background: #e8e8e8;
		width: 940px;
	}

	.fullwidth #navigation.style-1:before { background: linear-gradient(to right, #e8e8e8 50%, #fff); }

	.listing-item-container.list-layout .listing-item-image {flex: 3;}

	.listing-slider, .listing-slider .item {
	    height: 30vh;
	    min-height: 400px;
	    max-height: 400px;
	}

	#header.cloned { display: none; }
}

/* Reset for menu */
@media (max-width: 1024px) {
	#navigation.style-1 { margin: 0; padding-top: 0; }
	#navigation.style-1:before { display: none; }
	.header-widget { height: auto; }

	.dashboard #logo a {
		margin-left: 0;
		display: inline-block;
		height: 100%;
	}

	.dashboard #logo a.dashboard-logo { display: none; }

	.dashboard #logo a img {
		top: 0;
		position: relative;
		max-height: 40px;
    	transform: translate3d(0,0,0);
	}

	.mmenu-trigger { float: right; }
	body #dashboard #logo,
	body #logo {
	    position: relative;
	    margin: 0 !important;
	    margin-top: 5px !important;
	    width: calc(100% - 70px);
	    text-align: left;
	}

	/* ---------------------------------------------------------------
	Dashboard mobile header: the "Dashboard Navigation" trigger now
	lives IN the header (moved out of #dashboard) as a compact
	icon-only button between the logo and the hamburger. Both
	controls are the SAME 50x50 circular glass chip — same fill,
	border, blur, size and shape — so they read as one deliberate,
	symmetrical pair of icon buttons rather than a wide text pill
	awkwardly paired with a squarer icon box. Only dashboard pages
	carry the trigger markup (.el-dash-menu-pill), so :has() scopes
	this reflow to dashboard headers only; every other page keeps
	the untouched float-based logo/hamburger layout above. -------- */
	/* The theme's #header uses padding:18px 0 8px (border-box, fixed
	   66px height), which jams the whole logo + buttons row toward the
	   nav's BOTTOM edge with a big gap on top — that's the "icons
	   aren't sitting right / pushed down / uneven" problem. Balance the
	   padding so the 48px content row is vertically centered in the
	   bar. Scoped to the dashboard header via :has(). */
	#header:has(.el-dash-menu-pill) {
		padding-top: 9px;
		padding-bottom: 9px;
	}
	.left-side:has(.el-dash-menu-pill) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0;
		flex-wrap: nowrap;
	}
	.left-side:has(.el-dash-menu-pill) #logo {
		width: auto;
		max-width: none;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		display: flex;
		align-items: center;
	}
	.left-side:has(.el-dash-menu-pill) #logo a {
		display: flex;
		align-items: center;
	}
	/* the logo is an inline SVG; as an inline element it sat on the
	   text baseline, leaving a descender gap that pushed it ~4px above
	   its box's true center. display:block + flex centering removes the
	   baseline gap so the wordmark sits on the nav's midline. */
	.left-side:has(.el-dash-menu-pill) #logo .brand-logo {
		max-width: 100%;
		display: block;
	}

	/* hamburger: the theme's default icon shape/spacing is fine as-is
	   (3 clean bars, correct proportions) but its hand-tuned top:14px
	   nudge actually rides ~7px low inside its own 50x50 box on EVERY
	   page — invisible when it sits alone next to plain text, but
	   glaring now that it's paired with a truly flex-centered person
	   icon in a matching circle (confirmed by measuring both against
	   an unmodified page: the icon's own visual center sits ~6.7px
	   below the box's true center there too). Re-tuned just the
	   vertical nudge (top:14px -> top:7px) for this scoped instance
	   only, so the two circles line up; left/transform/scale and all
	   bar geometry stay completely untouched. */
	/* Merged capsule (IvySociete reference): the two buttons are NOT
	   two separate chips anymore — they sit flush together as ONE
	   white rounded rectangle on the dark bar, hamburger on the LEFT,
	   person on the RIGHT, split by a hairline divider. DOM order is
	   person-then-hamburger, so flex `order` flips them visually
	   (hamburger order:1, person order:2). Each button paints half
	   the capsule: the left button rounds only its left corners, the
	   right button rounds only its right corners; touching (gap:0)
	   they form one continuous pill. Icons are dark on the white
	   fill. Scoped to the dashboard header via :has(). */
	/* NOTE: the permanent dark-header block sets
	   `#header-container:not(.dashboard) .mmenu-trigger{background:rgba(255,255,255,.12)}`
	   and light `#f2f2f4` bars — an ID-level (1,2,0) rule that beat a
	   plain class selector and left the hamburger half GRAY with pale
	   bars instead of matching the white pill. So every rule that must
	   recolor the hamburger is prefixed with `#header-container` here
	   to win the cascade by specificity, not source order. */
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger,
	a.dashboard-responsive-nav-trigger.el-dash-menu-pill {
		float: none;
		flex: 0 0 auto;
		margin: 0;
		width: 46px;
		height: 44px;
		box-sizing: border-box;
		background: #ffffff;
		border: none;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transition: background 0.2s ease;
	}
	/* hamburger = left half of the capsule */
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger {
		order: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px 0 0 12px;
		border-right: 1px solid #ececef;
	}
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger:active { background: #f4f4f7; }
	/* This is the `.hamburger--collapse` variant: `.hamburger-inner`
	   is the BOTTOM bar (bottom-anchored) and the ::before/::after
	   bars stack ABOVE it (top:-10px/-20px). So the 3-bar group's true
	   visual center sits ~6px ABOVE the .hamburger-inner position
	   (after the 0.67 scale) — measuring .hamburger-inner alone is
	   misleading and made the icon look high in the white capsule.
	   Nudge the whole icon down so the bar GROUP is centered in the
	   44px box. */
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger .hamburger {
		top: 10px;
	}
	/* dark bars on the white fill (ID-prefixed to beat the base
	   dark-header rule that paints the bars light #f2f2f4) */
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger .hamburger-inner,
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger .hamburger-inner::before,
	#header-container .left-side:has(.el-dash-menu-pill) .mmenu-trigger .hamburger-inner::after {
		height: 2px;
		background-color: #1c1d21;
	}

	/* person = right half of the capsule */
	a.dashboard-responsive-nav-trigger.el-dash-menu-pill {
		order: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 12px 12px 0;
	}
	/* the trigger now shows the user's own avatar photo (same image as
	   the desktop sidebar's .el-ds-avatar) instead of a generic person
	   icon, so the custom photo upload feature actually reads as
	   "applied" somewhere the user sees on every page. */
	.el-dash-menu-avatar {
		position: relative;
		display: block;
		width: 28px;
		height: 28px;
		flex: 0 0 auto;
	}
	.el-dash-menu-avatar img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		border: 1.5px solid #ececef;
		transition: border-color 0.2s ease;
	}
	.el-dash-menu-dot {
		position: absolute;
		right: -1px;
		bottom: -1px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #34d17a;
		border: 1.5px solid #ffffff;
	}
	.el-dash-menu-pill:active { background: #f4f4f7; }
	/* open state: brand-pink ring around the avatar as the single accent touch */
	a.dashboard-responsive-nav-trigger.el-dash-menu-pill.active { background: #ffffff; }
	a.dashboard-responsive-nav-trigger.el-dash-menu-pill.active .el-dash-menu-avatar img { border-color: #f0104a; }

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media (max-width: 991px) {

	.main-search-container { height: 580px; }

	.main-search-input select,
	.main-search-input select:focus {
		font-size: 16px;
		border: 1px solid #e0e0e0;
		box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
		background: #fff;
		height: 55px;
		padding: 12px 18px;
		border-radius: 4px;
	}

	#dashboard { padding-top: 0 !important; }

	/* Dashboard Nav */
	.dashboard-nav {
		min-width: 90%;
		max-width: 90%;
		margin: 0 5%;
		border-radius: 0 0 4px 4px;
		position: relative;
		min-height: auto;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		padding: 0;
		transition: all 0.3s;
	}

	.dashboard-nav.active ul,
	.dashboard-nav.active {
		opacity: 1;
		visibility: visible;
		max-height: 900px;
	}

	.dashboard-nav ul,
	.dashboard-nav.active ul li ul,
	.dashboard-nav ul li ul {
	    visibility: hidden;
	    opacity: 0;
	    max-height: 0;
	    transition: all 0.3s;
	}

	.dashboard-nav.active ul li.active ul {
	    visibility: visible;
	    opacity: 1;
	    max-height: 300px;
	}

	#header-container.fixed {
	    position: relative;
	    top: 0;
	    width: 100%;
	}

	.dashboard-content {
	    padding: 40px 5%;
	    padding-bottom: 0;
	    height: auto;
	    margin-left: 0px;
	}

	header.fullwidth.dashboard .container {  padding: 0 5%; }
	.main-search-inner { transform: translate(0, -51%); }

	.messages-container-inner { display: block;}

	.messages-container-inner .messages-inbox {
	    max-width: 100%;
	    width: 100%;
	    border-right: none;
	    display: none;
	}

	/* Dashboard Nav - END */

	.main-search-input {
	    border-radius: 0;
	    display: block;
	    padding: 0;
	    max-height: 100%;
	    background-color: transparent;
	    box-shadow: none;
	}

	.gray-style.main-search-input { background-color: transparent; }

	.gray-style .main-search-input-item,
	.main-search-input-item {
   		border-color: transparent;
	}

	.main-search-input button.button { margin-top: 10px; }
	.main-search-input-item { margin-bottom: 10px; }

	.main-search-input-item,
	.main-search-input .main-search-input-item:nth-last-child(2) {
	    padding: 0;
	}

	.main-search-input-item .chosen-container-single .chosen-single,
	.main-search-input-item .chosen-single.chosen-container-active,
	.gray-style .main-search-input-item .chosen-container-single .chosen-single,
	.gray-style .main-search-input-item .chosen-single.chosen-container-active,
	.gray-style.main-search-input input,
	.gray-style.main-search-input input:focus,
	.main-search-input input,
	.main-search-input input:focus {
		padding: 0 20px;
		height: 55px;
		line-height: 55px;
		border-radius: 4px;
		background: #fff;
		border: 1px solid #e0e0e0;
		box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
	}

	.gray-style.main-search-input input,
	.gray-style.main-search-input input:focus,
	.main-search-input input,
	.main-search-input input:focus {
		padding: 0 20px;
	}

	.gray-style .main-search-input-item.location a { background: #fff; }

	.gray-style .main-search-input-item .chosen-single {
    	border-bottom: 1px solid #e0e0e0;
    	transition: border 0s;
	}

	.main-search-input-item .chosen-container-single .chosen-single,
	.main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single {
		border: 1px solid #e0e0e0;
		box-shadow: none;
		transition:  0s;
 	}

	.main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single {
		border-bottom: 0;
 	}

	.main-search-input-item .chosen-container .chosen-drop {
		border: 1px solid #e0e0e0;
		border-top: 0;
		border-radius: 0 0 4px 4px;
		box-shadow: none;
	}

	.gray-style .main-search-input-item .chosen-container-active.chosen-with-drop .chosen-single {
		border-bottom: none;
	}

	.main-search-input-item .chosen-single::after { display: none; }

	.simple-slick-carousel.slick-dotted.slick-slider { margin-bottom: 0; width: 100%; left: 0; }

	.icon-box-2.with-line::before { display: none; }

	.container .row div.padding-right-30 { padding-right: 15px !important; }
	.container .row div.padding-left-30 { padding-left: 15px !important; }

	.listing-item-container.list-layout:hover { transform: none; }
	.listing-item-container.list-layout .listing-item-inner {
		position: relative;
		top: auto;
		transform: none;
		padding: 30px;
		left: 0;
	}

	.listing-item-container.list-layout .listing-item {
	    display: block;
	    height: auto;
	    padding: 0;
	}

	.listing-item-container.list-layout .listing-item .listing-badge {
	    display: none;
	}

	.listing-item-container.list-layout .listing-item-image {min-height: auto; }

	.listing-item-container.list-layout span.like-icon {
	    top: -15px;
	    transform: translateY(-100%);
	    background-color: rgba(32,32,32,0.4);
	    color: #fff;
	    right: 35px;
	}

	.listing-item-container.list-layout .listing-item-details {
	    position: relative;
	    bottom: auto;
	    right: auto;
	    left: 0;
	    top: -15px;
	    margin: 0px 30px 15px 30px;
	    padding: 5px 20px;
	    background-color: #eee;
	    border-radius: 50px;
	    font-size: 14px;
	    width: auto;
	    display: inline-block;
	}

	#titlebar { padding: 60px 0; margin-bottom: 60px; }

	.panel-dropdown {
	    margin-right: 4px;
	    display: block;
	    width: 100%;
	}

	.fullwidth-filters .sort-by {
	    display: block;
	    width: 100%;
	}

	.fullwidth-filters .sort-by label,
	.fullwidth-filters .sort-by .sort-by-select,
	.panel-dropdown {
	    float: left;
	    margin-top: 10px;
	}

	.panel-dropdown a,
	.fullwidth-filters .sort-by .chosen-container-single .chosen-single {
	    background: #f3f3f3;
	}

	.panel-dropdown .panel-dropdown-content,
	.fullwidth-filters .panel-dropdown.float-right .panel-dropdown-content {
	    left: 0;
	    right: auto;
	    width: 400px;
	    max-width: 70vw;
	}

	.fullwidth-filters .sort-by .chosen-container.chosen-with-drop .chosen-drop,
	.fullwidth-filters .sort-by .chosen-container .chosen-drop {
	    left: 0;
	    right: auto;
	    margin-left: 0;
	}

	.listing-item-container:hover { transform: none; }

	/* Map */
	.fs-inner-container.map-fixed {
	    height: 500px;
	    position: relative;
	    top: 0;
	    padding-top: 0 !important;
	    width: 100%;
	}

	.fs-inner-container.content { width: 100%; padding-top: 0 !important }
	.close-list-item { display: none; }

	.buttons-to-right, .dashboard-list-box .button.to-right {
		position: relative;
		transform: none;
		top: 0;
		margin: 10px 0 0 0;
		opacity: 1;
		right: auto;
	}

	.list-box-listing-img {
	    max-width: 168px;
	}

	.add-review-photos {
	    float: left;
	    top: 0;
	}

	.add-review-box {
	    border-radius: 4px;
	    background-color: #f9f9f9;
	    padding: 36px;
	    padding-bottom: 40px;
	    margin-bottom: 55px;
	    margin-top: 70px;
	    display: inline-block;
	    width: 100%;
	    position: relative;
	}

	.listing-slider .slick-next:hover,
	.listing-slider .slick-next { right: 100px}

	.listing-slider .slick-prev:hover,
	.listing-slider .slick-prev { left: 100px}

	.listing-slider, .listing-slider .item {
	    height: 30vh;
	    min-height: 400px;
	    max-height: 400px;
	}

	.listing-nav-container.cloned .listing-nav {
	    display: none;
	}

	.opening-day .chosen-container {
   		vertical-align: initial;
	}

	.dashboard-content .dashboard-list-box-static {
		margin-bottom: 40px;
	}

	.office-address {  padding: 60px 0 !important; }
	#googlemaps { height: 30vh !important; padding-bottom: 0 !important; }

	.contact-map { display: block; }

	.contact-map #singleListingMap-container {
	    flex: 1;
	    position: relative;
	    padding-top: 0;
	    display: block;
	    height: 300px;
	}

	.contact-map .address-box-container { width: 100%; }

	.sidebar-textbox ul.contact-details {
	    margin-bottom: 40px;
	}
}

/* All Mobile Sizes (devices and browser) */
@media (max-width: 767px) {

	.listing-features {
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}

	.messages-headline h4 { display: block; }

	.message-action {
	    display: inline-block;
	    float: none;
	    margin-top: 15px;
	    background-color: #f2f2f2;
	    border-radius: 50px;
	    padding: 4px 20px;
	    text-align: center;
	}

	.message-bubble .message-text { margin-left: 55px; }
	.message-bubble.me .message-text { margin-right: 55px; }

	.message-bubble .message-avatar img{
		width: 35px;
		height: 35px;
		margin-top: 8px;
	}

	#backtotop { display: none; }

	.small-dialog-header {
	    width: calc(100% + 60px);
	    left: -30px;
	    padding: 30px;
	}

	#sign-in-dialog, #small-dialog {
		background: #fff;
		padding: 30px;
		padding-top: 0;
    }

	#sign-in-dialog .mfp-close, #small-dialog .mfp-close {
	    top: 24px;
	    right: 30px;
	    width: 40px;
	    height: 40px;
	}

	.list-box-listing { display: block;}

	.list-box-listing-content .inner {
	    position: relative;
	    top: 0;
	    transform: translateY(0);
	    display: inline-block;
	}

	.header-widget {
	    height: auto;
	}

	.list-box-listing-img {
	    max-width: 100%;
	}

	.list-box-listing-content { padding-left: 0; padding-top: 10px; }

	#titlebar { padding: 50px 0; margin-bottom: 50px; }

	#map-container.fullwidth-home-map .zoomControlWrapper { top: 15px !important; }

	/* Pricing Tables */
	.pricing-container { display: block; }
	.plan.featured { transform: none; }
	.plan { margin-bottom: 35px; }

	#breadcrumbs {
	    position: relative;
	    display: block;
	    margin-top: 30px;
	}

	#breadcrumbs ul li { margin: 0 10px 0 0; }

	.comment-by .numerical-rating, .comment-by .star-rating {
	    position: relative;
	    right: 0;
	    top: 7px;
	    display: block;
	    width: 100%;
	    float: none;
	    height: 30px;
	}

	.avatar { display: none; }
	.comment-content { padding: 0 ;}

	.small-dialog-header h3 {
	    padding: 0;
	    margin: 0;
	    font-size: 22px;
	    padding-right: 80px;
	    line-height: 30Px;
	}

	#sign-in-dialog, #small-dialog {
	    max-width: 75vw;
	}

	.listing-nav li a {
	    border-bottom: 1px solid #e0e0e0;
	    padding: 15px;
	    width: 100%;
	    display: block;
	    padding-left: 0;
	    border-color:  #e8e8e8;
	}

	.listing-nav li {
	    margin-right: 0;
	    display: block;
	}

	.listing-nav-container .listing-nav li:first-child a {padding-top: 0;}

	.listing-nav-container.cloned .listing-nav li:first-child a.active,
	.listing-nav-container.cloned .listing-nav li:first-child a:hover,
	.listing-nav li:first-child a,
	.listing-nav li a.active,
	.listing-nav li a:hover {
	    border-color: #e8e8e8;
	}

	.dashboard-content .checkboxes label {
    	width: 100%;
	}

	.pricing-list-item td {
	    display: block;
	    width: 100%;
	    position: relative;
	}

	.pricing-list-item td .fm-input,
	.pricing-list-item td .fm-input.pricing-price,
	.pricing-list-item td .fm-input.pricing-name {
	    max-width: 100%;
	    margin-right: 0;
	}

	.pricing-list-item td .fm-close {
	    text-align: left;
	    position: absolute;
	    top: 4px;
	    right: 0;
	}

	.about-author img {
	    width: 70px;
	    height: 70px;
	}

	.about-description {
	    margin: 2px 0 0 100px;
	}
	/* Blog styling */
	#posts-nav li {
	    position: relative;
	    width: 100%;
	}

	#posts-nav li a { padding: 0 !important; }
	#posts-nav li a::before { display: none;}
	#posts-nav li.next-post {text-align: left; margin-bottom: 30px;}	.comments ul li ul { margin: 0;  }

	.avatar img {  max-width: 60px;  }
	.comment-content {   padding: 0 0 0 85px; }
	.comments ul li ul li::before { top: 25px; }
	.comment-content {
	    padding: 0;
	}

	.testimonial::after { display: none; }
	.testimonial-box { padding-left: 38px; }

	.main-search-container h2 {
	    font-size: 28px;
	    font-weight: 400;
	    line-height: 36px;
	}

	.main-search-container h4 {
	    font-size: 20px;
	    font-weight: 400;
	    line-height: 32px;
	}

	.main-search-container:before { background: rgba(255,255,255,0.92); }

}

@media (max-width: 480px) {
	.tabs-nav.blog li,
	.tabs-nav.blog li a,
	.tabs-nav li,
	.tabs-nav li a {
		width: 100%;
		padding: 0;
		border-radius: 3px;
		text-align: center;
		border-bottom: none;
	}

	.about-author img {
	    display: none;
	}

	.about-description {
	    margin: 0;
	}

	.user-menu {  margin: 10px 0 -10px 25px; top: 0; display: inline-block; }

	.dashboard-list-box .sort-by .sort-by-select {display: none;}

}

/* Styles Switcher
---------------------------------------------------------------------- */

	#style-switcher h3 {
		color:#fff;
		font-size:13px;
		margin: 10px 0;
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
	}

	#style-switcher {
		background: #333;
		width:205px;
		position:fixed;
		top:145px;
		z-index:999;
		left: -205px;
		border-radius: 0 0 4px 0;
	}

	#style-switcher ul {
		list-style: none;
		padding: 0;
		margin-bottom: 22px;
	}

	#style-switcher div {
		padding: 6px 18px;
	}

	#style-switcher h2 {
		background: #282828;
		color: #fff;
		font-size: 14px;
		line-height: 46px;
		padding: 0 0 0 20px;
		margin-top: 0;
		font-weight: 600;
	}

	#style-switcher h2 a {
		background-color: #282828;
		display: block;
		height: 46px;
		position: absolute;
		right: -46px;
		top: 0;
		width: 46px;
		border-radius: 0 4px 4px 0;
		font-size: 22px;
		color: #fff;
		text-align: center;
	}

	#style-switcher h2 a i{
		position: relative;
		top: 2px;
	}

	.colors {
		list-style:none;
		margin: 0 0px 10px 0;
		overflow: hidden;
	}

	.colors li {
		float:left;
		margin: 4px 2px 0 2px;
	}

	.colors li a {
		display: block;
		width: 17px;
		height: 17px;
		cursor: pointer;
	}

	div.layout-style {
		padding:0 !important;
	}

	.layout-style select {
		width: 164px;
		padding: 7px;
		color: #aaa;
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		margin: 2px 0 25px 0px;
		background-color: #505050;
		border: 0;
		min-height: auto;
	}

	.main     { background: #f91941; }
	.green    { background: #00a948; }
	.blue     { background: #004dda; }
	.orange   { background: #fa5b0f; }
	.navy     { background: #495d7f; }
	.yellow   { background: #ffb400; }
	.peach    { background: #fcab55; }
	.red      { background: #f30c0c; }
	.beige    { background: #bfa980; }
	.cyan     { background: #37b6bd; }
	.celadon  { background: #74aea1; }
	.brown    { background: #784e3d; }
	.cherry   { background: #911938; }
	.gray     { background: #555555; }
	.purple   { background: #6441eb; }
	.olive    { background: #b3c211; }

	.colors li a.active { box-shadow: 0 0 0 2px #fff inset }
	.colors li a { border-radius: 3px; }

	#reset {margin: -5px 0 15px 0px;}
	#reset a.button {
		padding: 7px 14px;
		font-weight: 700;
		font-size: 13px;
	}
	#reset a.button:hover { color: #333; background-color: #fff; }

	@media only screen and (max-width: 1024px) {#style-switcher {display: none;}}

	#style-switcher { display: none; }
/* ---- Escort Locate inline SVG brand logo ---- */
#logo .brand-logo { display: inline-block; vertical-align: middle; height: 40px; width: auto; }
#logo a { display: inline-flex; align-items: center; height: 100%; }
.dashboard-logo .brand-logo { height: 38px; width: auto; }
.brand-logo.footer-logo { height: 40px; width: auto; margin-bottom: 30px; }

/* ======================================================
   Escort Locate — redesigned clean footer
   ====================================================== */
#footer.footer-clean {
	padding: 80px 0 0;
	background-color: #fff;
	border-top: 1px solid rgba(0,0,0,0.08);
}
#footer.footer-clean .footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 44px 30px;
	padding-bottom: 58px;
}
#footer.footer-clean .footer-col { flex: 1 1 160px; min-width: 150px; }
#footer.footer-clean .footer-col.footer-brand { flex: 2 1 300px; padding-right: 40px; }
#footer.footer-clean .footer-logo { height: 40px; width: auto; margin: 0 0 22px; }
#footer.footer-clean .footer-brand p {
	color: #808080;
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 22px;
	max-width: 340px;
}
#footer.footer-clean .footer-contact { color: #808080; font-size: 15px; margin: 0 0 20px; }
#footer.footer-clean .footer-contact a { color: #a9abb0; transition: color 0.2s ease; }
#footer.footer-clean .footer-contact a:hover { color: #ff6b85; }
#footer.footer-clean h4 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #333;
	margin: 6px 0 22px;
}
#footer.footer-clean ul.footer-links { width: 100%; margin: 0; padding: 0; display: block; }
#footer.footer-clean .footer-links li { list-style: none; position: static; margin: 0; }
#footer.footer-clean .footer-links li:before { content: none; }
#footer.footer-clean .footer-links li a {
	padding: 0 0 13px 0;
	display: inline-block;
	color: #66676b;
	font-size: 15px;
	transition: color 0.2s ease, transform 0.2s ease;
}
#footer.footer-clean .footer-links li a:hover { padding-left: 0; color: #f0104a; transform: translateX(3px); }
#footer.footer-clean .social-icons { margin: 0; }
#footer.footer-clean .copyrights {
	margin: 0;
	border-top: 1px solid rgba(0,0,0,0.08);
	padding: 26px 0;
	text-align: center;
	color: #808080;
	font-size: 14px;
}
/* "dark" footer variant — matches the reference screenshot of
   shutterstock.com's actual footer: a true flat near-black bg with white
   headings, gray secondary text/links (brightening to pink on hover as the
   one accent touch), and white social icons/logo. Every page on the site
   carries the .dark class on #footer, so this override is what all 62 HTML
   pages actually render. */
#footer.footer-clean.dark { background-color: #0e0e10; border-top-color: rgba(255,255,255,0.08); }
#footer.footer-clean.dark h4 { color: #ffffff; }
#footer.footer-clean.dark .footer-brand p,
#footer.footer-clean.dark .footer-contact { color: #a9abb0; }
#footer.footer-clean.dark .footer-links li a { color: #a9abb0; }
#footer.footer-clean.dark .footer-links li a:hover { color: #ff6b85; }
#footer.footer-clean.dark .footer-logo text { fill: #ffffff; }
#footer.footer-clean.dark .copyrights { border-top-color: rgba(255,255,255,0.08); color: #a9abb0; }
/* responsive */
@media (max-width: 767px) {
	#footer.footer-clean { padding-top: 55px; }
	#footer.footer-clean .footer-cols { gap: 34px; }
	#footer.footer-clean .footer-col,
	#footer.footer-clean .footer-col.footer-brand { flex: 1 1 100%; padding-right: 0; }
}

/* ---- Home New CTA banner ---- */
.el-cta { background: linear-gradient(90deg, #c40d3d, #e02e52); padding: 55px 0; margin-top: 65px; }
.el-cta h2 { color: #fff; font-size: 26px; margin: 0 0 6px; }
.el-cta p { color: rgba(255,255,255,0.9); font-size: 16px; margin: 0; }
.el-cta-action { display: flex; align-items: center; justify-content: flex-end; }
.el-cta .el-cta-button { background: #fff; color: #f0104a; margin: 0; font-weight: 600; }
.el-cta .el-cta-button:hover { background: #26272b; color: #fff; }
@media (max-width: 767px) {
	.el-cta-action { justify-content: flex-start; margin-top: 22px; }
}

/* ---- Hidden template-pages reference (collapsible, footer) ---- */
.footer-templates {
	border-top: 1px solid rgba(255,255,255,0.08);
	margin: 0;
	padding: 14px 0 0;
}
.footer-templates > summary {
	list-style: none;
	cursor: pointer;
	color: #a9abb0;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 0;
	user-select: none;
	transition: color 0.2s ease;
}
.footer-templates > summary::-webkit-details-marker { display: none; }
.footer-templates > summary:before { content: "\f0da"; font-family: "FontAwesome"; margin-right: 8px; font-size: 11px; }
.footer-templates[open] > summary:before { content: "\f0d7"; }
.footer-templates > summary:hover { color: #f0104a; }
.footer-templates .ft-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 34px;
	padding: 18px 0 6px;
}
.footer-templates .ft-col ul { list-style: none; margin: 0 0 12px; padding: 0; }
.footer-templates .ft-col .ft-head {
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.footer-templates .ft-col li a {
	color: #a9abb0;
	font-size: 13px;
	line-height: 1.9;
	transition: color 0.2s ease;
}
.footer-templates .ft-col li a:hover { color: #f0104a; }

/* ======================================================
   Escort Locate — refined header & navigation polish
   ====================================================== */
#header-container { border-bottom: 1px solid rgba(0,0,0,0.05); }
#logo .brand-logo { display: block; }

/* refined top-level nav links */
#navigation.style-1 ul li a {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1px;
	color: #4a4c50;
	transition: color 0.2s ease;
}
#navigation.style-1 ul li a:hover,
#navigation.style-1 ul li:hover > a { color: #f0104a; }

/* subtle underline indicator on hover / current */
#navigation.style-1 > ul > li > a { position: relative; }
#navigation.style-1 > ul > li > a:before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: #f0104a;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}
#navigation.style-1 > ul > li:hover > a:before,
#navigation.style-1 > ul > li > a.current:before { transform: scaleX(1); }

/* keep the pink pill only off, use clean underline for current */
#navigation.style-1 ul li a.current { background: transparent; color: #f0104a; }

/* softer, more premium dropdown panels */
#navigation.style-1 ul ul {
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(0,0,0,0.12);
	padding: 10px 0;
	min-width: 190px;
	border: 1px solid rgba(0,0,0,0.04);
}
#navigation.style-1 ul ul li a {
	font-size: 14px;
	padding: 9px 22px;
	color: #66676b;
}
#navigation.style-1 ul ul li a:hover { color: #f0104a; padding-left: 26px; }

/* refined header buttons */
.header-widget .sign-in { font-weight: 500; letter-spacing: 0.1px; }
.header-widget .sign-in:hover { color: #f0104a; }
.header-widget a.button.border {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 22px;
	margin: 0;
	border-radius: 10px;
	background: #f0104a;
	color: #fff;
	border: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(240,16,74,0.25);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.header-widget a.button.border i {
	color: #fff;
	margin: 0;
	font-size: 15px;
	line-height: 1;
	position: relative;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255,255,255,0.22);
}
.header-widget a.button.border:hover {
	background: #d40d40;
	color: #fff;
	box-shadow: 0 7px 20px rgba(240,16,74,0.34);
	transform: translateY(-1px);
}

/* ======================================================
   Escort Locate — two-tier header (logo row + full-width nav row)
   Desktop only; mobile keeps the off-canvas menu.
   ====================================================== */
@media (min-width: 1100px) {
	#header-container:not(.dashboard) #header { padding: 0; }
	#header-container:not(.dashboard) #header .container { position: relative; }

	/* row 1: logo left, actions right */
	#header-container:not(.dashboard) .left-side { float: none; width: 100%; display: block; }
	#header-container:not(.dashboard) #logo { float: left; margin: 12px 0 8px 0; }
	#header-container:not(.dashboard) .right-side {
		float: none;
		width: auto;
		position: absolute;
		top: 12px;
		right: 15px;
	}
	#header-container:not(.dashboard) .header-widget { height: auto; top: 0; }

	/* row 2: full-width navigation bar */
	#header-container:not(.dashboard) #navigation.style-1 {
		float: none;
		clear: both;
		width: 100%;
		margin: 0;
		border-top: 1px solid rgba(0,0,0,0.07);
	}
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0;
	}
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li { float: none; margin: 0; }
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li > a {
		padding: 11px 6px;
		font-size: 13px;
		white-space: nowrap;
	}
	/* hover / current underline aligned to the shorter nav row */
	#header-container:not(.dashboard) #navigation.style-1 > ul > li > a:before { left: 6px; right: 6px; bottom: 5px; }

	/* dropdowns drop from the nav row */
	#header-container:not(.dashboard) #navigation.style-1 ul ul { top: 41px; }
	/* keep last item's dropdown from overflowing the right edge */
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li:last-child ul { left: auto; right: 0; }
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li:last-child ul ul { right: 100%; left: auto; }

	/* dashboard keeps its own fixed top bar + sidebar nav; hide the public region nav there */
	#header-container.dashboard #navigation.style-1 { display: none; }
}

/* kill leftover pink pill/indicator on the current nav item (we use the underline) */
@media (min-width: 1100px) {
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li > a.current:after,
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li > a:after { display: none !important; content: none !important; }
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li > a.current,
	#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li:hover > a { color: #f0104a; background: transparent !important; border-radius: 0; }
}

/* ======================================================
   Escort Locate — header quick-link icons (top row)
   ====================================================== */
.header-widget { display: flex; align-items: center; }

/* quick links: icon + label inline, uniform height, all on one baseline */
.header-quick-links {
	display: flex;
	align-items: center;
	gap: 2px;
}
.header-quick-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	color: #5c5e63;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.header-quick-links a i {
	font-size: 15px;
	line-height: 1;
	position: relative;
	top: 0;
	margin: 0;
}
.header-quick-links a span { display: inline; }
.header-quick-links a:hover { background: rgba(240,16,74,0.07); color: #f0104a; }
.header-quick-links a.is-active { background: transparent; color: #f0104a; }

.header-divider {
	width: 1px;
	height: 24px;
	background: rgba(0,0,0,0.1);
	margin: 0 16px;
	display: inline-block;
	flex: 0 0 auto;
}

/* sign-in: same 40px inline row so it sits on the exact same baseline */
.header-widget .sign-in {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	margin: 0 18px 0 0;
	padding: 0;
	color: #1c1d21;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	position: relative;
	top: 0;
	vertical-align: middle;
}
.header-widget .sign-in i {
	font-size: 15px;
	line-height: 1;
	position: relative;
	top: 0;
	margin: 0;
	}
.header-widget .sign-in:hover { color: #f0104a; }
/* sign-in / my-account is now the last item — keep it flush to the edge */
.header-widget .sign-in:last-child { margin-right: 0; }

/* primary CTA — solid pink fill, the site's one deliberate "loud" pink
   moment (its brand accent color used as a full button fill rather
   than a hairline outline or icon-only touch), reserved for this
   single most-important header action so it still reads as an accent
   rather than the site going pink-dominant elsewhere. */
.header-widget .el-add-listing-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 16px;
	border-radius: 50px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
	background: #f0104a;
	border: 1px solid transparent;
	box-shadow: 0 4px 14px rgba(240,16,74,0.34);
	transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.header-widget .el-add-listing-btn i { font-size: 13px; line-height: 1; margin: 0; top: 0; color: #fff; }
.header-widget .el-add-listing-btn:hover {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(240,16,74,0.46);
}
/* "Free" tag — signals no-cost listing without lengthening the main
   label; a quieter translucent chip so it reads as supporting detail,
   not a second competing headline inside the button. Unscoped from
   .header-widget so it also renders correctly on the mobile drawer
   CTA (.el-drawer-foot Add Listing button). */
.el-add-listing-free {
	flex: 0 0 auto;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 20px;
	background: rgba(255,255,255,0.24);
	color: #fff;
}

@media (max-width: 1099px) {
	.header-quick-links, .header-divider { display: none; }
	.header-widget { display: block; }
	.header-widget .el-add-listing-btn { height: 32px; padding: 0 14px; }
}
/* Below 1024px the hamburger takes over (see the ".mmenu-trigger"
   breakpoint) and the Blade mobile drawer footer (".el-drawer-foot")
   owns Add Listing + Sign In. Hide the header widget so it does not
   duplicate those CTAs under the logo. */
@media (max-width: 1024px) {
	.header-widget { display: none; }
}

/* ======================================================
   Escort Locate — modern centered hero
   ====================================================== */
  .el-hero {
  height: auto;
  min-height: 440px;
  background: #ffffff;
  }
  .el-hero .main-search-inner { top: 0; transform: none; padding: 92px 0 80px; }

  /* clean & simple: plain white with one very soft blush tint at the very top */
  .el-hero:before {
  background: linear-gradient(180deg, #fdf2f4 0%, #ffffff 62%) !important;
  }
  /* Map Search + Advanced Search keep the black/white identity — no blush
     pink wash behind the hero title, just a neutral light-gray fade. */
  .el-hero.el-hero-neutral:before {
  background: linear-gradient(180deg, #f6f6f7 0%, #ffffff 62%) !important;
  }
  .el-hero:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(0,0,0,0.06);
  }

  .el-hero-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  }

  .el-hero-title {
  color: #1c1d21;
  font-size: 46px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
  text-shadow: none;
  }

  .el-hero-subtitle {
  color: #f0104a;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 22px;
  }

  .el-hero-lead {
  color: #5c5e63;
  font-size: 16px;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto 34px;
  font-weight: 400;
  }

  /* popular region quick tags */
  .el-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  }
  .el-hero-tags-label {
  color: #86888c;
  font-size: 14px;
  font-weight: 600;
  margin-right: 4px;
  }
  .el-hero-tags a {
  display: inline-block;
  color: #4a4c50;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .el-hero-tags a:hover {
  background: #f0104a;
  border-color: #f0104a;
  color: #fff;
  transform: translateY(-1px);
  }

/* ---- Popular Escorts toolbar (sort / search / filter pills) + banner ----
   Light rounded-pill search bar sitting above the card grid, matching the
   style already used for the light hero fields (.el-mfield's floating
   .el-dd dropdown is reused for the "Sort by" control so it gets the same
   custom dropdown behavior/menu for free — see scripts/custom.js enhance()). */
.el-popular-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 22px;
}
.el-popular-sort,
.el-popular-search,
.el-popular-pill {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 999px;
	background: #fff;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.el-popular-sort { padding: 0 18px; flex: 0 0 auto; position: relative; }
.el-popular-sort-icon { font-size: 14px; color: #9a9ca3; }
.el-popular-sort-label { font-size: 14px; color: #56585e; white-space: nowrap; }
/* strip the block-level .el-mfield trigger chrome — the pill above already
   supplies the border/background, this just needs to sit inline */
.el-popular-sort.el-mfield { margin-bottom: 0; }
.el-popular-sort .el-dd { position: static; }
.el-popular-sort .el-dd-trigger {
	border: none;
	background: transparent;
	padding: 0;
	height: auto;
	gap: 6px;
	box-shadow: none !important;
}
.el-popular-sort .el-dd-label { font-weight: 700; color: #1c1d21; }
.el-popular-sort .el-dd-trigger.is-active .el-dd-label { color: #1c1d21; }
.el-popular-sort .el-dd-menu { left: 0; right: auto; min-width: 190px; }

.el-popular-search { flex: 1 1 320px; padding: 0 18px; }
.el-popular-search i { font-size: 14px; color: #9a9ca3; flex: 0 0 auto; }
.el-popular-search input {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-size: 14px;
	color: #1c1d21;
	font-family: inherit;
}
.el-popular-search input::placeholder { color: #9a9ca3; }
.el-popular-search:focus-within {
	border-color: #1c1d21;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}

.el-popular-pill {
	padding: 0 18px;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: #1c1d21;
	cursor: pointer;
}
.el-popular-pill i { font-size: 14px; color: #808289; transition: color 0.2s ease; }
.el-popular-pill:hover { border-color: rgba(28,29,33,0.3); }
.el-popular-pill.is-active {
	background: #f2f2f3;
	border-color: #1c1d21;
	color: #1c1d21;
}
.el-popular-pill.is-active i { color: #1c1d21; }

/* "Most popular escorts across New Zealand" now reuses the shared
   h3.headline.centered section-title component (see the Latest Escorts
   heading further down this page) instead of its own .el-popular-banner
   card, so it is visually identical on both desktop and mobile — no
   dedicated CSS needed here anymore. */

@media (max-width: 767px) {
	.el-popular-toolbar { gap: 10px; }
	.el-popular-search { flex: 1 1 100%; order: -1; }
}

/* ---- Homepage "Recent blog posts": 4-per-row, flatter/shorter cards than
the theme's default 480px-tall .blog-compact-item (used elsewhere, e.g. the
full Blog listing page) — scoped to .el-home-blog-item so only this section
is affected. ---- */
.el-home-blog-grid {
  row-gap: 4px;
  }
.el-home-blog-item .blog-compact-item {
  height: 190px;
  }
.el-home-blog-item .blog-compact-item-content {
  bottom: 18px;
  padding: 0 20px;
  }
.el-home-blog-item .blog-compact-item-content h3 {
  font-size: 16px;
  line-height: 21px;
  margin-top: 4px;
  }
.el-home-blog-item .blog-compact-item-content p {
  /* Homepage teaser cards show only the title (+ tag/date) — the longer
     description excerpt is reserved for the full Blog listing page. */
  display: none;
  }
.el-home-blog-item .blog-post-tags {
  font-size: 12px;
  }
.el-home-blog-item span.blog-item-tag {
  top: 16px;
  left: 18px;
  font-size: 9px;
  padding: 4px 12px;
  color: #1c1d21;
  background: #fff;
  }
@media (max-width: 767px) {
  .el-home-blog-item .blog-compact-item {
    height: 220px;
    }
  }

/* ---- Homepage content canvas: everything between the hero and the footer
(Browse by City, Latest/Popular Escorts, About, Blog, FAQ, Promo Cards) sits
on one plain white tone. ---- */
.el-home-content {
  background: #fff;
  }
.el-home-blog {
  background: transparent;
  }
.el-home-content .el-faq {
  background: transparent;
  }

/* ---- Promo cards: Get more with Escort Locate+ / 100% verified / Advertise
with us — three dark cards, brand pink accents in place of the reference's
teal, matching the site's existing dark-header colour language. ---- */
.el-promo-cards {
  background: transparent;
	padding: 70px 0;
}
.el-promo-grid {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.el-promo-card {
	flex: 1 1 320px;
	min-width: 0;
	background: #fff;
	border: 1px solid #ececef;
	box-shadow: 0 10px 30px -12px rgba(28,29,33,0.1);
	border-radius: 18px;
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
}
.el-promo-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.el-promo-card-head i {
	font-size: 20px;
	color: #f0104a;
}
.el-promo-card-head h4 {
	font-size: 22px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0;
}
.el-promo-badge {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #1c1d21;
	border-radius: 999px;
	padding: 5px 14px;
	white-space: nowrap;
}
.el-promo-card-lead {
	font-size: 14px;
	color: #6b6c74;
	margin: 8px 0 0;
}
.el-promo-list {
	list-style: none;
	margin: 22px 0 26px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1 1 auto;
}
.el-promo-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14.5px;
	color: #1c1d21;
	line-height: 1.5;
}
.el-promo-list i {
	font-size: 15px;
	color: #f0104a;
	margin-top: 2px;
	flex: 0 0 auto;
}
.el-promo-card .button {
	text-align: center;
	border-radius: 12px;
	font-weight: 700;
	padding: 15px 22px;
}
.el-promo-card .button.el-promo-btn-solid {
  background: #1c1d21;
  border: none;
  color: #fff;
  }
.el-promo-card .button.el-promo-btn-solid:hover { background: #2c2d33; }
.el-promo-card .button.el-promo-btn-outline {
	background: transparent;
	border: 1.5px solid #d8d9de;
	color: #1c1d21;
}
.el-promo-card .button.el-promo-btn-outline:hover {
	border-color: #f0104a;
	color: #f0104a;
}

@media (max-width: 767px) {
	.el-promo-cards { padding: 46px 0; }
	.el-promo-grid { gap: 16px; }
	.el-promo-card { flex: 1 1 100%; padding: 26px 22px; }
	.el-promo-card-head h4 { font-size: 19px; }
}

  @media (max-width: 768px) {
  /* the 440px min-height is taller than the title+lead on phones, and the
     inner isn't vertically centred, so the leftover space dumps a big empty
     gap below the text. Let the content define the height and tighten the
     vertical padding instead. */
  .el-hero { min-height: 0; }
  .el-hero .main-search-inner { padding: 40px 0 36px; }
  .el-hero-title { font-size: 32px; }
  .el-hero-lead { font-size: 15px; margin-bottom: 0; }
  }

  /* compact variant: tighter vertical rhythm above/below the heading + lead (Map & Search pages) */
 .el-hero-compact { min-height: 0; }
 .el-hero-compact .main-search-inner { padding: 58px 0 50px; }
 .el-hero-compact .el-hero-title { margin: 0 0 10px; }
 .el-hero-compact .el-hero-lead { margin: 0 auto; }
 @media (max-width: 768px) {
 .el-hero-compact .main-search-inner { padding: 44px 0 36px; }
 .el-hero-compact .el-hero-lead { margin-bottom: 0; }
 }

 /* flat city-style hero (New Faces/Map Search/Advanced Search/Agencies/
    Sign In/Register/Forgot Password — .el-hero-city.el-hero-flat): the
    440px default .el-hero min-height was sized for the photo the real
    city pages show, so once the photo is removed on these pages it left
    a large empty gap below the title+lead. Reset it the same way
    .el-hero-compact does above and tighten the vertical padding so the
    banner's height matches its (short, single-line) content instead. */
 .el-hero-city.el-hero-flat { min-height: 0; }

/* ======================================================
   Escort Locate — horizontal card scroller (Latest Escorts)
   ====================================================== */
.el-scroller { position: relative; }
.el-scroller-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 6px 4px 22px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;           /* Firefox */
}
.el-scroller-track::-webkit-scrollbar { display: none; }  /* WebKit */

.el-scroller-item {
	flex: 0 0 auto;
	width: 232px;
	scroll-snap-align: start;
	margin-bottom: 0 !important;
}
.el-scroller-item .listing-item {
	border-radius: 4px;
	height: 330px;           /* portrait cards instead of square */
}

/* nav arrows */
.el-scroller-nav {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 20;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.08);
	background: #fff;
	color: #1c1d21;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}
.el-scroller-nav:hover { background: #f0104a; color: #fff; border-color: #f0104a; }
.el-scroller-nav:active { transform: translateY(-50%) scale(0.94); }
.el-scroller-nav i { font-size: 17px; line-height: 1; position: relative; top: 0; }
.el-scroller-nav.prev { left: -12px; }
.el-scroller-nav.next { right: -12px; }
.el-scroller-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
	/* Shrunk from 62vw/260px max — at mobile widths that rendered each
	   card almost full-viewport-wide with a 330px-tall photo, which read
	   as oversized. Sized instead so ~2.5 cards preview at once, same
	   compact feel as the rest of the mobile listing grids. */
	.el-scroller-item { width: 38vw; max-width: 168px; }
	.el-scroller-item .listing-item { height: 220px; }
	.el-scroller-nav { display: none; }
	.el-scroller-track { scroll-snap-type: x proximity; }
	/* Name was still using the base 20px/31px-line-height size sized for
	   the full 260px-wide card, which overflowed onto 2 lines and looked
	   oversized on the shrunk 168px card. Sized down, and the location
	   line underneath is dropped entirely — at this card width it wrapped
	   to 2-3 lines (e.g. "Central North Island") and wasn't needed. */
	.el-scroller-item .listing-item-content h3 { font-size: 15px; line-height: 1.3; }
	.el-scroller-item .listing-item-content span:not(.tag) { display: none; }
	/* The base .listing-item-content padding (32px left, 90px right —
	   the right side reserves room for the like-icon on regular cards)
	   left only ~46px of usable width on this 168px-wide card, forcing
	   the name + verified badge to wrap onto two lines. The like-icon is
	   already hidden on scroller cards, so that reserved space isn't
	   needed; tightened padding to fit the name and badge side by side. */
	.el-scroller-item .listing-item-content { padding: 0 14px; }
}

/* hide favorite (like) icon on the Latest Escorts scroller cards */
.el-scroller-item .like-icon { display: none !important; }

/* Latest Escorts scroller name badge: same blue scalloped "verified" seal
   used on the ad cards (see .el-card-verified), swapped in for the theme's
   default green check-circle so both verified badges match site-wide.
   The h3 is switched to inline-flex so the badge sits cleanly to the
   right of the name, vertically centered — it previously relied on the
   default inline flow, which only wrapped the badge onto its own line
   because the surrounding content box was too narrow to fit both (see
   the padding fix on .el-scroller-item .listing-item-content above). */
.el-scroller-item .listing-item-content h3 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.el-scroller-item .verified-icon {
	width: 16px;
	height: 16px;
	top: 0;
	margin: 0;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%231D9BF0' d='M11 0.5l2.06 1.88 2.72-0.72 1.06 2.58 2.78 0.36-0.2 2.8 2.4 1.5-1.36 2.5 1.36 2.5-2.4 1.5 0.2 2.8-2.78 0.36-1.06 2.58-2.72-0.72L11 21.5l-2.06-1.88-2.72 0.72-1.06-2.58-2.78-0.36 0.2-2.8-2.4-1.5 1.36-2.5-1.36-2.5 2.4-1.5-0.2-2.8 2.78-0.36 1.06-2.58 2.72 0.72z'/%3E%3Cpath fill='%23fff' d='M9.9 14.6 6.4 11.1l1.28-1.28 2.22 2.22 4.42-4.42 1.28 1.28z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.el-scroller-item .verified-icon:before,
.el-scroller-item .verified-icon:after {
	content: none;
}

/* flex grid — equal-height columns, clean wrapping (no float stagger) */
.el-card-grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -7px;
	margin-right: -7px;
}
.el-card-grid > [class*="col-"] {
	float: none;
	display: flex;
	width: 50%;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 16px;
}
/* Bootstrap only assigns col-md-6/col-lg-3 an explicit width at their
   min-width breakpoints (>=992px / >=1200px). Below that the column has
   no width, so as a flex item its auto flex-basis collapses to intrinsic
   content size instead of filling the row — pin it to 50% so mobile/
   tablet shows a 2-up grid below the col-md-6 breakpoint (matches the
   country/city listing pages' 2-per-row mobile layout). On desktop
   (>=992px) restore the intended 4-up grid (col-lg-3 = 25%) — the 50%
   pin above must not leak into desktop widths. */
@media (min-width: 992px) {
	.el-card-grid > [class*="col-"] { width: 25%; }
	/* Desktop's 4-up row has 3 gaps between cards, so the base ��������������7px
	   gutter (14px gap) reads wider than it needs to at this density —
	   tighten it to ±5px (10px gap) so cards sit closer together. */
	.el-card-grid { margin-left: -5px; margin-right: -5px; }
	.el-card-grid > [class*="col-"] { padding-left: 5px; padding-right: 5px; }
}

/* CARD LAYOUT v2: photo panel on top (badges/icons overlaid on the photo
   only) + a transparent info panel below it holding name/age, price,
   location, and description — no card-within-card white background, the
   photo itself is the only "card" surface (rounded corners + shadow). */
.el-card.listing-item-container.compact {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: auto;
	margin-bottom: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	box-shadow: none;
	transition: transform 0.28s ease;
}
.el-card.listing-item-container.compact:hover {
	transform: translateY(-5px);
}

/* photo panel ������������������������������� fixed portrait aspect ratio, badges/icons overlay on it only.
   Carries the card's visual "surface" (rounded corners + shadow) on its own. */
.el-card .listing-item {
	position: relative;
	inset: auto;
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	border-radius: 18px;
	overflow: hidden;
	background: #16171b;
	box-shadow: 0 6px 20px rgba(0,0,0,0.10);
	z-index: 1 !important;   /* override theme's z-index:100 so overlay badges sit on top */
	flex: 0 0 auto;
	transition: box-shadow 0.28s ease;
}
.el-card:hover .listing-item {
	box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}
.el-card .listing-item:before { display: none !important; }
.el-card .listing-item:after { display: none !important; }
.el-card .listing-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none !important;
	display: block;
	min-height: 0;
	max-width: none;
	border-radius: 0;
	transition: transform 0.6s ease;
}
.el-card:hover .listing-item img { transform: scale(1.06) !important; }

/* like/heart button — the only overlay icon now, sits top-right on its own
   (the decorative video icon, time-ago pill, and call button were removed
   per user feedback). */
.el-card .el-card-like {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(20,20,25,0.42);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255,255,255,0.22);
	box-shadow: none;
	color: rgba(255,255,255,0.9);
	font-size: 13px;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.el-card .el-card-like:before {
	content: "\f004";
	font-family: "FontAwesome";
	line-height: 1;
	/* override the base theme's ".liked:before{opacity:0}" rule (same
	   specificity, so source order alone isn't reliable) — our heart glyph
	   IS the icon here (unlike the base component's before/after swap), so
	   it must always stay visible regardless of liked state. */
	opacity: 1;
	/* reset the base theme's ".like-icon:before,:after{position:absolute;
	   top:9px;left:0;right:0}" + ".like-icon:before{transform:scale(0.95)}"
	   — those declarations aren't set by this rule so they were still
	   winning per-property despite our higher selector specificity, pulling
	   the glyph out of flex flow and pinning it at a fixed 9px from the top
	   instead of true center. Restoring position:static lets the parent's
	   flex align-items/justify-content:center actually center the icon. */
	position: static;
	top: auto;
	left: auto;
	right: auto;
	text-align: center;
	/* the glyph's bounding box is already true-centered by the parent's
	   flex centering above, but a heart shape's two rounded lobes carry
	   more visual "weight" than its narrow bottom point, so a
	   mathematically-centered heart optically reads as sitting slightly
	   high. Nudge it down 1px so it looks centered, not just measures
	   centered. */
	transform: translateY(1px);
}
.el-card .el-card-like:after { display: none; }
.el-card .el-card-like:hover {
	background: #f0104a;
	border-color: #f0104a;
	color: #fff;
	transform: scale(1.1);
}
/* liked state — fill the heart pink instead of the base theme's swap
   animation (which relied on the now-hidden :after pseudo-element). */
.el-card .el-card-like.liked {
	background: #fff;
	border-color: #fff;
}
.el-card .el-card-like.liked:before {
	opacity: 1;
	color: #f0104a;
}

/* ---- expired listing state ----
   A minority of cards in the grid carry .is-expired as sample/demo data
   (mirrors the same neutral gray/no-pink treatment already used for the
   full expired state on listings-single-page.html) ��������� photo desaturated
   and dimmed, a small "Expired" corner tag added, price swapped for the
   same label inside the name pill, and the hover zoom/lift disabled
   since there's nothing left to click through to book. */
.el-card.is-expired .listing-item img { filter: grayscale(45%) brightness(0.72); }
.el-card.is-expired:hover .listing-item img { transform: none !important; }
.el-card.is-expired .el-card-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(60,61,66,0.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 5px 11px 5px 9px;
	border-radius: 50px;
}
.el-card.is-expired .el-card-tag i { font-size: 10px; }
.el-card.is-expired .el-card-price { color: rgba(255,255,255,0.6); font-weight: 600; }
.el-card.is-expired .el-card-head h3,
.el-card.is-expired .el-card-age { color: rgba(255,255,255,0.62); }

/* video badge — a small pill on the top-left corner of the photo, shown
   only on cards for listings that have uploaded a video. Kept neutral
   dark/white (not pink) since it's a repeated indicator that can appear
   on many cards at once, per the site's pink-is-accent-only rule.
   top-left (not bottom-left) because the name/price glass pill
   (.el-card-head) is z-index:5 and stretches across almost the full
   width of the photo's bottom edge — a bottom-left badge at z-index:4
   would render underneath it and never actually be visible. top-left
   is safe because the "Expired" tag (the only other thing using that
   corner) is hidden together with this badge on .is-expired cards, so
   the two never need to coexist. */
.el-card .el-card-video-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(28,29,33,0.82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 5px 10px 5px 8px;
	border-radius: 50px;
}
.el-card .el-card-video-badge i {
	font-size: 9px;
	position: relative;
	top: 0.5px;
}
.el-card.is-expired .el-card-video-badge { display: none; }

/* info panel — transparent, normal flow below the photo (no card-within-
   card background box; the outer .el-card already provides the surface) */
.el-card .el-card-body {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	z-index: auto;
	flex: 1 1 auto;
	padding: 10px 18px 18px;
	background: transparent;
}
/* Name/age/verified/price now float as a glass pill on the photo itself
   (bottom edge) rather than sitting in the white info panel below — a
   position:absolute overlay pulled up out of .el-card-body's own box
   via a negative top offset (its nearest positioned ancestor is
   .el-card-body, which sits immediately below the photo with no gap,
   so a negative top reaches back up into the photo's bottom area).
   z-index:5 beats the photo's z-index:1 so the pill paints on top of
   it; removing it from .el-card-body's normal flow also lets the loc/
   desc text below start right at the panel's own top padding instead
   of leaving a gap where this row used to sit. */
.el-card .el-card-head {
	position: absolute;
	/* right:0 (was 10px) — this bar sits flush against the photo's right
	   edge for its whole height, instead of floating with a visible gap
	   before the price. Since the right edge now runs the full height
	   flush with the photo's edge, BOTH right corners are squared to 0
	   (not just the bottom one) — a rounded corner there would just poke
	   past the photo's own edge/corner. Left stays inset at 10px and
	   keeps its rounding, since it isn't flush with anything. */
	left: 10px; right: 0;
	top: -52px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 12px 0 0 12px;
	background: rgba(15,16,20,0.55);
	backdrop-filter: blur(7px) saturate(140%);
	-webkit-backdrop-filter: blur(7px) saturate(140%);
}
.el-card .el-card-head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.2px;
	color: #fff;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: none;
}
.el-card:hover .el-card-head h3 { color: #fff; }
.el-card .el-card-age {
	font-weight: 400;
	color: rgba(255,255,255,0.72);
	font-size: 14px;
}
/* Card verified badge: the classic scalloped/seal "verified" mark (8-point
   rounded burst) in blue with a white checkmark, like social-platform
   verified badges. Rendered as a single inline SVG background so the shape,
   fill, and checkmark are always perfectly aligned. Now sits on white. */
.el-card .el-card-verified {
	position: relative;
	top: 0;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%231D9BF0' d='M11 0.5l2.06 1.88 2.72-0.72 1.06 2.58 2.78 0.36-0.2 2.8 2.4 1.5-1.36 2.5 1.36 2.5-2.4 1.5 0.2 2.8-2.78 0.36-1.06 2.58-2.72-0.72L11 21.5l-2.06-1.88-2.72 0.72-1.06-2.58-2.78-0.36 0.2-2.8-2.4-1.5 1.36-2.5-1.36-2.5 2.4-1.5-0.2-2.8 2.78-0.36 1.06-2.58 2.72 0.72z'/%3E%3Cpath fill='%23fff' d='M9.9 14.6 6.4 11.1l1.28-1.28 2.22 2.22 4.42-4.42 1.28 1.28z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.el-card .el-card-verified:before,
.el-card .el-card-verified:after {
	content: none;
}
.el-card .el-card-price {
	margin-left: auto;
	flex: 0 0 auto;
	color: #fff;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	padding: 0;
	border-radius: 0;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.1px;
	white-space: nowrap;
	box-shadow: none;
}

.el-card .el-card-loc {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	color: #8b8d97;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 8px;
	text-shadow: none;
}
.el-card .el-card-loc i {
	flex: 0 0 auto;
	font-size: 11px;
	color: #c7c9d1;
}
.el-card .el-card-loc .el-card-loc-txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* description — italic gray, clamped to two lines */
.el-card .el-card-desc {
	color: #9a9ca6;
	font-style: italic;
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: auto;
	max-height: none;
	text-shadow: none;
}

@media (max-width: 767px) {
	.el-card-grid { margin-left: -5px; margin-right: -5px; }
	.el-card-grid > [class*="col-"] { padding-left: 5px; padding-right: 5px; margin-bottom: 10px; }
}
/* Two-up cards get noticeably narrower than the desktop 4-up grid, so the
   info panel text/badges/price need to shrink to match. */
@media (max-width: 575px) {
	.el-card-grid { margin-left: -4px; margin-right: -4px; }
	.el-card-grid > [class*="col-"] { padding-left: 4px; padding-right: 4px; margin-bottom: 8px; }
	.el-card .listing-item { border-radius: 14px; }
	.el-card .el-card-body { padding: 8px 10px 10px; }
	/* right:0 + both right corners squared to 0, same fix as the desktop
	   rule above (the bar runs flush with the photo's right edge for its
	   full height at this breakpoint too). */
	.el-card .el-card-head { top: -44px; left: 6px; right: 0; padding: 7px 10px; gap: 4px; border-radius: 10px 0 0 10px; }
	.el-card .el-card-head h3 { font-size: 14px; }
	.el-card .el-card-age { font-size: 12.5px; }
	.el-card .el-card-verified { width: 13px; height: 13px; }
	.el-card .el-card-desc { font-size: 11.5px; line-height: 1.4; -webkit-line-clamp: 2; }
	.el-card .el-card-loc { font-size: 10.5px; margin-bottom: 4px; }
	.el-card .el-card-loc i { font-size: 9.5px; }
	.el-card .el-card-price { font-size: 13px; }
	.el-card .el-card-like { top: 8px; right: 8px; width: 26px; height: 26px; font-size: 11px; }
	.el-card.is-expired .el-card-tag { top: 8px; left: 8px; font-size: 10px; padding: 4px 9px 4px 8px; }
	}

/* subtle panel to lift the Hottest Escorts section off the dark page background */
.el-hottest-section {
	background: rgba(255,255,255,0.03);
	border-top: 1px solid rgba(255,255,255,0.08);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ======================================================
   Escort Locate — FAQ accordion
   ====================================================== */
.el-faq { padding: 78px 0 84px; background: #fbfbfc; border-top: 1px solid rgba(0,0,0,0.05); }
/* Standalone content pages (FAQ, How to Start, Our Partners, Contact) sit
   below a breadcrumb, so they need far less top/bottom padding than the
   homepage FAQ block. Scoped to the .margin-top-35 variant so the homepage
   .el-faq is untouched. */
.el-faq.margin-top-35 { padding-top: 34px; padding-bottom: 52px; }
/* FAQ / How to Start / Our Partners / Contact: white content background
   below the titlebar, matching page-exchange-links.html. Scoped to its own
   modifier class so login/register/forgot-password (which also use
   .margin-top-35) keep their existing light-gray background. */
.el-faq.el-faq-flat { background: #fff; border-top-color: rgba(0,0,0,0.04); }

/* Homepage FAQ: two-column grid spanning the full .container width (matching
   every other homepage section) instead of the old col-md-10-offset-1 column,
   which sat narrower and off-centre from the rest of the page. The 5th/last
   item spans both columns via .el-faq-item-wide so the odd item out reads as
   an intentional closing row rather than a dangling orphan. */
.el-faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: 18px;
	}
.el-faq-item-wide { grid-column: 1 / -1; }

.el-faq-item {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.el-faq-item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,20,30,0.07); }
.el-faq-item.is-open { box-shadow: 0 14px 32px rgba(240,16,74,0.1); border-color: rgba(240,16,74,0.3); transform: translateY(-2px); }
.el-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	text-align: left;
	background: none;
	border: 0;
	margin: 0;
	padding: 26px 28px;
	font-size: 16.5px;
	font-weight: 600;
	color: #1c1d21;
	cursor: pointer;
	line-height: 1.4;
	transition: color 0.2s ease;
}
.el-faq-q-text { flex: 1 1 auto; }
.el-faq-q:hover { color: #f0104a; }
.el-faq-item.is-open .el-faq-q { color: #f0104a; }
.el-faq-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: #f7f4f5;
	transition: background 0.25s ease, transform 0.3s ease;
}
.el-faq-item.is-open .el-faq-toggle { background: #f0104a; transform: rotate(180deg); }
.el-faq-toggle:before,
.el-faq-toggle:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	color: #1c1d21;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease, color 0.25s ease;
}
.el-faq-toggle:before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }    /* horizontal */
.el-faq-toggle:after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }    /* vertical */
.el-faq-item.is-open .el-faq-toggle:before,
.el-faq-item.is-open .el-faq-toggle:after { color: #fff; }
.el-faq-item.is-open .el-faq-toggle:after { transform: scaleY(0); opacity: 0; }

.el-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.el-faq-a p {
	margin: 0;
	padding: 0 28px 26px;
	color: #6c6e73;
	font-size: 15px;
	line-height: 1.7;
}
@media (max-width: 767px) {
	.el-faq-grid { grid-template-columns: 1fr; gap: 12px; }
	.el-faq-q { gap: 14px; padding: 18px 18px; font-size: 14.5px; line-height: 1.45; }
	.el-faq-toggle { width: 28px; height: 28px; }
	.el-faq-toggle:before { width: 11px; margin: -1px 0 0 -5.5px; }
	.el-faq-toggle:after { height: 11px; margin: -5.5px 0 0 -1px; }
	.el-faq-a p { padding: 0 18px 18px; font-size: 13.5px; line-height: 1.6; }
}

/* ======================================================
   Escort Locate — How to Start step cards
   ====================================================== */
.el-steps { margin-top: 6px; }
.el-step {
	display: block;
	position: relative;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 16px;
	padding: 46px 28px 34px;
	height: 100%;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.el-step:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(0,0,0,0.10);
	border-color: rgba(240,16,74,0.2);
}
.el-step-num {
	position: absolute;
	top: 18px;
	right: 22px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: rgba(240,16,74,0.12);
	letter-spacing: -1px;
}
.el-step-icon {
	width: 74px;
	height: 74px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: rgba(28,29,33,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease;
}
.el-step-icon i { font-size: 34px; color: #1c1d21; line-height: 1; }
.el-step:hover .el-step-icon { background: #1c1d21; }
.el-step:hover .el-step-icon i { color: #fff; }
.el-step h4 {
	font-size: 19px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 10px;
}
.el-step p {
	color: #74767b;
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
}
@media (max-width: 767px) {
	.el-step { margin-bottom: 22px; }
}

/* ======================================================
   Footer — keep only the X (formerly Twitter) channel
   ====================================================== */
#footer .social-icons li:has(> a.facebook),
#footer .social-icons li:has(> a.gplus),
#footer .social-icons li:has(> a.vimeo) { display: none !important; }

/* Render the remaining Twitter link as a modern X logo */
#footer .social-icons li a.twitter { background: transparent !important; }
#footer .social-icons li a.twitter i,
#footer .social-icons li a.twitter:before { opacity: 0 !important; }
#footer .social-icons li a.twitter::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a0a0a0' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
	transition: background-image 0.2s ease;
}
#footer .social-icons li a.twitter:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* ======================================================
   City page — Near Me / More Filters toolbar
   ====================================================== */
.el-filterbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.el-filter { position: relative; }
.el-filter-end { margin-left: auto; }
.el-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 50px;
	padding: 11px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: #1c1d21;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.el-filter-btn i { color: #1c1d21; font-size: 15px; }
.el-filter-btn:hover { border-color: rgba(28,29,33,0.4); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.el-filter-caret {
	width: 8px;
	height: 8px;
	margin-left: 2px;
	border-right: 2px solid #1c1d21;
	border-bottom: 2px solid #1c1d21;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.25s ease;
}
.el-filter.is-open .el-filter-btn { border-color: #1c1d21; color: #1c1d21; }
.el-filter.is-open .el-filter-caret { transform: rotate(-135deg) translateY(-1px); }

/* dropdown panel */
.el-filter-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 40;
	min-width: 280px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(0,0,0,0.14);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.el-filter-menu-right { left: auto; right: 0; min-width: 320px; }
.el-filter.is-open .el-filter-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.el-filter-menu-title {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #9a9ca1;
	margin-bottom: 11px;
}
.el-filter-group + .el-filter-group { margin-top: 18px; }
.el-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.el-filter-chips a {
	display: inline-block;
	padding: 7px 14px;
	background: #f5f5f7;
	border: 1px solid transparent;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	color: #55575c;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.el-filter-chips a:hover {
	background: rgba(240,16,74,0.08);
	border-color: rgba(240,16,74,0.3);
	color: #f0104a;
}

@media (max-width: 767px) {
	.el-filter-menu, .el-filter-menu-right { min-width: 84vw; }
	.el-filter-menu-right { right: auto; left: 0; }
	.el-filter-btn { padding: 10px 15px; font-size: 13.5px; }
}

/* ======================================================
   City page — unified search bar (suburb + filters + tags)
   ====================================================== */
.el-searchbar {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.09);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
	padding: 10px 10px 10px 20px;
}
.el-searchbar-row {
	display: flex;
	align-items: center;
	gap: 0;
}

/* keyword input — grows to fill */
.el-search-field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 14px;
}
.el-search-field i { color: #1c1d21; font-size: 16px; flex: 0 0 auto; }
.el-search-field input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 15px;
	color: #1c1d21;
	height: 44px;
	padding: 0;
	box-shadow: none;
	margin: 0;
}
.el-search-field input::placeholder { color: #9a9ca1; }

/* dropdown segments — borderless, divided by hairlines */
.el-searchbar .el-search-seg { position: relative; flex: 0 0 auto; }
.el-searchbar .el-search-seg .el-filter-btn {
	border: 0;
	border-left: 1px solid rgba(0,0,0,0.10);
	border-radius: 0;
	background: transparent;
	padding: 11px 18px;
	color: #1c1d21;
	box-shadow: none;
}
.el-searchbar .el-search-seg .el-filter-btn:hover { color: #f0104a; box-shadow: none; }
.el-searchbar .el-search-seg.is-open .el-filter-btn { color: #1c1d21; border-left-color: rgba(0,0,0,0.10); }
.el-searchbar .el-filter-menu { top: calc(100% + 16px); }

/* search button */
.el-search-go {
	flex: 0 0 auto;
	margin-left: 12px;
	border: 0;
	background: #1c1d21;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 0 30px;
	height: 48px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: 0 6px 16px rgba(28,29,33,0.24);
}
.el-search-go:hover { background: #33343a; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(28,29,33,0.3); }

/* popular quick tags row */
.el-search-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 14px 10px 4px;
	border-top: 1px solid rgba(0,0,0,0.07);
}
.el-search-tags-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #9a9ca1;
	margin-right: 4px;
}
.el-search-tags a {
	display: inline-block;
	padding: 6px 14px;
	background: #f5f5f7;
	border: 1px solid transparent;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	color: #55575c;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.el-search-tags a:hover {
	background: rgba(240,16,74,0.08);
	border-color: rgba(240,16,74,0.3);
	color: #f0104a;
}

@media (max-width: 767px) {
	.el-searchbar { padding: 14px; }
	.el-searchbar-row { flex-wrap: wrap; gap: 10px; }
	.el-search-field {
		flex: 1 1 100%;
		padding-right: 0;
		border: 1px solid rgba(0,0,0,0.10);
		border-radius: 10px;
		padding: 0 14px;
	}
	.el-searchbar .el-search-seg { flex: 1 1 auto; }
	.el-searchbar .el-search-seg .el-filter-btn {
		width: 100%;
		justify-content: center;
		border: 1px solid rgba(0,0,0,0.10);
		border-radius: 10px;
	}
	.el-search-go { flex: 1 1 100%; margin-left: 0; }
	.el-searchbar .el-filter-menu, .el-searchbar .el-filter-menu-right { min-width: 100%; left: 0; right: auto; }
	/* Each filter's dropdown panel is position:absolute so it doesn't push
	   the other filter buttons/search button down ������� on narrow screens they
	   sit stacked directly below and would peek out from behind the open
	   panel. Hide the other segments/search button while one is open so
	   the panel has a clean surface underneath it. */
	.el-searchbar-row:has(.el-search-seg.is-open) .el-search-seg:not(.is-open),
	.el-searchbar-row:has(.el-search-seg.is-open) .el-search-go {
		display: none;
	}
}

/* Hot Auckland Tags — service tags with count badges */
.el-filter-menu .el-filter-chips-count {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 6px;
	min-width: 260px;
}
.el-filter-chips-count a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 14px;
	border-radius: 10px;
	text-align: left;
}
.el-chip-count {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 1px 8px;
	border-radius: 50px;
	background: rgba(240,16,74,0.10);
	color: #f0104a;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}
.el-filter-chips-count a:hover .el-chip-count {
	background: #f0104a;
	color: #fff;
}

/* Near Me — vertical distance list */
.el-filter-menu .el-filter-chips-list {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 4px;
	min-width: 200px;
}
.el-filter-chips-list a {
	display: block;
	width: 100%;
	padding: 9px 14px;
	border-radius: 10px;
	text-align: left;
	background: transparent;
}
.el-filter-chips-list a:hover {
	background: rgba(240,16,74,0.08);
	border-color: transparent;
	color: #f0104a;
}

/* City page — breadcrumb */
.el-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 500;
}
.el-breadcrumb a {
	color: #808289;
	transition: color 0.18s ease;
}
.el-breadcrumb a:hover { color: #f0104a; }
.el-breadcrumb-sep {
	width: 6px;
	height: 6px;
	border-right: 2px solid #c7c8cc;
	border-top: 2px solid #c7c8cc;
	transform: rotate(45deg);
}
.el-breadcrumb-current { color: #1c1d21; font-weight: 600; }

/* Simple page hero — light gray band with the title on the left and the
   breadcrumb on the right, replacing the dark .el-hero-compact banner on
   the informational/footer pages (FAQ, Blog, How to Start, Our Partners,
   Contact, Link Exchange, Sitemap, Terms, Privacy). Reuses the existing
   .el-breadcrumb component so the pink hover state stays consistent. */
.el-titlebar {
	background: #f7f7f8;
	padding: 46px 0;
	margin-bottom: 40px;
}
.el-titlebar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.el-titlebar-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -0.01em;
}
.el-titlebar .el-breadcrumb { margin: 0; flex: 0 0 auto; }

@media (max-width: 767px) {
	.el-titlebar { padding: 30px 0; margin-bottom: 26px; }
	.el-titlebar-row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.el-titlebar-title { font-size: 23px; }
}

/* City page — three independent single-search pills (dropdowns only).
   Instead of one linked card split by dividers, each option is its own
   standalone bordered pill separated by gaps, so it reads as separate
   searches rather than one faceted/linked query. */
.el-searchbar-nofield {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.el-searchbar-nofield .el-searchbar-row {
	gap: 12px;
	flex-wrap: wrap;
}
/* Now that the Search button is gone, the 3 pills are the only content
   in the row — give them equal flex-grow so they share the FULL
   container width edge-to-edge instead of sizing to their own content
   and stacking at the left with dead space on the right. */
.el-searchbar-nofield .el-search-seg {
	flex: 1 1 0;
	min-width: 0;
	text-align: left;
}
/* each segment becomes its own rounded pill — fully-rounded "capsule"
   shape with a circular icon badge reads more like a modern app filter
   control than the earlier boxy 12px-radius card. */
.el-searchbar-nofield .el-search-seg .el-filter-btn {
	width: 100%;
	justify-content: center;
	gap: 12px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 24px rgba(0,0,0,0.05);
	padding: 14px 22px;
	font-size: 15px;
	letter-spacing: -0.01em;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* Icon sits in its own circular badge instead of a bare glyph — gives the
   control more visual weight/polish and a clear focal point that can
   invert color on hover/open without needing a second accent color on
   the label text. */
.el-searchbar-nofield .el-search-seg .el-filter-btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f4f4f5;
	color: #1c1d21;
	font-size: 13px;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-searchbar-nofield .el-search-seg .el-filter-btn:hover {
	color: #f0104a;
	border-color: rgba(240,16,74,0.35);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 14px 30px rgba(0,0,0,0.09);
	transform: translateY(-2px);
}
.el-searchbar-nofield .el-search-seg .el-filter-btn:hover i {
	background: rgba(240,16,74,0.12);
	color: #f0104a;
}
.el-searchbar-nofield .el-search-seg.is-open .el-filter-btn {
	color: #f0104a;
	border-color: #f0104a;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 14px 30px rgba(0,0,0,0.09);
}
.el-searchbar-nofield .el-search-seg.is-open .el-filter-btn i {
	background: #f0104a;
	color: #fff;
}
/* smoother, slightly larger chevron to match the more refined pill */
.el-searchbar-nofield .el-search-seg .el-filter-caret {
	width: 7px;
	height: 7px;
	margin-left: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.55;
}
@media (max-width: 767px) {
	/* Was 4 full-width stacked rows (All Suburbs / Near Me / Trending /
	   Search) eating ~250px of vertical space before any ad cards showed.
	   Compact layout: the 3 filter pills share one row (equal thirds),
	   Search sits on its own full-width row below — cuts the block to
	   ~2 rows tall so listing cards move up. Opening a filter still hides
	   its siblings via the existing `:has(.el-search-seg.is-open)` rule
	   above (unscoped to `.el-searchbar-row`, applies here too). */
	.el-searchbar-nofield .el-searchbar-row { gap: 8px; }
	.el-searchbar-nofield .el-search-seg { flex: 1 1 0; min-width: 0; }
	.el-searchbar-nofield .el-search-seg .el-filter-btn {
		padding: 9px 8px;
		gap: 6px;
		font-size: 12px;
	}
	.el-searchbar-nofield .el-search-seg .el-filter-btn i {
		width: 22px;
		height: 22px;
		font-size: 10.5px;
	}
	.el-searchbar-nofield .el-search-seg .el-filter-btn span:not(.el-filter-caret) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.el-searchbar-nofield .el-search-seg .el-filter-caret {
		width: 5px;
		height: 5px;
		margin-left: 0;
		flex: 0 0 auto;
	}
	.el-searchbar-nofield .el-search-go { flex: 1 1 100%; margin-left: 0; height: 46px; }
	/* ROOT CAUSE of a sideways-scrollable blank gap on city pages: the
	   generic `.el-searchbar .el-filter-menu-right { left:0; right:auto }`
	   mobile rule above left-anchors the panel to ITS OWN narrow flex
	   column — fine for pages with a wider/left-positioned trigger, but
	   here the 3 pills are equal thirds and "Trending" (the -right
	   variant's trigger) sits at the far right edge of the row, so its
	   panel (which naturally sizes to ~300px of content, well over the
	   ~115px column) hangs off the right edge of the viewport. It's
	   only hidden via opacity/visibility (not display:none) while
	   closed, so that overflow still counts toward scrollWidth even
	   with nothing open. Fix: keep it right-anchored (matching the
	   desktop default) so it grows LEFTWARD from the column's right
	   edge — which sits near the viewport's own right edge ������������������� instead
	   of rightward off-screen. */
	.el-searchbar-nofield .el-filter-menu-right { left: auto; right: 0; }
	/* Tighten the whitespace above and below the pill row itself — the
	   generic site-wide `.margin-top-35`/`.margin-top-55` utility classes
	   themselves declare `margin-top:35px/55px !important` (see base rule),
	   so any override — regardless of selector specificity — MUST also
	   use `!important` or it's silently ignored by the cascade. Scoped
	   narrowly (via :has() for the container above the bar, and the
	   page-unique `#listings` id for the container below it) so the
	   shared utility classes stay untouched everywhere else they're used. */
	.container.margin-top-35:has(.el-searchbar-nofield) { margin-top: 18px !important; }
	.container.margin-top-55#listings { margin-top: 26px !important; }
}

/* ======================================================
   FAQ page — intro, sidebar nav, category headers, item
   rhythm & contact CTA
   ====================================================== */

/* Short intro line above the two-column layout — gives the page a
   breathing-room opener instead of jumping straight into dense cards. */
.el-faq-intro {
	max-width: 640px;
	margin: 0 0 40px;
	color: #6b6d74;
	font-size: 16px;
	line-height: 1.65;
}

/* Sidebar (category jump nav) + content column. Replaces the old
   2-column masonry — that layout let column heights drift far apart
   (one side finishing much shorter than the other) and gave every
   card zero breathing room, which is what read as cramped/messy.
   A single content column with generous item spacing plus a sticky
   category index keeps every card legible and lets people jump
   straight to a topic. */
.el-faq-layout {
	display: grid;
	grid-template-columns: 252px 1fr;
	gap: 56px;
	align-items: start;
}

.el-faq-nav-sticky {
	position: sticky;
	top: 32px;
}
.el-faq-nav-label {
	margin: 0 0 12px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #b3b4ba;
}
.el-faq-nav-link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: 10px;
	margin-bottom: 2px;
	color: #55575e;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-faq-nav-link i {
	flex: 0 0 auto;
	width: 18px;
	font-size: 15px;
	text-align: center;
	color: #b7b8be;
	transition: color 0.2s ease;
}
.el-faq-nav-link span:first-of-type { flex: 1 1 auto; }
.el-faq-nav-count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: #c2c3c9;
}
.el-faq-nav-link:hover { background: rgba(0,0,0,0.045); color: #1c1d21; }
.el-faq-nav-link.is-active { background: rgba(240,16,74,0.09); color: #f0104a; }
.el-faq-nav-link.is-active i,
.el-faq-nav-link.is-active .el-faq-nav-count { color: #f0104a; }

.el-faq-cat {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	scroll-margin-top: 24px;
}
.el-faq-cat-badge {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(240,16,74,0.10);
	color: #f0104a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.el-faq-cat h4 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #1c1d21;
}
.el-faq-cat .el-faq-cat-line {
	flex: 1 1 auto;
	height: 1px;
	background: rgba(0,0,0,0.08);
}

/* Each category stays a self-contained block in a single flowing
   column, with real spacing between cards so every question reads
   as its own distinct row rather than a fused stack. */
.el-faq-group {
	scroll-margin-top: 24px;
	margin-bottom: 48px;
}
.el-faq-group:last-child { margin-bottom: 0; }
.el-faq-group .el-faq-item { margin-bottom: 14px; }
.el-faq-group .el-faq-item:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
	.el-faq-layout { grid-template-columns: 1fr; gap: 0; }
	.el-faq-nav { display: none; }
	.el-faq-group { margin-bottom: 36px; }
}

/* Contact CTA card at the bottom of the FAQ page */
.el-faq-cta {
	margin-top: 60px;
	background: linear-gradient(135deg, #2b2d33 0%, #1c1d21 100%);
	border-radius: 18px;
	padding: 46px 40px;
	text-align: center;
	color: #fff;
}
.el-faq-cta h3 {
	color: #fff;
	font-size: 24px;
	margin: 0 0 10px;
}
.el-faq-cta p {
	color: rgba(255,255,255,0.66);
	font-size: 15.5px;
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto 26px;
}
.el-faq-cta .el-faq-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
.el-faq-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 28px;
	border-radius: 11px;
	font-size: 15px;
	font-weight: 700;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-faq-cta-btn.primary {
	background: #1c1d21;
	color: #fff;
	box-shadow: 0 8px 20px rgba(28,29,33,0.28);
}
.el-faq-cta-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,29,33,0.36); }
.el-faq-cta-btn.ghost {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
}
.el-faq-cta-btn.ghost:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }

/* ======================================================
   Advertise Intro page (advertise-intro.html)
   ====================================================== */
.el-adi-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}
.el-adi-hero-actions .el-faq-cta-btn.primary { background: #f0104a; box-shadow: 0 8px 20px rgba(240,16,74,0.28); }
.el-adi-hero-actions .el-faq-cta-btn.primary:hover { box-shadow: 0 12px 26px rgba(240,16,74,0.36); }
.el-adi-hero-actions .el-faq-cta-btn.ghost { background: #1c1d21; color: #fff; border: none; }
.el-adi-hero-actions .el-faq-cta-btn.ghost:hover { background: #33343a; }

.el-adi-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.el-adi-benefit {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 16px;
	padding: 32px 28px;
}
.el-adi-benefit i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #f4f4f5;
	color: #1c1d21;
	font-size: 22px;
	margin-bottom: 18px;
}
.el-adi-benefit h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 8px;
}
.el-adi-benefit p {
	font-size: 14.5px;
	line-height: 1.65;
	color: #6a6b70;
	margin: 0;
}

.el-adi-help {
	margin-top: 22px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: #f8f8f9;
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 16px;
	padding: 26px 30px;
}
.el-adi-help i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #1c1d21;
	color: #fff;
	font-size: 20px;
}
.el-adi-help h4 {
	font-size: 16px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 4px;
}
.el-adi-help p {
	font-size: 14px;
	color: #6a6b70;
	margin: 0 0 4px;
}
.el-adi-help-hours {
	font-size: 12.5px;
	color: #9a9ba0;
}
.el-adi-help-btn {
	margin-left: auto;
	flex-shrink: 0;
	background: #1c1d21;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 10px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.el-adi-help-btn:hover { background: #33343a; transform: translateY(-2px); }

@media (max-width: 991px) {
	.el-adi-benefits { grid-template-columns: repeat(2, 1fr); }
	.el-adi-help { flex-wrap: wrap; }
	.el-adi-help-btn { margin-left: 0; width: 100%; text-align: center; }
}
@media (max-width: 560px) {
	.el-adi-benefits { grid-template-columns: 1fr; }
	.el-adi-hero-actions { gap: 10px; }
	.el-adi-hero-actions .el-faq-cta-btn { flex: 1 1 auto; justify-content: center; }
}

/* ======================================================
   Blog listing page — card grid
   ====================================================== */
.el-blog-kicker {
	display: inline-block;
	margin: 0 0 14px;
	padding: 5px 14px;
	border-radius: 50px;
	background: rgba(240,16,74,0.16);
	color: #ff6b8c;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.el-blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}
.el-blog-filter-btn {
	appearance: none;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	color: #56585e;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 50px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.el-blog-filter-btn:hover {
	border-color: rgba(240,16,74,0.4);
	color: #f0104a;
	transform: translateY(-1px);
}
.el-blog-filter-btn.is-active {
	background: #1c1d21;
	border-color: #1c1d21;
	color: #fff;
}

.el-blog-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
@media (max-width: 850px) { .el-blog-featured { grid-template-columns: 1fr; } }
.el-blog-featured-media {
	position: relative;
	display: block;
	min-height: 280px;
	overflow: hidden;
	background: #f2f2f4;
}
.el-blog-featured-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.el-blog-featured:hover .el-blog-featured-media img { transform: scale(1.04); }
.el-blog-featured-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 46px;
}
@media (max-width: 640px) { .el-blog-featured-body { padding: 30px 26px; } }
.el-blog-featured-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #f0104a;
	margin-bottom: 12px;
}
.el-blog-featured-title {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 14px;
}
.el-blog-featured-title a { color: inherit; }
.el-blog-featured-title a:hover { color: #f0104a; }
.el-blog-featured-excerpt {
	font-size: 15.5px;
	line-height: 1.75;
	color: #7c7e85;
	margin: 0 0 22px;
}

.el-blog-section-title {
	font-size: 21px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 26px;
}

.el-blog-empty {
	text-align: center;
	padding: 50px 20px;
	color: #9a9ba1;
	font-size: 15px;
}

.el-blog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 44px;
}
.el-blog-pagination[hidden] { display: none; }
.el-blog-page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
}
.el-blog-page-arrow,
.el-blog-page-num {
	appearance: none;
	border: 1px solid rgba(0,0,0,0.1);
	background: #fff;
	color: #52555c;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.el-blog-page-arrow {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.el-blog-page-arrow svg { width: 16px; height: 16px; }
.el-blog-page-arrow:hover:not(:disabled) { border-color: #f0104a; color: #f0104a; }
.el-blog-page-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.el-blog-page-num {
	min-width: 40px;
	height: 40px;
	padding: 0 4px;
	border-radius: 10px;
}
.el-blog-page-num:hover { border-color: #f0104a; color: #f0104a; }
.el-blog-page-num.is-active {
	background: #1c1d21;
	border-color: #1c1d21;
	color: #fff;
}
@media (max-width: 480px) {
	.el-blog-pagination { gap: 6px; }
	.el-blog-page-numbers { gap: 4px; }
	.el-blog-page-arrow, .el-blog-page-num { width: 36px; height: 36px; min-width: 36px; }
}

.el-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
}

.el-blog-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.el-blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 36px rgba(0,0,0,0.12);
	border-color: transparent;
}
.el-blog-card-media {
	position: relative;
	display: block;
	height: 300px;
	overflow: hidden;
	background: #f2f2f4;
}
@media (max-width: 640px) { .el-blog-card-media { height: 220px; } }
.el-blog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.el-blog-card:hover .el-blog-card-media img { transform: scale(1.05); }

/* Date + views overlaid on the thumbnail (moved off the footer meta line).
   Sits over a bottom scrim so the glass pills stay legible on any image. */
.el-blog-card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 14px;
	pointer-events: none;
	background: linear-gradient(to top, rgba(10,10,14,0.72) 0%, rgba(10,10,14,0.32) 45%, rgba(10,10,14,0) 100%);
}
.el-blog-overlay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	background: rgba(22,22,28,0.5);
	border: 1px solid rgba(255,255,255,0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.el-blog-overlay .el-blog-meta-icon { width: 13px; height: 13px; opacity: 0.9; }
.el-blog-overlay-views { background: rgba(240,16,74,0.85); border-color: rgba(255,255,255,0.28); }
@media (max-width: 640px) {
	.el-blog-card-overlay { padding: 11px; }
	.el-blog-overlay { padding: 5px 10px; font-size: 11px; }
}

.el-blog-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 22px 24px;
}
.el-blog-card-title {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 10px;
}
.el-blog-card-title a { color: inherit; }
.el-blog-card-title a:hover { color: #f0104a; }
.el-blog-card-excerpt {
	font-size: 14.5px;
	line-height: 1.7;
	color: #808289;
	margin: 0 0 18px;
}
.el-blog-card-read {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 700;
	color: #f0104a;
	white-space: nowrap;
}
.el-blog-card-read i { transition: transform 0.2s ease; }
a.el-blog-card-read, a.el-blog-card-read:hover { color: #f0104a; }
a.el-blog-card-read:hover { color: #d10d40; }
.el-blog-card:hover .el-blog-card-read i { transform: translateX(4px); }

/* Post meta line: date | tags | views ... read article */
.el-blog-card-meta-line,
.el-blog-featured .el-blog-card-meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(0,0,0,0.06);
	font-size: 12.5px;
	color: #9a9ba1;
}
.el-blog-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.el-blog-meta-item + .el-blog-meta-item {
	padding-left: 10px;
	border-left: 1px solid rgba(0,0,0,0.12);
}
.el-blog-meta-tags { white-space: normal; }
.el-blog-meta-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.el-blog-meta-tag-link { color: #1c1d21; text-decoration: none; }
.el-blog-meta-tag-link:hover { color: #f0104a; text-decoration: underline; }

/* Two-column layout: main content + sidebar */
.el-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 46px;
	align-items: start;
}
@media (max-width: 991px) {
	.el-blog-layout { grid-template-columns: 1fr; }
}
.el-blog-main { min-width: 0; }

.el-blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 26px;
	position: sticky;
	top: 100px;
}
@media (max-width: 991px) {
	.el-blog-sidebar { position: static; }
}

.el-blog-widget {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 16px;
	padding: 26px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}
.el-blog-widget-title {
	font-size: 16px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Search widget */
.el-blog-search {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.el-blog-search:focus-within {
	border-color: rgba(0,0,0,0.22);
	box-shadow: 0 0 0 4px rgba(0,0,0,0.04);
}
.el-blog-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	padding: 14px 12px 14px 18px;
	font-size: 14px;
	color: #1c1d21;
	background: transparent;
}
.el-blog-search input::placeholder { color: #9a9ea6; }
.el-blog-search input::-webkit-search-cancel-button { display: none; }
.el-blog-search button {
	appearance: none;
	border: none;
	flex-shrink: 0;
	background: transparent;
	color: #9a9ea6;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease;
}
.el-blog-search button svg { width: 18px; height: 18px; }
.el-blog-search button:hover { color: #1c1d21; }

/* Tags widget */
.el-blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.el-blog-tag {
	appearance: none;
	border: none;
	background: #1c1d21;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.el-blog-tag span { opacity: 0.85; }
.el-blog-tag:hover { background: #33343a; transform: translateY(-1px); color: #fff; }
.el-blog-tag.is-active { background: #1c1d21; }

/* ===========================================================
   Blog article (single) page  -  el-article-*
=========================================================== */
.el-article-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 96px 0 56px;
}
.el-article-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,15,18,0.35) 0%, rgba(20,15,18,0.55) 45%, rgba(18,13,16,0.9) 100%);
}
.el-article-hero .container { position: relative; z-index: 2; }
.el-article-hero-content { max-width: 860px; }
.el-article-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.el-article-hero-tag {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 50px;
	background: rgba(255,255,255,0.16);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	transition: background 0.2s ease;
}
.el-article-hero-tag:hover { background: #f0104a; }
.el-article-hero-title {
	color: #fff;
	font-size: 40px;
	line-height: 1.18;
	font-weight: 800;
	margin: 0 0 22px;
	letter-spacing: -0.5px;
}
.el-article-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: rgba(255,255,255,0.82);
	font-size: 14px;
}
.el-article-hero-author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: #fff;
}
.el-article-hero-author img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255,255,255,0.5);
}
.el-article-hero-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
}

@media (max-width: 991px) {
	.el-article-hero-title { font-size: 30px; }
	.el-article-hero { padding: 72px 0 44px; }
}
@media (max-width: 767px) {
	.el-article-hero-title { font-size: 26px; }
}

/* ---- Article body ---- */
.el-bd-article { max-width: 100%; }
.el-bd-lead {
	font-size: 19px;
	line-height: 1.6;
	color: #1c1d21;
	font-weight: 500;
	margin: 0 0 22px;
}
.el-bd-article > p {
	font-size: 16.5px;
	line-height: 1.78;
	color: #4a4d54;
	margin: 0 0 18px;
}
.el-bd-h2 {
	font-size: 26px;
	font-weight: 800;
	color: #1c1d21;
	letter-spacing: -0.3px;
	margin: 40px 0 16px;
	scroll-margin-top: 90px;
}
.el-bd-article a {
	color: #f0104a;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.el-bd-article a:hover { color: #d10d40; }
.el-bd-article strong { color: #2a2d33; font-weight: 700; }

/* Key takeaways callout */
.el-bd-callout {
	position: relative;
	background: #f5f5f6;
	border: 1px solid rgba(28,29,33,0.1);
	border-radius: 14px;
	padding: 22px 24px 22px 30px;
	margin: 30px 0;
}
.el-bd-callout::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: #1c1d21;
}
.el-bd-callout-title {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #1c1d21;
	margin: 0 0 12px;
}
.el-bd-callout ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.el-bd-callout li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #4a4d54;
}
.el-bd-callout li:last-child { margin-bottom: 0; }
.el-bd-callout li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1c1d21;
}

/* Pull quote */
.el-bd-quote {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid #1c1d21;
	font-size: 19px;
	line-height: 1.55;
	font-weight: 600;
	font-style: italic;
	color: #1c1d21;
}

/* FAQ block inside article */
.el-bd-faq { margin: 6px 0 10px; }

/* Article tags line */
.el-bd-tagline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 36px;
}
.el-bd-tagline-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #9a9ba1; }
.el-bd-tag {
	display: inline-block;
	padding: 7px 14px;
	border-radius: 50px;
	background: #f4f4f6;
	color: #52555c !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-bd-tag:hover { background: #f0104a; color: #fff !important; }

/* Share row */
.el-bd-share {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid rgba(0,0,0,0.08);
}
.el-bd-share-label { font-size: 14px; font-weight: 700; color: #2a2d33; }
.el-bd-share-links { display: flex; gap: 8px; }
.el-bd-share-btn {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f6;
	color: #52555c;
	font-size: 16px;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-bd-share-btn:hover { background: #f0104a; color: #fff; }
.el-bd-share-btn svg { width: 18px; height: 18px; display: block; }

/* Author bio card */
.el-bd-author {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 16px;
	padding: 24px;
	margin-top: 36px;
}
.el-bd-author-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.el-bd-author-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #1c1d21; }
.el-bd-author-name { margin: 4px 0 8px; font-size: 18px; font-weight: 800; color: #1c1d21; }
.el-bd-author-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #6a6d73; }

/* Prev / Next pager */
.el-bd-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 36px;
}
.el-bd-pager-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid rgba(0,0,0,0.09);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.el-bd-pager-link:hover { border-color: rgba(240,16,74,0.4); box-shadow: 0 8px 24px -14px rgba(0,0,0,0.25); }
.el-bd-pager-next { text-align: right; }
.el-bd-pager-dir { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #1c1d21; }
.el-bd-pager-title { font-size: 15px; font-weight: 700; color: #2a2d33; line-height: 1.4; }
@media (max-width: 575px) {
	.el-bd-pager { grid-template-columns: 1fr; }
	.el-bd-pager-next { text-align: left; }
}

/* Related posts */
.el-bd-related { margin-top: 56px; }
.el-bd-related-title {
	font-size: 24px;
	font-weight: 800;
	color: #1c1d21;
	letter-spacing: -0.3px;
	margin: 0 0 22px;
}
.el-bd-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.el-bd-related-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-bd-related-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.3); }
.el-bd-related-media {
	display: block;
	height: 150px;
	overflow: hidden;
	background: #f2f2f4;
}
.el-bd-related-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.el-bd-related-card:hover .el-bd-related-media img { transform: scale(1.05); }
.el-bd-related-body { padding: 16px 18px 20px; }
.el-bd-related-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #1c1d21; }
.el-bd-related-name { margin: 8px 0 10px; font-size: 15.5px; line-height: 1.4; font-weight: 700; }
.el-bd-related-name a { color: #1c1d21; }
.el-bd-related-name a:hover { color: #f0104a; }
.el-bd-related-date { font-size: 12.5px; color: #9a9ba1; }
@media (max-width: 767px) {
	.el-bd-related-grid { grid-template-columns: 1fr; }
}

/* Popular posts widget */
.el-blog-popular {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.el-blog-popular-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(0,0,0,0.07);
}
.el-blog-popular-item:last-child { padding-bottom: 0; border-bottom: none; }
.el-blog-popular-media {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}
.el-blog-popular-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.el-blog-popular-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.el-blog-popular-title {
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 600;
	color: #1c1d21;
	text-decoration: none;
}
.el-blog-popular-title:hover { color: #f0104a; }
.el-blog-popular-date {
	font-size: 12.5px;
	color: #9a9ba1;
}

/* Archives widget */
.el-blog-archive {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.el-blog-archive li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 8px;
	background: #f5f5f7;
	color: #56585e;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-blog-archive li a:hover { background: #f0104a; color: #fff; }
.el-blog-archive li a span {
	font-size: 12px;
	color: #9a9ba1;
	background: rgba(0,0,0,0.06);
	border-radius: 999px;
	padding: 2px 9px;
}
.el-blog-archive li a:hover span { background: rgba(255,255,255,0.25); color: #fff; }

/* ======================================================
   How to Start page — vertical step timeline
   ====================================================== */
.el-hts-intro {
	max-width: 980px;
	margin: 0 auto 54px;
	text-align: center;
}
.el-hts-intro h2 {
	font-size: 27px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 14px;
}
.el-hts-intro p {
	font-size: 16px;
	line-height: 1.75;
	color: #808289;
	margin: 0;
}

.el-hts-steps {
	position: relative;
	margin: 0 auto;
	padding-left: 8px;
}
/* the vertical connector line */
.el-hts-steps::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(180deg, #1c1d21 0%, rgba(28,29,33,0.12) 100%);
}
.el-hts-step {
	position: relative;
	padding: 0 0 40px 78px;
}
.el-hts-step:last-child { padding-bottom: 0; }
.el-hts-step-num {
	position: absolute;
	left: 0;
	top: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #1c1d21;
	color: #1c1d21;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	box-shadow: 0 0 0 6px #fff;
}
.el-hts-step-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 14px;
	padding: 24px 26px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.el-hts-step-card:hover {
	box-shadow: 0 12px 30px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.el-hts-step-card h3 {
	font-size: 19px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 8px;
}
.el-hts-step-card > p {
	font-size: 15px;
	line-height: 1.7;
	color: #808289;
	margin: 0 0 16px;
}
.el-hts-step-card > p:last-child { margin-bottom: 0; }

/* sub-groups inside a step (Basic Information, Location, etc.)
   laid out in a responsive 2-column grid to compact the tall step and
   use the widened content area */
.el-hts-step-groups {
	columns: 2;
	column-gap: 44px;
}
@media (max-width: 767px) { .el-hts-step-groups { columns: 1; } }
.el-hts-step-group { margin-top: 18px; }
.el-hts-step-group:first-of-type { margin-top: 0; }
/* inside the columns, keep each group intact and use bottom spacing */
.el-hts-step-groups .el-hts-step-group {
	break-inside: avoid;
	margin-top: 0;
	margin-bottom: 22px;
}
.el-hts-step-groups .el-hts-step-group:last-child { margin-bottom: 0; }
.el-hts-step-group h5 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #1c1d21;
	margin: 0 0 10px;
}
.el-hts-step-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.el-hts-step-list li {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #56585e;
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.el-hts-step-list li:last-child { border-bottom: 0; }
.el-hts-step-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(28,29,33,0.22);
}
.el-hts-step-list li strong { color: #1c1d21; font-weight: 600; }

/* pro tip callout */
.el-hts-step-tip {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	max-width: 1040px;
	margin: 44px auto 0;
	padding: 22px 26px;
	background: rgba(240,16,74,0.05);
	border: 1px solid rgba(240,16,74,0.16);
	border-radius: 14px;
}
.el-hts-step-tip i {
	flex: 0 0 auto;
	font-size: 22px;
	color: #f0104a;
	margin-top: 2px;
}
.el-hts-step-tip p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: #56585e;
}
.el-hts-step-tip strong { color: #1c1d21; }

/* How to Start — ensure step content is left-aligned (override inherited centering) */
.el-hts-steps, .el-hts-step, .el-hts-step-card, .el-hts-step-card h3, .el-hts-step-card > p,
.el-hts-step-group, .el-hts-step-group h5, .el-hts-step-list, .el-hts-step-list li { text-align: left; }

/* ======================================================
   Our Partners page — partner card grid
   ====================================================== */
.el-partners-intro {
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: center;
}
.el-partners-intro h2 {
	font-size: 27px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 14px;
}
.el-partners-intro p {
	font-size: 16px;
	line-height: 1.75;
	color: #808289;
	margin: 0;
}
.el-partner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 991px) { .el-partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .el-partner-grid { grid-template-columns: 1fr; } }

.el-partner-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 16px;
	padding: 28px 28px 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.el-partner-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0,0,0,0.10);
	border-color: transparent;
}
.el-partner-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.el-partner-logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
}
.el-partner-name {
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0;
	line-height: 1.35;
}
.el-partner-tag {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #a0a1a6;
}
.el-partner-desc {
	font-size: 14.5px;
	line-height: 1.7;
	color: #808289;
	margin: 0 0 20px;
	flex: 1 1 auto;
}
.el-partner-visit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 10px 20px;
	border-radius: 10px;
	background: rgba(240,16,74,0.07);
	color: #f0104a;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.2s ease;
}
.el-partner-visit:hover { background: #f0104a; color: #fff; transform: translateX(2px); }
.el-partner-visit i { transition: transform 0.2s ease; }
.el-partner-visit:hover i { transform: translateX(3px); }

/* partner CTA — become a partner */
.el-partner-become {
	max-width: 900px;
	margin: 44px auto 0;
	text-align: center;
	padding: 34px 30px;
	border: 1px dashed rgba(0,0,0,0.16);
	border-radius: 16px;
	background: #fafafa;
}
.el-partner-become h3 { font-size: 20px; color: #1c1d21; margin: 0 0 8px; }
.el-partner-become p { font-size: 14.5px; color: #808289; margin: 0 0 18px; }

/* ======================================================
   Contact page — info panel + form
   ====================================================== */
.el-contact-wrap {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 30px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 860px) {
  .el-contact-wrap { grid-template-columns: 1fr; }
  /* Stack the form first on mobile so visitors reach "Send a Message"
     right away; the dark "Get in Touch" info panel follows underneath
     as supporting/contact-details context rather than leading. */
  .el-contact-form { order: 1; }
  .el-contact-info { order: 2; }
}

/* left dark info panel */
.el-contact-info {
	background: linear-gradient(150deg, #2b2d33 0%, #1c1d21 100%);
	border-radius: 18px;
	padding: 38px 34px;
	color: #fff;
	display: flex;
	flex-direction: column;
}
.el-contact-info h2 {
	color: #fff;
	font-size: 23px;
	margin: 0 0 14px;
}
.el-contact-info > p {
	color: rgba(255,255,255,0.66);
	font-size: 14.5px;
	line-height: 1.75;
	margin: 0 0 30px;
}
.el-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 16px 0;
	border-top: 1px solid rgba(255,255,255,0.10);
}
.el-contact-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.10); }
.el-contact-item i {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(240,16,74,0.16);
	color: #ff2e63;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.el-contact-item-label {
	font-size: 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	margin: 3px 0 3px;
}
.el-contact-item a, .el-contact-item span.val {
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	word-break: break-word;
}
.el-contact-item a:hover { color: #ff2e63; }
.el-contact-social {
	display: flex;
	gap: 12px;
	margin-top: auto;
	padding-top: 30px;
}
.el-contact-social a {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(255,255,255,0.08);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.el-contact-social a:hover { background: #f0104a; transform: translateY(-3px); }

/* right form card */
.el-contact-form {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 18px;
	padding: 38px 34px;
}
.el-contact-form h2 { font-size: 23px; color: #1c1d21; margin: 0 0 6px; }
.el-contact-form > p { font-size: 14px; color: #808289; margin: 0 0 26px; }
.el-field { margin-bottom: 20px; }
.el-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1c1d21;
	margin-bottom: 8px;
}
/* asterisk on required fields, matching the same convention used on the
   Add Listing form (.el-al-field label b) */
.el-field label b { color: #f0104a; font-weight: 700; }
.el-field-optional {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: #9a9ca6;
}
.el-field input,
.el-field textarea {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.14);
	border-radius: 11px;
	padding: 13px 15px;
	font-size: 14.5px;
	color: #1c1d21;
	background: #fbfbfc;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-field input:focus,
.el-field textarea:focus {
	outline: none;
	border-color: #f0104a;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(240,16,74,0.10);
}
.el-field textarea { min-height: 140px; resize: vertical; }
.el-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .el-field-row { grid-template-columns: 1fr; } }
/* ---- validation error states, same red/pink-tint convention as the
   Add Listing form (.el-al-field.is-error / .el-al-err) ---- */
.el-field.is-error input,
.el-field.is-error textarea {
	border-color: #e5484d;
	background: #fff6f6;
}
.el-field.is-error input:focus,
.el-field.is-error textarea:focus {
	border-color: #e5484d;
	box-shadow: 0 0 0 3px rgba(229,72,77,0.14);
}
.el-field-err {
	display: block;
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: #e5484d;
}
.el-contact-submit {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: none;
	cursor: pointer;
	padding: 14px 30px;
	border-radius: 11px;
	background: #1c1d21;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(28,29,33,0.26);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-contact-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,29,33,0.34); }
.el-contact-submit:disabled { opacity: 0.65; cursor: default; transform: none; }
.el-contact-note {
	margin-top: 22px;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	display: none;
}
.el-contact-note.ok { display: block; background: rgba(34,160,80,0.10); color: #1f7a3f; border: 1px solid rgba(34,160,80,0.25); }

/* ======================================================
   Sitemap page — spacious sectioned link grid
   ====================================================== */
.el-sitemap-section { padding: 4px 0 84px; }

.el-sitemap-intro {
	max-width: 620px;
	margin: 0 auto 44px;
	color: #6b6d74;
	font-size: 16px;
	line-height: 1.65;
	text-align: center;
}

/* Browse by Location — primary section, promoted above the grid */
.el-sitemap-primary {
	max-width: 1180px;
	margin: 0 auto 54px;
}
.el-sitemap-primaryhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}
.el-sitemap-primaryhead h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -0.01em;
}
.el-sitemap-count {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #9a9ba1;
	letter-spacing: 0.02em;
}
.el-sitemap-citygrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.el-sitemap-citytile {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px 20px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.09);
	border-radius: 14px;
	font-size: 15.5px;
	font-weight: 600;
	color: #1c1d21;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-sitemap-citytile i {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #f4f4f5;
	color: #1c1d21;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-sitemap-citytile:hover {
	border-color: #1c1d21;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.el-sitemap-citytile:hover i { background: #1c1d21; color: #fff; }
@media (max-width: 991px) { .el-sitemap-citygrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .el-sitemap-citygrid { grid-template-columns: 1fr; } }

.el-sitemap-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
@media (max-width: 991px) { .el-sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .el-sitemap-grid { grid-template-columns: 1fr; } }

.el-sitemap-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 14px;
	padding: 26px 26px 20px;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.el-sitemap-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.07); transform: translateY(-2px); border-color: rgba(28,29,33,0.18); }

.el-sitemap-cardhead {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(0,0,0,0.07);
}
.el-sitemap-cardhead i {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #f4f4f5;
	color: #1c1d21;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.el-sitemap-cardhead h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1c1d21;
}
.el-sitemap-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.el-sitemap-links li { margin: 0; }
.el-sitemap-links a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: #4a4d54;
	transition: color 0.2s ease, padding 0.2s ease;
}
.el-sitemap-links li:not(:last-child) a { border-bottom: 1px solid rgba(0,0,0,0.05); }
.el-sitemap-links a::before {
	content: "\f105"; /* fa angle-right */
	font-family: "FontAwesome";
	font-size: 12px;
	color: #c2c3c8;
	transition: color 0.2s ease, transform 0.2s ease;
}
.el-sitemap-links a:hover { color: #f0104a; padding-left: 4px; }
.el-sitemap-links a:hover::before { color: #f0104a; transform: translateX(2px); }

/* about sitemap block */
.el-sitemap-about {
	max-width: 1180px;
	margin: 40px auto 0;
	padding: 32px 0 0;
	border-top: 1px solid rgba(0,0,0,0.08);
}
.el-sitemap-about h3 { font-size: 17px; color: #1c1d21; margin: 0 0 12px; }
.el-sitemap-about p { max-width: 760px; font-size: 14.5px; line-height: 1.75; color: #6b6d74; margin: 0 0 10px; }
.el-sitemap-about p:last-child { margin-bottom: 0; }
.el-sitemap-aboutlink { color: #1c1d21; font-weight: 600; }
.el-sitemap-aboutlink:hover { color: #f0104a; }
.el-sitemap-about .updated {
	display: inline-block;
	margin-top: 12px;
	font-size: 12.5px;
	color: #a0a1a6;
	font-style: italic;
}

/* ======================================================
   Legal document page (Terms / Privacy) — TOC + article
   ====================================================== */
.el-legal-wrap {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 44px;
	max-width: 1180px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 900px) { .el-legal-wrap { grid-template-columns: 1fr; } }

/* sticky sidebar TOC */
.el-legal-toc {
	position: sticky;
	top: 96px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 14px;
	padding: 22px 20px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
@media (max-width: 900px) { .el-legal-toc { position: static; max-height: none; margin-bottom: 8px; } }
.el-legal-toc h4 {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a0a1a6;
	margin: 0 0 14px;
}
.el-legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.el-legal-toc li { margin: 0; }
.el-legal-toc a {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: #56585e;
	transition: background 0.18s ease, color 0.18s ease;
}
.el-legal-toc a:hover { background: rgba(240,16,74,0.07); color: #f0104a; }
.el-legal-toc a.is-active { background: rgba(240,16,74,0.10); color: #f0104a; font-weight: 700; }

/* article body */
.el-legal-body {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 16px;
	padding: 40px 44px;
}
@media (max-width: 560px) { .el-legal-body { padding: 28px 22px; } }
.el-legal-intro {
	font-size: 15.5px;
	line-height: 1.8;
	color: #56585e;
	margin: 0 0 14px;
}
.el-legal-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 34px;
	padding: 8px 15px;
	border-radius: 50px;
	background: rgba(240,16,74,0.07);
	color: #f0104a;
	font-size: 13px;
	font-weight: 700;
}
.el-legal-section { padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(0,0,0,0.06); scroll-margin-top: 90px; }
.el-legal-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.el-legal-section h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 19px;
	font-weight: 700;
	color: #1c1d21;
	margin: 0 0 16px;
}
.el-legal-section h2 .num {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	color: #f0104a;
}
.el-legal-section h3 {
	font-size: 15px;
	font-weight: 700;
	color: #1c1d21;
	margin: 22px 0 10px;
}
.el-legal-section p {
	font-size: 14.5px;
	line-height: 1.8;
	color: #6c6e74;
	margin: 0 0 14px;
}
.el-legal-section ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.el-legal-section ul li {
	position: relative;
	padding: 6px 0 6px 22px;
	font-size: 14.5px;
	line-height: 1.7;
	color: #6c6e74;
}
.el-legal-section ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(240,16,74,0.30);
}
.el-legal-callout {
	background: #fafafa;
	border: 1px solid rgba(0,0,0,0.08);
	border-left: 3px solid #f0104a;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 14px;
}
.el-legal-callout p { margin: 0; font-size: 14px; color: #56585e; }
.el-legal-contact {
	background: #fafafa;
	border-radius: 12px;
	padding: 20px 22px;
	margin-top: 8px;
}
.el-legal-contact strong { color: #1c1d21; }
.el-legal-contact a { color: #1c1d21; font-weight: 600; }
.el-legal-contact a:hover { color: #f0104a; }

/* ======================================================
   Map Search page — filter sidebar + Leaflet map
   ====================================================== */
.el-map-page { padding: 0; }
.el-map-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
  }
  
  /* ---- filter panel (stacked on top) ---- */
.el-map-side {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 16px;
  padding: 26px 26px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }
  /* filter fields laid out horizontally */
.el-map-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 20px;
  }
@media (max-width: 1024px) { .el-map-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.el-map-filter-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
	.el-map-filter-grid .el-mfield.span-2 { grid-column: span 2; }
}
.el-map-filter-grid .el-mfield { margin-bottom: 0; }
  /* Near Me distance + Search button on one row */
.el-map-distance-row {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.07);
  }
.el-map-distance-row .el-mfield { margin-bottom: 0; flex: 0 1 460px; }
.el-map-distance-row .el-map-search-btn {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  margin-left: auto;
  padding: 13px 34px;
  }
@media (max-width: 560px) {
  .el-map-distance-row { flex-direction: column; align-items: stretch; }
  /* The desktop `flex: 0 1 460px` sets a 460px flex-basis. Once the row
     becomes a column the main axis is vertical, so that basis stretches
     the field to 460px TALL — the big blank gap above Search. Reset it to
     natural height on mobile. */
  .el-map-distance-row .el-mfield { flex: 0 0 auto; max-width: none; }
  .el-map-distance-row .el-map-search-btn { width: 100%; }
  }
  /* map canvas card (stacked below) */
.el-map-canvas {
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }
.el-map-side-head { margin-bottom: 22px; }
@media (max-width: 560px) {
	.el-map-side { padding: 22px 18px 22px; }
	.el-map-side-head { margin-bottom: 16px; }
}
.el-map-side-head h2 { font-size: 18px; font-weight: 700; color: #1c1d21; margin: 0 0 6px; }
.el-map-side-head p { font-size: 13.5px; line-height: 1.6; color: #808289; margin: 0; }

.el-mfield { margin-bottom: 18px; }
.el-mfield label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #56585e;
	margin-bottom: 8px;
}
.el-mfield input[type="text"],
.el-mfield select {
	width: 100%;
	border: 1px solid rgba(0,0,0,0.14);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	color: #1c1d21;
	background: #fbfbfc;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	appearance: none;
}
.el-mfield select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808289' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}
.el-mfield input:focus,
.el-mfield select:focus {
	outline: none;
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}

/* ---- Custom-styled City / Suburb dropdown (Map Search + Advanced Search) ----
   The native <select> renders with unstyled OS chrome (blue highlight, plain
   list) that clashes with the brand. scripts/custom.js progressively enhances
   every ".el-mfield select" into this floating .el-dd menu, matching the
   .el-mls-field dropdown already used on the dashboard. Kept black/white —
   pink was pulled out of the hover/selected states here since these pages
   should read as neutral, not pink-dominant. */
.el-mfield .el-dd {
	position: relative;
}
.el-mfield .el-dd-native {
	display: none !important;
}
.el-mfield .el-dd-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	border: 1px solid rgba(0,0,0,0.14);
	border-radius: 10px;
	background: #fbfbfc;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-mfield .el-dd-trigger:hover {
	border-color: rgba(28,29,33,0.28);
}
.el-mfield .el-dd.is-open .el-dd-trigger,
.el-mfield .el-dd-trigger:focus-visible {
	outline: none;
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}
.el-mfield .el-dd-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.el-mfield .el-dd-trigger.is-active .el-dd-label {
	color: #1c1d21;
	font-weight: 700;
}
.el-mfield .el-dd-chev {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	color: #808289;
	transition: transform 0.22s ease, color 0.18s ease;
}
.el-mfield .el-dd.is-open .el-dd-chev {
	transform: rotate(180deg);
	color: #1c1d21;
}
.el-mfield .el-dd-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid #edeef1;
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(28,29,33,0.28), 0 4px 12px rgba(28,29,33,0.06);
	padding: 6px;
	max-height: 300px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.el-mfield .el-dd.is-open .el-dd-menu {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.el-mfield .el-dd-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}
.el-mfield .el-dd-option:hover {
	background: rgba(28,29,33,0.05);
	color: #1c1d21;
}
.el-mfield .el-dd-option.is-selected {
	background: rgba(28,29,33,0.07);
	color: #1c1d21;
	font-weight: 700;
}
.el-mfield .el-dd-check {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #1c1d21;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.14s ease, transform 0.14s ease;
}
.el-mfield .el-dd-option.is-selected .el-dd-check {
	opacity: 1;
	transform: scale(1);
}

/* dual-handle range slider (Price / Age) */
.el-range .el-range-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.el-range .el-range-head label { margin: 0; }
.el-range .el-range-val {
	font-size: 12px;
	font-weight: 700;
	color: #1c1d21;
	background: rgba(28,29,33,0.06);
	padding: 3px 11px;
	border-radius: 999px;
	letter-spacing: 0.2px;
	text-transform: none;
	transition: background 0.2s ease;
}
.el-range-slider { position: relative; height: 22px; }
.el-range-track,
.el-range-fill {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 6px;
	border-radius: 999px;
	pointer-events: none;
}
.el-range-track { left: 0; right: 0; background: rgba(0,0,0,0.08); box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); }
.el-range-fill { background: linear-gradient(90deg, #3a3b42, #1c1d21); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.el-range-slider input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.el-range-slider input[type="range"]:focus { outline: none; box-shadow: none; }
.el-range-slider input[type="range"]::-webkit-slider-runnable-track { background: none; border: none; }
.el-range-slider input[type="range"]::-moz-range-track { background: none; border: none; }
.el-range-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1c1d21;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(28,29,33,0.5), 0 2px 6px rgba(0,0,0,0.2);
	cursor: grab;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.el-range-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #1c1d21;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(28,29,33,0.5), 0 2px 6px rgba(0,0,0,0.2);
	cursor: grab;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.el-range-slider input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 1px rgba(28,29,33,0.5), 0 0 0 6px rgba(28,29,33,0.12), 0 2px 6px rgba(0,0,0,0.2); }
.el-range-slider input[type="range"]::-moz-range-thumb:hover { box-shadow: 0 0 0 1px rgba(28,29,33,0.5), 0 0 0 6px rgba(28,29,33,0.12), 0 2px 6px rgba(0,0,0,0.2); }
.el-range-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.el-range-slider input[type="range"]:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.15); }
.el-range-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 11px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #a8a9ae;
}
.el-mtoggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 0;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.el-mtoggle:first-of-type { border-top: 1px solid rgba(0,0,0,0.06); }
.el-mtoggle span { font-size: 14px; font-weight: 600; color: #1c1d21; }
.el-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; }
.el-switch input { opacity: 0; width: 0; height: 0; }
.el-switch .track {
	position: absolute; inset: 0; cursor: pointer;
	background: #d9dade; border-radius: 50px; transition: background 0.2s ease;
}
.el-switch .track::before {
	content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
	background: #fff; border-radius: 50%; transition: transform 0.2s ease;
}
.el-switch input:checked + .track { background: #f0104a; }
.el-switch input:checked + .track::before { transform: translateX(20px); }

.el-map-search-btn {
	width: 100%;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	padding: 14px;
	border-radius: 11px;
	background: #1c1d21;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-map-search-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.26); }

.el-map-results {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(0,0,0,0.08);
}
.el-map-results h2 { font-size: 15px; font-weight: 700; color: #1c1d21; margin: 0 0 4px; }
.el-map-results h2 b { color: #1c1d21; }
.el-map-results .hint { font-size: 12px; color: #a0a1a6; line-height: 1.5; margin: 0; }

/* ---- map column ---- */
.el-map-canvas { position: relative; min-height: 620px; }
@media (max-width: 900px) { .el-map-canvas { min-height: 460px; } }
#elMap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.el-map-disclaimer {
	position: absolute;
	left: 12px; bottom: 12px; z-index: 500;
	max-width: 340px;
	background: rgba(255,255,255,0.94);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 10px;
	padding: 10px 13px;
	font-size: 11.5px;
	line-height: 1.5;
	color: #6c6e74;
	box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.el-map-disclaimer i { color: #808289; margin-right: 6px; }
/* On narrow maps the disclaimer's own width plus the Leaflet attribution
   control (bottom-right, ~220px wide) no longer fit side by side at the
   same bottom edge and visually collide. Pin the disclaimer to the top
   instead on small screens — it never competes with the always-bottom
   attribution there. */
@media (max-width: 575px) {
	.el-map-disclaimer { left: 12px; right: 12px; top: 12px; bottom: auto; max-width: none; }
}

/* custom leaflet marker pin */
.el-pin {
	background: #f0104a;
	width: 26px; height: 26px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	border: 2px solid #fff;
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.el-map-popup .lp-name { font-weight: 700; color: #1c1d21; font-size: 14px; }
.el-map-popup .lp-meta { font-size: 12.5px; color: #808289; margin-top: 2px; }
.el-map-popup .lp-price { color: #1c1d21; font-weight: 700; }

/* Map + Search pages — ensure select/input text isn't vertically clipped (override theme line-height) */
.el-map-side .el-mfield select,
.el-search-panel .el-mfield select,
.el-map-side .el-mfield input[type="text"],
.el-search-panel .el-mfield input[type="text"] {
	height: auto;
	min-height: 46px;
	line-height: 1.4;
	margin-bottom: 0;
}

/* ======================================================
   Search page — advanced filter panel + results
   ====================================================== */
.el-search-panel {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.05);
  }
@media (max-width: 560px) {
	.el-search-panel { padding: 22px 18px; }
	.el-search-panel-head { margin-bottom: 16px; padding-bottom: 14px; }
	.el-search-panel-head i { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
}
.el-search-panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(0,0,0,0.07);
}
.el-search-panel-head i {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border-radius: 11px;
	background: #1c1d21;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px;
}
.el-search-panel-head h2 { font-size: 18px; font-weight: 700; color: #1c1d21; margin: 0; }
.el-search-panel-head p { font-size: 13px; color: #808289; margin: 2px 0 0; }

/* responsive filter grid (reuses .el-mfield controls) */
.el-search-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 20px;
}
@media (max-width: 1024px) { .el-search-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .el-search-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; } }
.el-search-grid .el-mfield { margin-bottom: 0; }
.el-search-grid .el-mfield.span-2 { grid-column: span 2; }
.el-search-grid .el-search-ranges {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 20px;
}
.el-search-ranges .el-mfield { margin-bottom: 0; }
@media (max-width: 1024px) { .el-search-grid .el-search-ranges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	/* keep the dual-thumb sliders full-width — halving them would make the
	   min/max handles too close together to grab accurately on a phone —
	   but tighten the vertical rhythm so 3 sliders take noticeably less
	   height than the old evenly-spaced desktop rhythm. */
	.el-search-grid .el-search-ranges { grid-template-columns: 1fr; gap: 14px; }
	.el-range .el-range-head { margin-bottom: 12px; }
	.el-range-ends { margin-top: 8px; }
}

/* toggle row inside panel */
 .el-search-toggles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.07);
  }
 .el-search-toggles-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  }
 @media (max-width: 560px) {
  .el-search-toggles { flex-direction: column; align-items: stretch; }
  .el-search-toggles-group { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  }
 .el-search-toggles .el-mtoggle {
	gap: 20px;
	min-width: 200px;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 12px;
	padding: 12px 18px;
	background: #fafafa;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 560px) {
	/* two compact toggle cards per row instead of one full-width card per
	   row — same tap-target size, roughly half the vertical space. */
	.el-search-toggles .el-mtoggle {
		min-width: 0;
		flex: 1 1 calc(50% - 5px);
		gap: 10px;
		padding: 11px 14px;
	}
	.el-search-toggles .el-mtoggle span { font-size: 12.5px; }
}
.el-search-toggles .el-mtoggle:hover { border-color: rgba(28,29,33,0.25); background: #fff; }
/* Keep the checked card itself neutral black/white — the switch knob
   turning pink (below, .el-switch input:checked + .track) is the one
   deliberate accent for this "on" state, not a pink card fill too. */
.el-search-toggles .el-mtoggle:has(input:checked) {
	background: #fff;
	border-color: #1c1d21;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.el-search-toggles .el-mtoggle:has(input:checked) > span:first-child { color: #1c1d21; }

  /* action buttons (inline, right side of toggles row) */
 .el-search-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
  }
 @media (max-width: 560px) { .el-search-actions { margin-left: 0; } }
.el-search-submit {
	border: none; cursor: pointer;
	padding: 14px 34px;
	border-radius: 11px;
	background: #1c1d21; color: #fff;
	font-size: 15px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 9px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-search-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.26); }
.el-search-reset {
	border: 1px solid rgba(0,0,0,0.16);
	background: #fff; cursor: pointer;
	padding: 13px 24px;
	border-radius: 11px;
	color: #56585e; font-size: 14px; font-weight: 600;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.el-search-reset:hover { border-color: #1c1d21; color: #1c1d21; }

/* results area */
.el-search-results {
	margin: 24px 0 0;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 18px;
	padding: 24px 30px 26px;
}
.el-search-results .rcount {
	font-size: 20px; font-weight: 700; color: #1c1d21; margin: 0 0 10px;
}
.el-search-results .rcount b { color: #1c1d21; }
.el-search-results .empty-ico {
	width: 66px; height: 66px; border-radius: 50%;
	background: rgba(240,16,74,0.08); color: #f0104a;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; margin: 0 auto 18px;
}
.el-search-results .rhint { font-size: 14.5px; color: #808289; margin: 0; line-height: 1.6; }

/* ======================================================
   Shared "no results" empty state — used on Advanced Search
   (search.html) and Map Search (map.html) result panels.
   Instead of a dead end when a query matches nothing, surface
   crawlable internal links to the 8 city hub pages so the empty
   result page still carries link equity and gives the visitor
   (and search engines) a next step. Namespaced el-nores-* since it
   sits inside pages that already use el-search-*/el-map-* prefixes.
   ====================================================== */
.el-nores { text-align: center; }
.el-nores-icon {
	width: 60px; height: 60px; border-radius: 50%;
	background: rgba(240,16,74,0.08); color: #f0104a;
	display: flex; align-items: center; justify-content: center;
	font-size: 23px; margin: 0 auto 16px;
}
.el-nores-title { font-size: 18px; font-weight: 800; color: #1c1d21; margin: 0 0 8px; }
.el-nores-sub { font-size: 14px; color: #868790; margin: 0 0 24px; line-height: 1.6; max-width: 460px; margin-left: auto; margin-right: auto; }
.el-nores-sub:last-child { margin-bottom: 0; }
.el-nores-pop { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px; margin-top: 4px; }
/* --top variant: Popular Searches shown ABOVE the idle heading, so the
   divider moves below the pills and spacing flips accordingly. */
.el-nores-pop.el-nores-pop--top { border-top: 0; border-bottom: 1px solid rgba(0,0,0,0.08); padding-top: 0; padding-bottom: 24px; margin-top: 0; margin-bottom: 28px; }
.el-nores-pop-label {
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
	color: #a7a8ae; margin: 0 0 14px;
}
.el-nores-pop-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.el-nores-pop-link {
	display: inline-flex; align-items: center; padding: 9px 17px; border-radius: 999px;
	background: #f7f7f9; border: 1px solid rgba(0,0,0,0.08); color: #1c1d21;
	font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.el-nores-pop-link:hover { background: linear-gradient(135deg,#ff4d6d,#f0104a); border-color: transparent; color: #fff; transform: translateY(-1px); }

/* Advanced Search results panel: match the Map Search sidebar's no-results
   treatment exactly (same left alignment, font sizes, and colors) instead of
   the larger centered default ���� icon hidden, tighter title/sub sizing, and
   the same compact pill size, so both search experiences feel identical. */
.el-search-results .el-nores { text-align: left; }
.el-search-results .el-nores-icon { display: none; }
.el-search-results .el-nores-title { font-size: 17px; margin-bottom: 6px; }
.el-search-results .el-nores-sub { font-size: 13.5px; margin: 0 0 16px; max-width: none; margin-left: 0; margin-right: 0; }
.el-search-results .el-nores-sub:last-child { margin-bottom: 0; }
.el-search-results .el-nores-pop { padding-top: 14px; }
.el-search-results .el-nores-pop-label { text-align: left; }
.el-search-results .el-nores-pop-list { justify-content: flex-start; }
.el-search-results .el-nores-pop-link { padding: 7px 14px; font-size: 12.5px; }

@media (max-width: 560px) {
	/* the desktop 54px vertical padding leaves a large empty gap above the
	   Popular Searches block on phones — tighten the whole panel. */
	.el-search-results { padding: 22px 18px; margin-top: 24px; }
	.el-search-results .el-nores-pop { padding-top: 12px; margin-bottom: 20px; padding-bottom: 18px; }
	.el-search-results .el-nores-pop-label { font-size: 10px; margin-bottom: 10px; }
	.el-search-results .el-nores-pop-list { gap: 6px; }
	.el-search-results .el-nores-pop-link { padding: 5px 11px; font-size: 11px; border-radius: 8px; }
}
/* Compact variant used inside the Map Search sidebar results panel,
   left-aligned to match the panel's other left-aligned copy. */
.el-map-results .el-nores { text-align: left; margin-top: 16px; }
.el-map-results .el-nores-icon { display: none; }
.el-map-results .el-nores-title { font-size: 14px; margin-bottom: 4px; }
.el-map-results .el-nores-sub { font-size: 12.5px; margin: 0 0 16px; max-width: none; margin-left: 0; margin-right: 0; }
.el-map-results .el-nores-pop { padding-top: 14px; }
.el-map-results .el-nores-pop-label { text-align: left; }
.el-map-results .el-nores-pop-list { justify-content: flex-start; }
.el-map-results .el-nores-pop-link { padding: 7px 14px; font-size: 12.5px; }
/* On phones these pills dominate the panel, so make them noticeably more
   compact — smaller type, tighter padding/gap and a leaner label. */
@media (max-width: 560px) {
	.el-map-results .el-nores-pop { padding-top: 12px; margin-bottom: 20px; padding-bottom: 18px; }
	.el-map-results .el-nores-pop-label { font-size: 10px; margin-bottom: 10px; }
	.el-map-results .el-nores-pop-list { gap: 6px; }
	.el-map-results .el-nores-pop-link { padding: 5px 11px; font-size: 11px; border-radius: 8px; }
}

/* ======================================================
   Agencies page — filter chips + agency card grid + join
   ====================================================== */
.el-ag-intro {
	max-width: 780px;
	margin: 0 auto 34px;
	text-align: center;
}
.el-ag-intro p {
	font-size: 15.5px;
	line-height: 1.8;
	color: #808289;
	margin: 0;
}

/* agency card grid */
.el-ag-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	/* mirror the site's standard .container box (1210px + 15px side padding)
	   so the grid uses the full page content width and its cards line up
	   with the breadcrumb above it. */
	max-width: 1210px;
	margin: 0 auto;
	padding: 0 15px;
}
@media (max-width: 900px) { .el-ag-grid { grid-template-columns: repeat(2, 1fr); } }

.el-ag-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.el-ag-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,0.10); }

/* cover image / banner */
.el-ag-banner {
	position: relative;
	height: 158px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.el-ag-fade {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.28) 100%);
}

/* circular logo overlapping the cover bottom-left */
.el-ag-logo {
	position: absolute;
	top: 122px;
	left: 24px;
	z-index: 3;
	width: 68px; height: 68px;
	border-radius: 50%;
	border: 4px solid #fff;
	background: radial-gradient(circle at 30% 30%, #34383b, #1c1d21);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 800; letter-spacing: 0.5px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

.el-ag-body { padding: 34px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.el-ag-name {
	font-size: 20px;
	font-weight: 700;
	color: #2f2d33;
	margin: 0 0 12px;
}
.el-ag-desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: #8a8b91;
	margin: 0 0 22px;
	flex: 1 1 auto;
}
.el-ag-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 18px;
	border-top: 1px solid rgba(0,0,0,0.07);
}
.el-ag-profiles,
.el-ag-city {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: #8a8b91;
	font-weight: 500;
}
.el-ag-profiles i,
.el-ag-city i { font-size: 16px; color: #a9aab0; }
.el-ag-profiles b { color: #1c1d21; font-weight: 700; }

/* Desktop breathing room between the breadcrumb and the content that
   follows it (agencies grid / detail sections). .el-content-section had
   no defined padding, so the content sat flush against the breadcrumb. */
.el-content-section { padding-top: 30px; }

@media (max-width: 600px) {
	/* .el-content-section has no defined padding, so the grid would sit
	   flush against the breadcrumb �� add breathing room above it. */
	.el-content-section { padding-top: 24px; }
  .el-ag-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .el-ag-banner { height: 92px; }
  .el-ag-logo { top: 62px; left: 12px; width: 44px; height: 44px; border-width: 3px; font-size: 14px; }
  .el-ag-body { padding: 18px 11px 11px; }
  .el-ag-name { font-size: 13px; line-height: 1.25; margin: 0 0 4px; }
  .el-ag-desc {
  font-size: 10.5px;
  line-height: 1.45;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  }
  /* keep both meta items on ONE row (row layout, not stacked) */
  .el-ag-foot {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  padding-top: 10px;
  }
  .el-ag-profiles,
  .el-ag-city {
  font-size: 10px;
  gap: 4px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 0;
  }
  .el-ag-profiles i,
  .el-ag-city i { font-size: 11px; flex-shrink: 0; }
  }

.el-ag-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	color: #a0a1a6;
	font-size: 14.5px;
	display: none;
}

/* ---- join / list your agency block ---- */
.el-ag-join {
	max-width: 1120px;
	margin: 54px auto 80px;
	background: linear-gradient(150deg, #2b2d33 0%, #1c1d21 100%);
	border-radius: 20px;
	padding: 44px 46px;
	color: #fff;
}
@media (max-width: 600px) { .el-ag-join { padding: 32px 24px; } }
.el-ag-join h2 { color: #fff; font-size: 23px; margin: 0 0 12px; }
.el-ag-join > p {
	color: rgba(255,255,255,0.68);
	font-size: 15px; line-height: 1.75;
	margin: 0 0 30px;
	max-width: 720px;
}
.el-ag-join h3 {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 16px;
	display: flex; align-items: center; gap: 9px;
}
.el-ag-join h3 i { color: #ff2e63; }
.el-ag-reqs {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 26px;
}
@media (max-width: 700px) { .el-ag-reqs { grid-template-columns: 1fr; } }
.el-ag-reqs li {
	position: relative;
	padding-left: 26px;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255,255,255,0.78);
}
.el-ag-reqs li::before {
	content: "\f00c"; /* fa check */
	font-family: "FontAwesome";
	position: absolute; left: 0; top: 1px;
	color: #ff2e63; font-size: 12px;
}
.el-ag-reqs li strong { color: #fff; font-weight: 600; }
.el-ag-join-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.el-ag-mailbtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #1c1d21;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	padding: 13px 26px;
	border-radius: 11px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-ag-mailbtn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,29,33,0.36); color: #fff; }
.el-ag-join-cta .note { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.55; }
.el-ag-join-cta .note a { color: #fff; font-weight: 600; }
.el-ag-join-cta .note a:hover { color: #f0104a; }

/* ======================================================
   Listing detail (premium) — gallery + sticky booking
   ====================================================== */
.el-ld { max-width: 1200px; margin: 0 auto; }

/* ---- header row: name / location / actions ----
   The like/share buttons sit inline with the name itself — pinned to
   the row's right edge via space-between — rather than floating on
   their own row below the location/status text, so they read as
   "actions for this ad" right where the ad's title is. */
.el-ld-top {
	margin-bottom: 26px;
}
.el-ld-eyebrow {
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #f0104a;
	font-weight: 700;
	margin: 0 0 10px;
}
.el-ld-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}
.el-ld-name {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 42px;
	line-height: 1;
	font-weight: 700;
	color: #1c1d21;
	margin: 0;
	letter-spacing: -0.5px;
	min-width: 0;
}
/* Same blue scalloped "verified" seal used on the ad cards (.el-card-verified)
   and the Latest Escorts scroller, swapped in for the old solid pink circle +
   fa-check glyph so the verified badge matches site-wide. Rendered as a single
   inline SVG background (shape + checkmark baked in) rather than a bg-color +
   icon-font glyph, since the two never lined up perfectly. */
.el-ld-name .vf {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath fill='%231D9BF0' d='M11 0.5l2.06 1.88 2.72-0.72 1.06 2.58 2.78 0.36-0.2 2.8 2.4 1.5-1.36 2.5 1.36 2.5-2.4 1.5 0.2 2.8-2.78 0.36-1.06 2.58-2.72-0.72L11 21.5l-2.06-1.88-2.72 0.72-1.06-2.58-2.78-0.36 0.2-2.8-2.4-1.5 1.36-2.5-1.36-2.5 2.4-1.5-0.2-2.8 2.78-0.36 1.06-2.58 2.72 0.72z'/%3E%3Cpath fill='%23fff' d='M9.9 14.6 6.4 11.1l1.28-1.28 2.22 2.22 4.42-4.42 1.28 1.28z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px;
}
.el-ld-name .vf i { display: none; }
.el-ld-metaline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-size: 14px;
	color: #6c6e74;
}
.el-ld-metaline .mi { display: inline-flex; align-items: center; gap: 7px; }
.el-ld-metaline .mi i { color: #a0a1a6; }
.el-ld-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 13px;
	border-radius: 50px;
	letter-spacing: 0.3px;
}

/* ---- gallery ---- */
.el-ld-gallery { margin-bottom: 44px; }
.el-ld-gmain {
	position: relative;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f0f0f2;
	box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.el-ld-gmain img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.el-ld-gmain:hover img { transform: scale(1.04); }
.el-ld-gmain .zoom {
	position: absolute;
	right: 16px; bottom: 16px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #1c1d21;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.18);
	transition: transform 0.2s ease;
}
.el-ld-gmain:hover .zoom { transform: scale(1.1); }
.el-ld-gverified {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(34,36,42,0.82);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 15px;
	border-radius: 50px;
	letter-spacing: 0.4px;
}
.el-ld-gverified i { color: #ff4d7d; }
.el-ld-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-top: 12px;
}
@media (max-width: 560px) { .el-ld-thumbs { grid-template-columns: repeat(3, 1fr); } }
.el-ld-thumb {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f0f0f2;
	cursor: pointer;
	position: relative;
	opacity: 0.82;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.el-ld-thumb img { width: 100%; height: 100%; object-fit: cover; }
.el-ld-thumb:hover, .el-ld-thumb.is-active { opacity: 1; transform: translateY(-2px); }
.el-ld-thumb.is-active { outline: 2px solid #f0104a; outline-offset: 2px; }

/* ---- main body ----
   Gallery spans the full width on its own row; the name/description
   content (including the header, moved here from its own top row) sits
   in the wide left column below it, with the booking sidebar in the
   narrow right column alongside it. Named grid areas let mobile stack
   content above the sidebar while keeping the gallery full-width.
   The header (name/status) is its own grid area — separate from the
   rest of the left-column content — so that on mobile the booking
   sidebar can slot in right after the header and before "About me",
   while on desktop it still just reads as one continuous left column
   with the sidebar spanning alongside both header + content rows. */
.el-ld-body {
	display: grid;
	grid-template-columns: 1fr 360px;
	grid-template-areas: "gallery gallery" "header side" "content side";
	column-gap: 44px;
	row-gap: 0;
	align-items: start;
}
.el-ld-gallery-area { grid-area: gallery; }
.el-ld-header-area { grid-area: header; }
.el-ld-content-area { grid-area: content; }
.el-ld-side { grid-area: side; }
@media (max-width: 900px) {
	.el-ld-body {
		grid-template-columns: 1fr;
		grid-template-areas: "gallery" "header" "side" "content";
		row-gap: 32px;
	}
	/* row-gap now supplies the spacing after the gallery, so drop its own
	   bottom margin to avoid a doubled gap before the content column. */
	.el-ld-gallery-area .el-ld-gallery { margin-bottom: 0; }
	/* Same doubled-gap issue for the header: .el-ld-top's 26px margin-bottom
	   is meant to space the header from "About Me" on desktop (where header
	   and content share one column with no grid row-gap between them), but
	   on mobile the header's very next stacked row is the sidebar card, so
	   that margin stacks on top of the grid's own 32px row-gap into a 58px
	   gap — visibly oversized next to every other ~32px section gap on the
	   page. Drop it here so mobile relies on the row-gap alone. */
	.el-ld-header-area .el-ld-top { margin-bottom: 0; }
	/* .el-ld-status-msg is a plain <p> — only its margin-top is authored,
	   so its margin-bottom falls back to the browser's default paragraph
	   margin. That default stacks on top of the grid's 32px row-gap here,
	   which is the remaining source of the oversized gap above the sidebar
	   card on mobile. */
	.el-ld-header-area .el-ld-status-msg { margin-bottom: 0; }
}

.el-ld-block { margin-bottom: 40px; }
.el-ld-block:last-child { margin-bottom: 0; }
.el-ld-h {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1c1d21;
	font-weight: 700;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0,0,0,0.09);
	display: flex; align-items: center; gap: 10px;
}
.el-ld-h::before {
	content: "";
	width: 22px; height: 2px;
	background: #1c1d21;
	display: inline-block;
}
.el-ld-desc p { font-size: 15.5px; line-height: 1.85; color: #56585e; margin: 0 0 16px; }
.el-ld-desc p:last-child { margin-bottom: 0; }

/* Video tile — lives inside the gallery mosaic itself (see .el-ld-tile-video
   below), as a peer of the photo tiles rather than a separate block under
   the gallery. Nothing to style here; kept as a marker for where the old
   standalone card used to sit. */

/* feature chips */
.el-ld-features { display: flex; flex-wrap: wrap; gap: 11px; }
.el-ld-feature {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1d21;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.el-ld-feature:hover { border-color: #1c1d21; background: rgba(28,29,33,0.03); }
/* Each Service Highlight gets its own tinted icon chip instead of a
   flat gray glyph — a distinct color per feature reads faster at a
   glance and gives the row some life, while the pill itself and its
   label text stay neutral so the row doesn't turn into a wall of color. */
.el-ld-feature-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
}
.el-ld-feature-ic i { font-size: 12px; }
.el-ld-feature-ic--user { background: rgba(37,99,235,0.12); color: #2563eb; }
.el-ld-feature-ic--heart { background: rgba(240,16,74,0.12); color: #f0104a; }
.el-ld-feature-ic--plane { background: rgba(8,145,178,0.12); color: #0891b2; }
.el-ld-feature-ic--clock { background: rgba(217,119,6,0.14); color: #d97706; }
.el-ld-feature-ic--home { background: rgba(13,148,136,0.12); color: #0d9488; }

/* photo review strip */
.el-ld-reviewgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
@media (max-width: 560px) { .el-ld-reviewgrid { grid-template-columns: repeat(2, 1fr); } }
.el-ld-review {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #f0f0f2;
	cursor: pointer;
}
.el-ld-review img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.el-ld-review:hover img { transform: scale(1.06); }

/* ---- sticky booking sidebar ---- */
.el-ld-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 900px) { .el-ld-side { position: static; } }

.el-ld-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(0,0,0,0.06);
	}
	/* Mobile background/border removal lives in a single override block
	   AFTER all of this card's base rules further down this file (right
	   before "report link") — @media adds no specificity, so an override
	   placed before the base rules it targets loses the cascade to them
	   regardless of being wrapped in a narrower media query. See that
	   block for the full explanation of the padding fix too. */
/* Phone number row: a highlighted (soft pink-tinted) strip so it reads
   as the card's primary piece of contact info at a glance — labeled
   "Phone Number" rather than "Tap to call" since desktop users can't
   actually tap it, and no trailing chevron since it doesn't navigate
   anywhere, it's just a tel: link for click-to-call apps/Skype etc. */
.el-ld-card-head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 22px;
	background: #f7f7f8;
	border-bottom: 1px solid rgba(0,0,0,0.07);
	text-decoration: none;
	transition: background 0.15s ease;
}
.el-ld-card-head:hover { background: #f0f0f2; }
.el-ld-card-head-ic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1c1d21;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	box-shadow: 0 6px 14px rgba(28,29,33,0.22);
}
.el-ld-card-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.el-ld-card-head .lbl { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #a0a1a6; }
.el-ld-card-head .num { font-size: 17px; font-weight: 700; color: #1c1d21; letter-spacing: 0.2px; }
/* Mobile only: flatten this row to sit flush with the rest of the card
   (stats grid, rates, etc. below all use the same plain surface +
   hairline divider language) rather than standing out as its own
   pink-tinted "chip" glued on top. Desktop keeps the pink-tinted strip
   above untouched. Pink accent still lives on in the icon circle. */
@media (max-width: 767px) {
	.el-ld-card-head { background: transparent; border-bottom-color: rgba(0,0,0,0.07); }
	.el-ld-card-head:hover { background: rgba(0,0,0,0.02); }
	.el-ld-card-head .lbl { letter-spacing: 0.8px; color: #a0a1a6; }
}
.el-ld-card-cta { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 11px; }
/* Desktop: the tap-to-call row above already covers calling, so the
   Call/Message buttons are redundant there — mobile keeps them since
   tel:/sms: links are far more useful (and finger-friendly) on a phone. */
@media (min-width: 769px) { .el-ld-card-cta { display: none; } }
/* Source-attribution reminder: nudges callers to mention Escort Locate
   to the advertiser, placed right after the CTA buttons (where callers
   are about to act) and before the stats grid. */
.el-ld-source-note {
	margin: 18px 24px 22px;
	padding: 13px 16px;
	background: #f7f7f8;
	border: 1px dashed rgba(0,0,0,0.12);
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b6d74;
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.el-ld-source-note i { color: #6c6e74; font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.el-ld-source-note b { color: #1c1d21; font-weight: 700; }
.el-ld-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 15px;
	border-radius: 12px;
	font-size: 15px; font-weight: 700;
	border: none; cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-ld-btn-primary { background: #1c1d21; color: #fff; box-shadow: 0 8px 20px rgba(28,29,33,0.24); }
.el-ld-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(28,29,33,0.32); color: #fff; }
.el-ld-btn-ghost { background: #fff; color: #1c1d21; border: 1px solid rgba(0,0,0,0.14); }
.el-ld-btn-ghost:hover { border-color: #1c1d21; color: #1c1d21; }

/* ---- expired-ad notice ----
   Replaces the whole phone/WhatsApp/Call contact block (and the
   rates + working hours below it, since neither applies to a listing
   that can no longer be booked) when an ad is no longer active. Sits
   in the same top slot of .el-ld-card the tap-to-call row used to
   occupy; the stats grid (age/height/etc — still useful reference
   info) stays directly below it, unchanged. Neutral gray/black,
   matching the site's black/white-first language rather than an
   alarming red "error" treatment — this is a passive status, not a
   warning. */
.el-ld-expired {
	padding: 30px 24px 26px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.el-ld-expired-ic {
	width: 46px; height: 46px;
	border-radius: 50%;
	background: #f0f0f2;
	color: #8a8c92;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px;
	margin: 0 auto 14px;
}
.el-ld-expired-title { font-size: 17px; font-weight: 700; color: #1c1d21; margin: 0 0 8px; }
.el-ld-expired-text { font-size: 13.5px; line-height: 1.55; color: #6b6d74; margin: 0 0 20px; }
.el-ld-expired-btn { width: 100%; }
@media (max-width: 767px) {
	.el-ld-expired { padding: 24px 0 22px; }
}

/* WhatsApp CTA: unlike .el-ld-card-cta (Call/Message, hidden on
   desktop, floats fixed on mobile — see below), this button is always
   visible in normal flow on every breakpoint since a wa.me link works
   equally well from a desktop browser (opens WhatsApp Web) or a phone.
   Site is black/white-first (pink is an accent only), so the button
   is a solid black fill rather than a pink gradient — WhatsApp's own
   brand green icon glyph is enough to identify the channel without
   the button itself needing to be colorful. */
.el-ld-contact-actions { padding: 18px 22px 6px; display: flex; flex-direction: column; gap: 11px; }
.el-ld-whatsapp-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px;
	border-radius: 12px;
	background: #1c1d21;
	color: #fff;
	font-size: 15px; font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(28,29,33,0.26);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-ld-whatsapp-btn i { font-size: 18px; color: #25d366; }
.el-ld-whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(28,29,33,0.34); color: #fff; background: #000; }

/* profile stats grid */
.el-ld-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(0,0,0,0.07);
}
.el-ld-stat {
	padding: 18px 24px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.el-ld-stat:nth-child(odd) { border-right: 1px solid rgba(0,0,0,0.06); }
.el-ld-stat .k { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: #a0a1a6; margin: 0 0 5px; display: flex; align-items: center; gap: 6px; }
.el-ld-stat .k i { color: #a0a1a6; font-size: 12px; }
.el-ld-stat .v { font-size: 16px; font-weight: 700; color: #1c1d21; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
/* Height's metric conversion reads as a quiet secondary line instead
   of wrapping mid-value onto its own row (e.g. "166-167cm)" stranded
   below "5'5\" (") — the imperial value stays the one bold answer,
   the metric range is a smaller muted footnote next to it. */
.el-ld-stat-sub { font-size: 12px; font-weight: 500; color: #a0a1a6; }

/* rates */
.el-ld-rate-title, .el-ld-hours-title {
	font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #1c1d21; font-weight: 700;
	padding: 18px 24px 10px;
	margin: 0;
	display: flex; align-items: center; gap: 8px;
}
.el-ld-rate-title i, .el-ld-hours-title i { color: #1c1d21; font-size: 13px; }
.el-ld-rates { padding: 0 24px 8px; }
.el-ld-rate {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.el-ld-rate:last-child { border-bottom: 0; }
.el-ld-rate .dur { font-size: 14.5px; color: #56585e; font-weight: 600; }
.el-ld-rate .price { font-size: 17px; font-weight: 700; color: #1c1d21; }
.el-ld-rate-sub {
	padding: 14px 24px 20px;
	border-top: 1px dashed rgba(0,0,0,0.12);
	margin-top: 4px;
}
.el-ld-rate-sub .sub-lbl { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: #a0a1a6; margin: 0 0 8px; }

/* working hours */
.el-ld-hours { padding: 0 24px 20px; }
.el-ld-hour {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	font-size: 14px;
}
.el-ld-hour:last-child { border-bottom: 0; }
.el-ld-hour .day { color: #56585e; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.el-ld-hour .time { color: #1c1d21; font-weight: 600; }
.el-ld-hour .time.late { color: #f0104a; }
/* current-day highlight, set via JS (new Date().getDay() matched against
   each row's data-day) since these are static HTML pages with no
   server-side "today" concept */
.el-ld-hour.is-today {
	padding: 10px 12px;
	border-radius: 10px; border-bottom-color: transparent;
	background: rgba(240,16,74,0.06);
}
.el-ld-hour.is-today .day { color: #1c1d21; }
.el-ld-hour-today-tag {
	padding: 1px 6px;
	border-radius: 999px;
	background: #f0104a;
	color: #fff;
	font-size: 9px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.5;
}

/* Mobile: no border/shadow AND no background tint on the card itself —
   it sits flush on the plain white page canvas, exactly like the "About
   Me" content that follows it further down the page. Every element
   inside (phone row, buttons, note, stats grid, rates, working hours)
   already supplies its own hairline dividers, so the card still reads
   as a distinct block from its internal structure alone, not from an
   outer box.
   Placed here, AFTER every base rule above that sets the same
   properties (.el-ld-card-cta, .el-ld-source-note, .el-ld-stat,
   .el-ld-rate-title/-rates/-rate-sub, .el-ld-hours-title/-hours) so
   this override actually wins the cascade — @media adds no specificity,
   so the exact same rules placed earlier in the file (right after
   .el-ld-card's own declaration) were silently losing to these base
   rules and never took effect, which is why Working Hours/About Me
   still looked misaligned after that first attempt. */
@media (max-width: 767px) {
	.el-ld-card { border: none; box-shadow: none; background: transparent; border-radius: 0; }
	.el-ld-card-head { padding-left: 0; padding-right: 0; }
	.el-ld-card-cta { padding-left: 0; padding-right: 0; }
	.el-ld-contact-actions { padding-left: 0; padding-right: 0; }
	.el-ld-source-note { margin-left: 0; margin-right: 0; }
	.el-ld-stat { padding-left: 0; padding-right: 0; padding-top: 12px; padding-bottom: 12px; }
	.el-ld-stat:nth-child(odd) { padding-right: 18px; }
	.el-ld-stat:nth-child(even) { padding-left: 18px; }
	.el-ld-stat .k { margin-bottom: 3px; }
	.el-ld-rate-title, .el-ld-hours-title { padding-left: 0; padding-right: 0; }
	.el-ld-rates { padding-left: 0; padding-right: 0; }
	.el-ld-rate-sub { padding-left: 0; padding-right: 0; }
	.el-ld-hours { padding-left: 0; padding-right: 0; }
}

/* Floating call/message action bar (mobile only): pins the Call/Message
   buttons to the bottom of the VIEWPORT (not just the bottom of the
   card) so they stay reachable while scrolling through Working
   Hours/About Me/etc further down the page, matching the floating
   pill quick-actions bar from the reference screenshot. Desktop
   already hides .el-ld-card-cta outright (see the @media(min-width:
   769px) rule above it), so none of this ever renders there. Message
   becomes an icon-only circular button (green, distinct from the red
   Call button, same two-tone accent language as the reference) since
   the fixed bar has limited width; its label moves to a visually
   hidden .sr-only span so it stays announced to screen readers. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 767px) {
	/* Floats as an inset "island" card (margin on all sides, not an
	   edge-to-edge bar) so it reads as a deliberate floating control
	   rather than a slab bleeding into the screen edges. Hides on
	   scroll and reappears once scrolling settles (toggled by the
	   .el-is-scrolling class the idle-detector script below adds to
	   <html>), so it never has a chance to visually clash with
	   whatever content is passing underneath it mid-scroll. */
	.el-ld-card-cta {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		z-index: 900;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 10px 10px 10px 20px;
		background: linear-gradient(155deg, #23242a 0%, #17181b 100%);
		border: 1px solid rgba(255,255,255,0.09);
		border-radius: 20px;
		box-shadow: 0 16px 32px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.24);
		transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s ease;
	}
	html.el-is-scrolling .el-ld-card-cta {
		transform: translateY(calc(100% + 28px));
		opacity: 0;
	}
	/* Bar itself is now the dark surface, so the primary button flips to
	   a light pill (was dark-on-white, now light-on-dark) to keep clear
	   contrast against its own background instead of blending into it. */
	.el-ld-card-cta .el-ld-btn-primary {
		flex: 1;
		background: none;
		color: #fff;
		box-shadow: none;
		padding: 8px 0;
		font-size: 14.5px;
		justify-content: flex-start;
		gap: 9px;
	}
	.el-ld-card-cta .el-ld-btn-primary i { font-size: 16px; color: #fff; opacity: 0.85; }
	.el-ld-card-cta .el-ld-btn-primary:hover { color: #fff; transform: none; box-shadow: none; }
	.el-ld-card-cta .el-ld-btn-ghost {
		flex: 0 0 auto;
		width: 64px;
		height: 46px;
		padding: 0;
		border-radius: 14px;
		background: #1fc47f;
		color: #fff;
		border: none;
		box-shadow: 0 6px 16px rgba(31,196,127,0.38);
	}
	.el-ld-card-cta .el-ld-btn-ghost i { font-size: 18px; }
	.el-ld-card-cta .el-ld-btn-ghost .el-ld-msg-icon { width: 21px; height: 21px; }
	.el-ld-card-cta .el-ld-btn-ghost:hover { color: #fff; border-color: transparent; }
  /* Reserve space at the bottom of the page so the floating card never
  overlaps the footer or last section while scrolled to the end. The
  reserved strip sits right below the footer's own dark background,
  so it needs the same dark fill — otherwise the page's white default
  background shows through as a stray white gap under the black
  footer once the user scrolls all the way down. */
  body:has(.el-ld-card-cta) { padding-bottom: 84px; background: #0e0e10; }
  }

/* report link */
.el-ld-report {
	text-align: center;
	font-size: 12.5px;
	color: #a0a1a6;
}
.el-ld-report a { color: #808289; text-decoration: underline; }
.el-ld-report a:hover { color: #f0104a; }

/* related listings section */
.el-ld-related { margin-top: 64px; }

/* ---- listing detail: live status caption ----
   The "Available Now" pill itself moved onto the main gallery photo
   (see .el-ld-glive) — this is just the plain-text detail line that's
   left in the header, describing what "available now" means right now. */
.el-ld-status-msg {
	margin-top: 14px;
	color: #6c6e74;
	font-size: 14px;
	font-weight: 500;
	font-style: italic;
}
/* Expired variant: plain (non-italic) so it reads as a factual notice
   rather than the live-status quip it replaces, with a small inline
   info icon for a bit more visual weight. */
.el-ld-status-msg--expired[hidden] { display: none; }
.el-ld-status-msg--expired {
	display: flex;
	align-items: center;
	gap: 7px;
	font-style: normal;
}
.el-ld-status-msg--expired i { flex-shrink: 0; font-size: 13px; }

/* ---- listing detail: prev / next ad navigation ---- */
.el-ld-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid rgba(0,0,0,0.09);
}
/* Below 560px, merge the two links into ONE bordered card (a single
   pill-like unit, not two separate floating boxes) with a hairline
   divider down the middle — reads as one back/forward control instead of
   two disconnected tiles. Each half restores the "PREVIOUS"/"NEXT" label
   (dropped in the old layout since there wasn't room for it above the
   name) via a 2-row CSS grid: label+icon on row 1, thumbnail+name on row
   2. Grid areas are assigned per class rather than relying on DOM/flex
   order, so .el-ld-pagetext just needs display:contents to let its two
   children (.dir/.who) drop straight into the grid as independent items.
   The icon drops the old resting-pink circle for a neutral gray one
   (pink/black only on hover), matching the site's black/white-first,
   pink-accent-only convention used elsewhere. */
@media (max-width: 560px) {
	.el-ld-pager {
		display: flex;
		gap: 0;
		margin-top: 32px;
		padding-top: 0;
		border: 1px solid rgba(0,0,0,0.09);
		border-radius: 16px;
		background: #fff;
		overflow: hidden;
	}
	/* Every override below is scoped through the extra .el-ld-pager
	   ancestor class to reach 3-class specificity — the un-scoped base
	   rules for .el-ld-pagelink/.ico/.el-ld-pagethumb/.dir/.who sit LATER
	   in this file at the same 1-2 class specificity as a plain media-
	   query override would have, so a same-specificity override here
	   would silently lose to them regardless of being inside @media. */
	.el-ld-pager .el-ld-pagelink {
		display: grid;
		grid-template-columns: 36px 1fr;
		grid-template-areas: "icon dir" "thumb who";
		align-items: center;
		column-gap: 9px;
		row-gap: 5px;
		flex: 1 1 50%;
		min-width: 0;
		padding: 13px 12px;
		border: none;
		border-radius: 0;
	}
	.el-ld-pager .el-ld-pagelink.prev { border-right: 1px solid rgba(0,0,0,0.09); }
	.el-ld-pager .el-ld-pagelink:hover { box-shadow: none; transform: none; }
	.el-ld-pager .el-ld-pagelink.next {
		grid-template-columns: 1fr 36px;
		grid-template-areas: "dir icon" "who thumb";
		justify-content: flex-end;
		text-align: right;
	}
	.el-ld-pager .el-ld-pagelink .ico {
		grid-area: icon;
		width: 22px; height: 22px;
		font-size: 9px;
		background: rgba(28,29,33,0.06);
		color: #6c6e74;
		justify-self: start;
	}
	.el-ld-pager .el-ld-pagelink.next .ico { justify-self: end; }
	.el-ld-pager .el-ld-pagelink:hover .ico { background: #1c1d21; color: #fff; }
	.el-ld-pager .el-ld-pagethumb { grid-area: thumb; width: 36px; height: 36px; border-radius: 10px; box-shadow: none; justify-self: start; }
	.el-ld-pager .el-ld-pagelink.next .el-ld-pagethumb { justify-self: end; }
	.el-ld-pager .el-ld-pagetext { display: contents; }
	.el-ld-pager .el-ld-pagelink .dir { grid-area: dir; display: block; font-size: 9px; letter-spacing: 0.03em; white-space: nowrap; margin: 0; }
	.el-ld-pager .el-ld-pagelink .who { grid-area: who; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; }
}
.el-ld-pagelink {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 18px 22px;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.el-ld-pagelink:hover { border-color: #1c1d21; box-shadow: 0 12px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.el-ld-pagelink.next { justify-content: flex-end; text-align: right; }
.el-ld-pagelink .ico {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-ld-pagelink:hover .ico { background: #1c1d21; color: #fff; }
.el-ld-pagelink .dir { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #a0a1a6; font-weight: 700; margin: 0 0 3px; }
.el-ld-pagelink .who { font-size: 16px; font-weight: 700; color: #1c1d21; margin: 0; }
.el-ld-pagethumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 5px 14px rgba(0,0,0,0.12);
	transition: box-shadow 0.2s ease;
}
.el-ld-pagelink:hover .el-ld-pagethumb { box-shadow: 0 8px 18px rgba(28,29,33,0.18); }

/* listing detail: right-aligned breadcrumb variant */
.el-breadcrumb.el-breadcrumb-right { justify-content: flex-end; text-align: right; }

/* ---- listing detail: favorite + share actions ----
   Compact pill/circle icon buttons sitting inline with the name in
   .el-ld-name-row (space-between pins this block to the row's right
   edge, vertically centered against the name text). flex-shrink:0
   keeps the buttons from being squeezed if the name ever runs long. */
.el-ld-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.el-ld-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 44px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	color: #1c1d21;
	font-size: 14px;
	cursor: pointer;
	border-radius: 50px;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.el-ld-action-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.el-ld-fav { width: auto; padding: 0 17px; }
.el-ld-fav i { color: #f0104a; font-size: 15px; transition: transform 0.2s ease; }
.el-ld-fav:hover { border-color: #f0104a; }
.el-ld-fav.is-active { background: #f0104a; border-color: #f0104a; color: #fff; }
.el-ld-fav.is-active i { color: #fff; transform: scale(1.15); }
.el-ld-fav-num { font-weight: 700; }
@media (max-width: 560px) {
	.el-ld-action-btn { height: 38px; font-size: 13px; }
	.el-ld-fav { padding: 0 13px; }
}

/* ---- listing detail: photo review rating ---- */
.el-ld-review-note { font-size: 14.5px; color: #808289; margin: 0 0 18px; }
.el-ld-rate-auth {
	display: grid;
	grid-template-columns: auto auto;
	gap: 10px;
	margin: 4px 0 0;
}
@media (max-width: 480px) { .el-ld-rate-auth { grid-template-columns: 1fr 1fr; } }
.el-ld-authbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 9px 18px;
	border-radius: 9px;
	font-size: 13px; font-weight: 700;
	background: #fff; cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.el-ld-authbtn i { font-size: 12px; }
.el-ld-authbtn.real { border: 1px solid #10b981; color: #0d9e70; }
.el-ld-authbtn.real:hover, .el-ld-authbtn.real.is-active { background: #10b981; color: #fff; box-shadow: 0 8px 18px rgba(16,185,129,0.28); transform: translateY(-1px); }
.el-ld-authbtn.fake { border: 1px solid #f0104a; color: #f0104a; }
.el-ld-authbtn.fake:hover, .el-ld-authbtn.fake.is-active { background: #f0104a; color: #fff; box-shadow: 0 8px 18px rgba(240,16,74,0.28); transform: translateY(-1px); }
.el-ld-authbtn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.el-ld-report-line {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(0,0,0,0.08);
	text-align: center;
}
.el-ld-report-line .q { font-size: 13.5px; color: #a0a1a6; margin: 0 0 6px; }
.el-ld-report-line a {
	font-size: 15px; font-weight: 700; color: #f0104a;
	display: inline-flex; align-items: center; gap: 7px;
}
.el-ld-report-line a:hover { color: #c00c3c; text-decoration: underline; }

/* ---- listing detail: Photos/Videos tabs above the gallery ---- */
.el-ld-gallery-tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.el-ld-gtab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0 0 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #a0a1a6;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.el-ld-gtab i { font-size: 15px; }
.el-ld-gtab:hover { color: #1c1d21; }
.el-ld-gtab.is-active { color: #1c1d21; border-bottom-color: #f0104a; }
/* "Videos" view: the mosaic collapses to just the video tile, kept at a
   narrow portrait width since profile videos are usually vertical phone
   footage — matches the same reasoning as the mobile video-tile redesign. */
.el-ld-mosaic.el-ld-mosaic--videos {
	display: flex;
	justify-content: center;
	aspect-ratio: auto;
}
.el-ld-mosaic.el-ld-mosaic--videos .el-ld-tile:not(.el-ld-tile-video) { display: none; }
  .el-ld-mosaic.el-ld-mosaic--videos .el-ld-tile-video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  }

/* ---- listing detail: mosaic gallery (big photo + video tile + small tiles) ---- */
.el-ld-mosaic {
	display: grid;
	/* main photo and video get equal, wider columns; the small photo stack
	   gets a narrower third column — echoes a photo-grid + featured-video
	   layout instead of a plain uniform grid. */
	grid-template-columns: 1.3fr 1.3fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 12px;
	/* shorter than the original 16/10 — a smaller featured tile keeps
	   lower-resolution user-uploaded photos from stretching too large
	   (via object-fit:cover) and looking soft/pixelated */
	aspect-ratio: 2.3 / 1;
	margin-bottom: 44px;
}
.el-ld-tile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #23242a;
	cursor: pointer;
}
.el-ld-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.el-ld-tile:hover img { transform: scale(1.05); }
.el-ld-tile-main {
	grid-column: 1;
	grid-row: 1 / 3;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
/* Video tile — same footprint as the featured photo tile, sitting right
   beside it as its own peer in the grid (not a separate block below the
   gallery). The remaining 2 small tiles auto-place into the narrow third
   column, one per row. */
.el-ld-tile-video {
	grid-column: 2;
	grid-row: 1 / 3;
	border-radius: 18px;
	background: #14151a;
	box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
.el-ld-tile-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #14151a; }
.el-ld-tile-video .el-ld-video-poster {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.el-ld-tile-video .el-ld-video-poster::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,14,16,0.1) 0%, rgba(14,14,16,0.5) 100%);
	transition: background 0.2s ease;
}
.el-ld-tile-video .el-ld-video-poster:hover::after { background: linear-gradient(180deg, rgba(14,14,16,0.18) 0%, rgba(14,14,16,0.58) 100%); }
.el-ld-tile-video .el-ld-video-play {
	position: relative; z-index: 2;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.94);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,0.24);
	transition: transform 0.2s ease, background 0.2s ease;
}
.el-ld-tile-video .el-ld-video-poster:hover .el-ld-video-play { transform: scale(1.07); background: #fff; }
.el-ld-tile-video .el-ld-video-play i { color: #1c1d21; font-size: 20px; margin-left: 3px; }
.el-ld-tile-video .el-ld-video-badge {
	position: absolute; left: 16px; bottom: 16px;
	z-index: 2;
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(34,36,42,0.82);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 15px;
	border-radius: 50px;
	letter-spacing: 0.4px;
}
.el-ld-tile-video .el-ld-video-badge i { font-size: 11px; }
/* verified badge on featured tile */
.el-ld-mosaic .el-ld-gverified {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(34,36,42,0.82);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 15px;
	border-radius: 50px;
	letter-spacing: 0.4px;
}
.el-ld-mosaic .el-ld-gverified i { color: #ff4d7d; }
/* "Ad Expired" badge — pulled off the header text block and onto the
   main photo instead (top-right, opposite "Photos Verified"). Neutral
   dark-gray fill (not the site's pink accent, not the live badge's
   green) since this is a passive/inactive state, not a call-to-action;
   a static clock icon (vs. the live badge's dot) reads as "time's up"
   rather than "online now". */
/* [hidden] must be declared explicitly since display:inline-flex below
   would otherwise win over the UA stylesheet's [hidden]{display:none}. */
.el-ld-mosaic .el-ld-gexpired[hidden] { display: none; }
.el-ld-mosaic .el-ld-gexpired {
	position: absolute;
	top: 16px; right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(60,61,66,0.88);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 15px;
	border-radius: 50px;
	letter-spacing: 0.4px;
	cursor: default;
}
.el-ld-mosaic .el-ld-gexpired i { font-size: 12px; }
@media (max-width: 560px) {
	.el-ld-mosaic .el-ld-gexpired { font-size: 11px; padding: 7px 12px; }
}
/* "Available Now" live-status badge — bottom-left corner of the main
   photo, diagonally opposite "Photos Verified" (top-left) and clear of
   the bottom-right zoom button, so all three overlays sit in their own
   corner with no crowding. Green "live/online" tint (matching the
   homepage's "Online now" tag) rather than the pink accent, since this
   is a positive-status indicator, not a brand/verification badge.
   Hidden automatically whenever the ad is expired ("Ad Expired" takes
   the opposite top-right corner instead). */
.el-ld-mosaic .el-ld-glive[hidden] { display: none; }
.el-ld-mosaic .el-ld-glive {
	position: absolute;
	left: 16px; bottom: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(22,130,79,0.9);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px; font-weight: 700;
	padding: 8px 15px;
	border-radius: 50px;
	letter-spacing: 0.4px;
}
.el-ld-mosaic .el-ld-glive .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #baffd9;
	flex-shrink: 0;
}
@media (max-width: 560px) {
	.el-ld-mosaic .el-ld-glive { font-size: 11px; padding: 7px 12px; }
}
/* zoom hint on featured tile */
.el-ld-tile-main .zoom {
	position: absolute;
	right: 16px; bottom: 16px;
	z-index: 2;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #1c1d21;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.18);
	transition: transform 0.2s ease;
}
.el-ld-tile-main:hover .zoom { transform: scale(1.1); }
/* "view all" overlay on the last visible tile */
.el-ld-tile-more::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(20,21,25,0.55);
	transition: background 0.2s ease;
}
.el-ld-tile-more:hover::after { background: rgba(20,21,25,0.42); }
.el-ld-tile-more .more {
	position: absolute; inset: 0;
	z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px;
	color: #fff;
	font-size: 14px; font-weight: 700;
	letter-spacing: 0.3px;
}
.el-ld-tile-more .more i { font-size: 20px; }

/* "More Photos" section — a bento-style mosaic of the listing's
   remaining shots (mixed large/small tiles, echoing the top mosaic's
   own big-photo-plus-small-tiles rhythm instead of a flat uniform
   grid), sitting between the two-column body and the prev/next pager.
   Reuses the same .el-ld-h section-heading style as "Related Listings"
   below it, and opens the same lightbox pattern as the top mosaic (own
   magnificPopup gallery grouping, see the inline script). Sizing is
   done via nth-child grid-column/grid-row assignments rather than a
   generic auto-flow so each of the 6 tiles keeps a deliberate, fixed
   place in the mosaic instead of shuffling as photos are swapped. */
.el-ld-morephotos { margin-top: 64px; }
.el-ld-moregrid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 12px;
	aspect-ratio: 2.5 / 1;
}
.el-ld-moretile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.el-ld-moretile:nth-child(2) { grid-column: 3; grid-row: 1; }
.el-ld-moretile:nth-child(3) { grid-column: 4; grid-row: 1; }
.el-ld-moretile:nth-child(4) { grid-column: 5; grid-row: 1; }
.el-ld-moretile:nth-child(5) { grid-column: 3 / 5; grid-row: 2; }
.el-ld-moretile:nth-child(6) { grid-column: 5; grid-row: 2; }
.el-ld-moretile {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: #23242a;
	cursor: pointer;
}
.el-ld-moretile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.el-ld-moretile:hover img { transform: scale(1.06); }
.el-ld-moretile::after { content: ""; position: absolute; inset: 0; background: rgba(20,21,25,0); transition: background 0.2s ease; }
.el-ld-moretile:hover::after { background: rgba(20,21,25,0.32); }
.el-ld-moretile .zoom {
	position: absolute; inset: 0;
	z-index: 2;
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.el-ld-moretile:hover .zoom { opacity: 1; }
.el-ld-moretile .zoom i {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #1c1d21;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
}
@media (max-width: 900px) {
	.el-ld-moregrid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 1fr);
		aspect-ratio: 1 / 1;
	}
	.el-ld-moretile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
	.el-ld-moretile:nth-child(2) { grid-column: 3; grid-row: 1; }
	.el-ld-moretile:nth-child(3) { grid-column: 3; grid-row: 2; }
	.el-ld-moretile:nth-child(4) { grid-column: 1; grid-row: 3; }
	.el-ld-moretile:nth-child(5) { grid-column: 2; grid-row: 3; }
	.el-ld-moretile:nth-child(6) { grid-column: 3; grid-row: 3; }
}
@media (max-width: 560px) {
	.el-ld-morephotos { margin-top: 40px; }
	.el-ld-moregrid { gap: 8px; }
}

@media (max-width: 700px) {
	.el-ld-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		aspect-ratio: auto;
	}
	.el-ld-tile-main { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 3 / 2; }
	.el-ld-tile { aspect-ratio: 1 / 1; }
	/* the video tile drops out of its dedicated desktop column and takes a
	   normal small-tile slot in the 2-column grid, right alongside the
	   photos — no more oversized full-width player eating the screen. */
	.el-ld-tile-video { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
	.el-ld-tile-video .el-ld-video-play { width: 40px; height: 40px; }
	.el-ld-tile-video .el-ld-video-play i { font-size: 14px; margin-left: 2px; }
	.el-ld-tile-video .el-ld-video-badge { left: 10px; bottom: 10px; padding: 4px 9px; font-size: 11px; }
	.el-ld-tile-video .el-ld-video-badge i { font-size: 10px; }
}

/* ======================================================
   Login / Sign In page  (el-login- prefix)
   ====================================================== */
.el-login-wrap {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	max-width: 1180px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}
@media (max-width: 800px) {
	.el-login-wrap { grid-template-columns: 1fr; }
	/* on small screens the dark benefits panel comes first in the markup and
	   pushes the actual form way down. Put the white form card on top so the
	   user reaches the inputs immediately, with the benefits below it. */
	.el-login-main { order: 0; }
	.el-login-aside { order: 1; }
}

/* Login / Register / Forgot Password on mobile: the breadcrumb's
   margin-top-30 and the login section's margin-top-35 utility classes
   (both !important, sized for the desktop layout) were stacking into a
   large, visually empty gap between the hero lead text and the card once
   the mobile hero itself got much shorter — override both, scoped via
   :has() to just these 3 auth pages, at matching !important specificity
   so they reliably beat the shared utility classes' own !important. */
@media (max-width: 767px) {
	.container.margin-top-30:has(+ .el-faq .el-login-wrap) { margin-top: 14px !important; }
	.el-faq.margin-top-35:has(.el-login-wrap) { margin-top: 8px !important; }
}

/* left: brand / benefits panel */
.el-login-aside {
	position: relative;
	/* SAMPLE — moody editorial portrait behind a dark gradient scrim so the
	   benefits list stays fully legible. Swap the url() once a final image
	   is picked; drop back to the plain gradient above if not wanted. */
	background-image: linear-gradient(155deg, rgba(38,40,46,0.55) 0%, rgba(23,24,28,0.88) 100%), url('../images/gen/login-aside-bg-sample-1.png');
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
.el-login-aside h2 { color: #fff; font-size: 24px; line-height: 1.3; margin: 0 0 14px; text-wrap: balance; }
.el-login-aside p { color: rgba(255,255,255,0.68); font-size: 15px; line-height: 1.7; margin: 0 0 28px; }
.el-login-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.el-login-benefits li { display: flex; align-items: flex-start; gap: 13px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.el-login-benefits i {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	border-radius: 9px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
}
.el-login-benefits li strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

/* right: form panel */
.el-login-main { padding: 48px 44px; display: flex; flex-direction: column; }
@media (max-width: 520px) { .el-login-aside, .el-login-main { padding: 34px 26px; } }
.el-login-main h1 { font-size: 22px; color: #2f2d33; margin: 0 0 6px; }
.el-login-main .el-login-sub { font-size: 14px; color: #8a8b91; margin: 0 0 28px; }

.el-login-field { margin-bottom: 18px; }
.el-login-hint { margin: 7px 2px 0; font-size: 12.5px; line-height: 1.5; color: #8a8b91; }
.el-login-hint.is-error { color: #d92d20; }
.el-login-field input[aria-invalid="true"] { border-color: #d92d20; }
.el-login-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #55575d;
	margin-bottom: 8px;
	letter-spacing: 0.2px;
}
.el-login-input-wrap { position: relative; }
.el-login-input-wrap i {
	position: absolute;
	left: 15px; top: 50%;
	transform: translateY(-50%);
	color: #b3b4b9;
	font-size: 16px;
}
.el-login-field input[type="text"],
.el-login-field input[type="email"],
.el-login-field input[type="password"] {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 16px 0 44px;
	border: 1px solid rgba(0,0,0,0.14);
	border-radius: 11px;
	font-size: 14.5px;
	color: #1c1d21;
	background: #fafafa;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.el-login-field input:focus {
	outline: none;
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.1);
}

.el-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 24px;
}
.el-login-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #6a6c72; cursor: pointer; }
.el-login-remember input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #1c1d21; }
.el-login-lost { font-size: 13.5px; color: #1c1d21; font-weight: 600; }
.el-login-lost:hover { color: #f0104a; }

.el-login-submit {
	width: 100%;
	height: 52px;
	border: none;
	border-radius: 12px;
	background: #1c1d21;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-shadow: 0 10px 26px rgba(28,29,33,0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.el-login-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(28,29,33,0.38); }

.el-login-alt {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(0,0,0,0.08);
	text-align: center;
	font-size: 14px;
	color: #8a8b91;
}
.el-login-alt a { color: #1c1d21; font-weight: 700; }
.el-login-alt a:hover { color: #f0104a; }

/* register: terms agreement row */
.el-login-terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 22px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6a6c72;
	cursor: pointer;
}
.el-login-terms input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: #1c1d21; }
.el-login-terms a { color: #1c1d21; font-weight: 600; }
.el-login-terms a:hover { color: #f0104a; }

/* register: captcha row */
.el-login-captcha {
	display: flex;
	align-items: center;
	gap: 12px;
}
.el-login-captcha .el-login-input-wrap { flex: 1 1 auto; }
.el-login-captcha-img {
	flex: 0 0 auto;
	height: 50px;
	box-sizing: border-box;
	padding: 0;
	border: 1px solid rgba(0,0,0,0.14);
	border-radius: 11px;
	background: #eef0f2;
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.el-login-captcha-img:hover { border-color: #1c1d21; box-shadow: 0 0 0 3px rgba(28,29,33,0.1); }
.el-login-captcha-img canvas { display: block; height: 100%; width: 120px; }

/* forgot password: success note */
.el-login-note {
	display: none;
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 11px;
	background: #e7f8f0;
	border: 1px solid rgba(11,145,102,0.28);
	color: #0b7a56;
	font-size: 13.5px;
	line-height: 1.55;
}
.el-login-note.ok { display: block; }

/* the theme still clones #header for its old sticky mode; we don't use it */
#header-container:not(.dashboard) #header.cloned { display: none !important; }

@media (min-width: 1025px) {
	#header-container:not(.dashboard) {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1000;
	}
	.el-citybar {
		position: relative;
		z-index: 900;
		background: #ffffff;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}
	.el-citybar .container { position: relative; }
	/* keep the city nav on one tidy row inside its bar */
	.el-citybar #navigation.style-1 {
		float: none;
		margin: 0;
		display: flex;
	}
	.el-citybar #navigation.style-1 > ul#responsive {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 6px 0;
		margin: 0;
	}
	.el-citybar #navigation.style-1 > ul#responsive > li { float: none; }
	.el-citybar #navigation.style-1 > ul#responsive > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	/* let the first/last links sit flush with the container edges */
	.el-citybar #navigation.style-1 > ul#responsive > li:first-child > a { padding-left: 0; }
	.el-citybar #navigation.style-1 > ul#responsive > li:last-child > a { padding-right: 0; }
	.el-citybar #navigation.style-1 > ul#responsive > li:first-child > a:before { left: 0; }
	.el-citybar #navigation.style-1 > ul#responsive > li:last-child > a:before { right: 0; }
	/* the active-state underline (a.current:after, defined further below)
	   assumes 16px of padding on both sides to sit under just the label
	   text — but the flush-edge rule above zeroes that padding out on
	   the first/last link, so without a matching override here the
	   underline's left/right inset no longer lines up with where the
	   (now flush) text actually starts/ends, cutting the line short and
	   shifting it toward the middle instead of spanning the full label. */
	.el-citybar #navigation.style-1 > ul#responsive > li:first-child > a.current:after { left: 0; }
	.el-citybar #navigation.style-1 > ul#responsive > li:last-child > a.current:after { right: 0; }
}

/* hide the standalone city bar on mobile (mobile uses the off-canvas menu) */
@media (max-width: 1024px) {
	.el-citybar { display: none !important; }

	/* Mobile: pin the whole header (logo + hamburger) to the top on
	   scroll. On mobile the nav collapses to the off-canvas menu so the
	   header is a single compact row; #header-container already carries
	   the dark gradient surface and the working hamburger trigger, so we
	   simply make it sticky (no fragile cloned header whose hamburger
	   wouldn't be bound to mmenu). */
	#header-container:not(.dashboard) {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1000;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	}
}

/* ---- Content canvas ---- */
#dashboard { background-color: #ffffff; }
/* Right padding is 0 (not 40px like the left) so the search bar / listing
   cards flush out to the same right edge as the city-nav bar and the
   #dashboard container above them — Bootstrap's .row negative margin
   (-15px) and its child .col's padding (+15px) cancel out, so whatever
   padding sits here is exactly how far short of that shared edge the
   actual visible content stops. */
#dashboard .dashboard-content { padding: 82px 0 30px 40px; }

/* ---- Titlebar ---- */
#dashboard #titlebar { margin: 0 0 32px 0; }
#dashboard #titlebar h2 {
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -0.4px;
}
#dashboard #breadcrumbs { padding: 0; margin-top: 6px; }
#dashboard #breadcrumbs ul li,
#dashboard #breadcrumbs ul li a { font-size: 13px; color: #9a9ba1; }
#dashboard #breadcrumbs ul li a:hover { color: #f0104a; }

/* ---- Success notice ---- */
#dashboard .notification.success {
	background: #eef9f0;
	border: 1px solid #cdeed4;
	border-radius: 14px;
	color: #2f7d43;
	box-shadow: none;
}
#dashboard .notification.success p { color: #2f7d43; }
#dashboard .notification.success strong { color: #216233; }

/* ---- Stat cards (signature element) ---- */
#dashboard .dashboard-stat {
	height: auto;
	min-height: 128px;
	background: #fff !important;
	border: 1px solid #ececef;
	border-radius: 16px;
	color: #1c1d21;
	padding: 24px 26px;
	overflow: visible;
	box-shadow: 0 1px 2px rgba(20,20,25,0.04);
	transition: transform .25s ease, box-shadow .25s ease;
}
#dashboard .dashboard-stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(20,20,25,0.10);
}
#dashboard .dashboard-stat .dashboard-stat-content {
	position: static;
	transform: none;
	width: auto;
	padding-right: 62px;
}
#dashboard .dashboard-stat .dashboard-stat-content h4 {
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -1px;
	margin: 6px 0 0;
}
#dashboard .dashboard-stat .dashboard-stat-content span {
	font-size: 14px;
	font-weight: 500;
	color: #86878d;
	margin-top: 10px;
}
/* icon becomes a rounded accent chip, top-right */
#dashboard .dashboard-stat .dashboard-stat-icon {
	position: absolute;
	right: 26px;
	top: 24px;
	transform: none;
	opacity: 1;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
/* per-card accent tints */
#dashboard .dashboard-stat.color-1 .dashboard-stat-icon { background: rgba(76,168,42,0.12); color: #4ca82a; }
#dashboard .dashboard-stat.color-2 .dashboard-stat-icon { background: rgba(240,16,74,0.10); color: #f0104a; }
#dashboard .dashboard-stat.color-3 .dashboard-stat-icon { background: rgba(226,148,0,0.14); color: #e29400; }
#dashboard .dashboard-stat.color-4 .dashboard-stat-icon { background: rgba(243,16,60,0.10); color: #f3103c; }

/* keep the 3 quick-stat cards on one row on mobile, sized down to fit */
@media (max-width: 767px) {
	#dashboard .el-ds-stat-row { margin-left: -5px; margin-right: -5px; }
	#dashboard .el-ds-stat-row > [class*="col-"] { padding-left: 5px; padding-right: 5px; }
	#dashboard .el-ds-stat-row .dashboard-stat { min-height: auto; padding: 14px 10px; border-radius: 12px; }
	#dashboard .el-ds-stat-row .dashboard-stat-content { padding-right: 0; }
	#dashboard .el-ds-stat-row .dashboard-stat-content h4 { font-size: 21px; letter-spacing: -0.5px; margin: 24px 0 0; }
	#dashboard .el-ds-stat-row .dashboard-stat-content span { display: block; font-size: 10.5px; line-height: 1.3; margin-top: 4px; }
	#dashboard .el-ds-stat-row .dashboard-stat-icon { top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
}

/* ---- List boxes (Recent Activities / Invoices) ---- */
#dashboard .dashboard-list-box {
	background: #fff;
	border: 1px solid #e7e7ea;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(20, 20, 22, 0.04);
	overflow: hidden;
}
#dashboard .dashboard-list-box h4 {
	font-size: 16px;
	font-weight: 700;
	color: #1c1d21;
	background: transparent;
	border-bottom: none;
	padding: 24px 28px 16px;
	border-radius: 0;
}
#dashboard .dashboard-list-box ul li {
	padding: 18px 28px;
	border-bottom: 1px solid #f4f4f6;
	color: #55565c;
	font-size: 14px;
}
/* rows with a leading icon chip need left room for the absolute icon */
#dashboard .dashboard-list-box.with-icons ul li { padding-left: 84px; }
#dashboard .dashboard-list-box ul li:last-child { border-bottom: none; }
#dashboard .dashboard-list-box ul li strong a { color: #1c1d21; }
#dashboard .dashboard-list-box ul li strong a:hover { color: #f0104a; }
#dashboard .dashboard-list-box ul li i.list-box-icon {
	color: #b7b8bd;
	background: #f6f6f8;
	border-radius: 11px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	left: 28px;
}
#dashboard .dashboard-list-box ul li:hover i.list-box-icon { background: #f0e6ea; color: #f0104a; }
/* invoice status pills */
#dashboard .dashboard-list-box.invoices ul li.unpaid,
#dashboard .dashboard-list-box.invoices ul li.paid {
	font-weight: 600;
	font-size: 12px;
	padding-left: 18px;
	position: relative;
}
#dashboard .dashboard-list-box.invoices ul li.paid { color: #4ca82a; }
#dashboard .dashboard-list-box.invoices ul li.unpaid { color: #f0104a; }
/* invoice button → soft neutral pill */
#dashboard .dashboard-list-box .button.gray {
	background: #f4f5f7;
	color: #55565c;
	border-radius: 50px;
	font-weight: 600;
	box-shadow: none;
	transition: 0.25s;
}
#dashboard .dashboard-list-box .button.gray:hover {
	background: #f0104a;
	color: #fff;
}

/* ======================================================
   Escort Locate — Dashboard sidebar (app-shell rail)
   Profile header + CTA + rounded pill nav + support card.
   Full-height CLEAN LIGHT rail (white surface, pink accent),
   matching the light content cards for an airy dashboard.
   ====================================================== */
#dashboard { align-items: stretch; }
#dashboard .dashboard-nav {
	width: 284px;
	margin: 0;
	border-radius: 0;
	padding: 0;
	align-self: stretch;
	/* clean white rail; a hairline right border + soft shadow lift it off the
	   light-grey (#f4f5f7) content canvas so it still reads as its own panel */
	background: #ffffff;
	border-right: 1px solid #ececef;
	box-shadow: 8px 0 30px rgba(28,29,33,0.05);
	overflow: visible;
}
/* menu stays visible while scrolling long pages (offset clears pinned header + a bit of breathing room).
   Also neutralizes the legacy .dashboard-nav-inner scrollbar-hiding hack (width:calc(100%+17px) +
   overflow-y:scroll, meant to be clipped away by a parent's overflow:hidden) — this rail's parent
   .dashboard-nav now uses overflow:visible for the sticky/shadow treatment above, so that hack's
   17px-wide native scrollbar was no longer being clipped and rendered as a visible bar next to the
   sidebar. The rail doesn't need its own internal scroll (it's short/sticky), so scrolling is simply
   turned off here instead. */
#dashboard .dashboard-nav-inner {
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	padding: 58px 18px 22px;
	width: 100%;
	max-height: none;
	overflow-y: visible;
}

/* ---- Profile header ---- */
#dashboard .el-ds-profile {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 6px 10px 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ececef;
}
#dashboard .el-ds-avatar { position: relative; flex: 0 0 auto; }
#dashboard .el-ds-avatar img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ececef;
}
#dashboard .el-ds-online {
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #34d17a;
	border: 2px solid #ffffff;
}
#dashboard .el-ds-id { min-width: 0; }
#dashboard .el-ds-id strong {
	display: block;
	color: #1c1d21;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#dashboard .el-ds-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	color: #ffb3c1;
	background: rgba(255,77,109,0.14);
	padding: 3px 9px;
	border-radius: 50px;
}
#dashboard .el-ds-badge i { font-size: 12px; }

/* ---- Add New Listing CTA ---- */
#dashboard .el-ds-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 4px 22px;
	padding: 13px 16px;
	border-radius: 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	background: #1c1d21;
	box-shadow: 0 8px 20px rgba(28,29,33,0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#dashboard .el-ds-cta i { font-size: 15px; }
#dashboard .el-ds-cta:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(28,29,33,0.4);
}

/* ---- Nav groups ---- */
#dashboard .dashboard-nav ul {
	margin: 0 0 22px;
	background: none;
}
#dashboard .dashboard-nav ul:before {
	content: attr(data-submenu-title);
	display: block;
	color: #9a9ea8;
	letter-spacing: 1.3px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 14px;
	margin-bottom: 8px;
}

/* ---- Top-level Dashboard link (Main group) ---- */
#dashboard .dashboard-nav ul.el-ds-top {
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #ececef;
}

/* ---- Pill nav items ---- */
#dashboard .dashboard-nav ul li {
	border: none;
	margin: 2px 0;
}
#dashboard .dashboard-nav ul li a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #4a4b52;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 11px;
	border: none;
	transition: background 0.18s ease, color 0.18s ease;
}
#dashboard .dashboard-nav ul li a i {
	color: #b7b8bd;
	font-size: 17px;
	width: 20px;
	text-align: center;
	transition: color 0.18s ease;
}
#dashboard .dashboard-nav ul li a:hover {
	background: #f4f5f7;
	color: #1c1d21;
}
#dashboard .dashboard-nav ul li a:hover i { color: #f0104a; }
/* Active nav item — light tint chip instead of a solid pink-gradient
   fill (matches the site's "pink is an accent, never a large solid
   fill" rule, same language as the Verified/Active status badges).
   A thin pink bar on the left reads as the "you are here" marker so
   the accent still shows even with an off-white background. */
#dashboard .dashboard-nav ul li.active a {
	position: relative;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	box-shadow: none;
}
#dashboard .dashboard-nav ul li.active a:before {
	content: '';
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 3px;
	background: #f0104a;
}
#dashboard .dashboard-nav ul li.active a i { color: #f0104a; }

/* count badges → right-aligned pills */
#dashboard .dashboard-nav ul li a .nav-tag {
	position: static;
	margin: 0 0 0 auto;
	top: auto;
	right: auto;
	min-width: 22px;
	height: 20px;
	line-height: 20px;
	padding: 0 7px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 50px;
	color: #fff;
	text-align: center;
}
#dashboard .dashboard-nav ul li.active a .nav-tag {
	background: rgba(240,16,74,0.85) !important;
	color: #fff;
}

/* ---- Support card fills the rail bottom ---- */
#dashboard .el-ds-help {
	margin-top: auto;
	margin-bottom: 0;
	padding: 20px 18px;
	border-radius: 14px;
	background: #f6f6f8;
	border: 1px solid #ececef;
	text-align: center;
}
#dashboard .el-ds-help-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255,77,109,0.16);
	color: #ff6b85;
	font-size: 19px;
	margin-bottom: 10px;
}
#dashboard .el-ds-help strong {
	display: block;
	color: #1c1d21;
	font-size: 14px;
	font-weight: 700;
}
#dashboard .el-ds-help p {
	color: #8b90a0;
	font-size: 12.5px;
	line-height: 1.5;
	margin: 4px 0 14px;
}
#dashboard .el-ds-help-btn {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid #e2e2e6;
	color: #55565c;
	font-size: 13px;
	font-weight: 600;
	transition: 0.2s ease;
}
#dashboard .el-ds-help-btn:hover {
	background: #f0104a;
	color: #fff;
	border-color: #f0104a;
}

/* #dashboard.container deliberately has no width/max-width override here.
   It must stay on the plain shared .container (max-width:1210px, centered,
   padding:0 15px) so its left/right edges line up exactly with the header
   nav's own .container above it — matching the nav's edge, not the
   viewport edge, is the actual goal. */

@media (max-width: 991px) {
	/* The desktop layout is a flex ROW (dark rail + content). On mobile that
	   row crushed .dashboard-content into the sliver of space left beside the
	   ~90%-wide nav, pushing the form off-screen (horizontal overflow). Stack
	   the trigger → nav → content vertically so the content gets full width. */
	#dashboard { flex-direction: column; flex-wrap: nowrap; }
	/* Consolidate the stacked gutters into ONE small edge gap so the content
	   and the nav trigger use the maximum width without touching the screen
	   edges. Base .container had 15px + .dashboard-content added 11px = 26px
	   of wasted inset, and the theme trigger sat at 90%/5% (even narrower).
	   Keep the single gutter at 15px to exactly absorb Bootstrap's .row
	   negative margins (margin:0 -15px) inside the content — a smaller value
	   lets those rows poke out and re-introduces a tiny horizontal scroll. */
	#dashboard.container { padding-left: 15px; padding-right: 15px; }
	#dashboard .dashboard-content {
		width: 100%;
		flex: 0 0 auto;
		/* no horizontal padding here — the 12px container gutter is the only
		   edge gap, so the cards line up flush to it at full width. */
		padding: 18px 0 10px;
		margin-left: 0;
	}
	/* The "Dashboard Navigation" trigger lives in the header (see the
	   .el-dash-menu-pill rules above) and now opens an off-canvas drawer
	   (buildDashDrawer() in custom.js, reusing the same .el-drawer markup
	   as the main mobile menu) instead of expanding this sidebar inline —
	   so the sidebar itself is simply hidden on mobile. */
	#dashboard .dashboard-nav { display: none; }
	/* Separate the title + breadcrumb block from the nav bar above it so the
	   breadcrumb doesn't sit tight under the "Dashboard Navigation" bar. */
	#dashboard #titlebar { margin-top: 10px; }
	/* give the breadcrumb some air below the big title (was ~6px, too tight).
	   The h2 line-box already adds a little slack, so this reads as a clear
	   but not excessive gap between the title and the breadcrumb trail. */
	#dashboard #titlebar #breadcrumbs { margin-top: 12px; }
}

/* ======================================================
   Escort Locate — Add Listing redesign (scoped to .el-al)
   Premium, clean form: white cards, pink accent chips,
   soft inputs, feature pills, upload dropzone, gradient CTA.
   ====================================================== */
.el-al { max-width: 1000px; }
.el-al .el-al-card {
	/* No overflow:hidden here (on purpose) — every child background is
	   transparent/white against this card's own white fill, so rounded
	   corners never need clipping, and clipping would cut off the
	   absolutely-positioned .el-dd-menu dropdown whenever it opens near
	   the bottom of a card. */
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20,20,25,0.04);
	margin-bottom: 16px;
}
.el-al .el-al-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 24px;
	border-bottom: 1px solid #f0f0f2;
	flex-wrap: wrap;
}
.el-al .el-al-card-ic {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	background: #1c1d21;
	box-shadow: 0 6px 16px rgba(28,29,33,0.24);
	flex: 0 0 auto;
}
.el-al .el-al-card-head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -0.2px;
	line-height: 1.2;
}
.el-al .el-al-card-head h3 b { color: #f0104a; font-weight: 700; }
.el-al .el-al-head-note {
	flex-basis: 100%;
	margin-left: 50px;
	margin-top: -4px;
	font-size: 13px;
	color: #9a9ba1;
}
.el-al .el-al-card-body { padding: 20px 24px 22px; }

/* ---- fields ---- */
.el-al .el-al-grid[hidden] { display: none; }
.el-al .el-al-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 22px;
}
  .el-al .el-al-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .el-al .el-al-field[hidden] { display: none; }
  /* min-width:0 overrides the grid item default of min-width:auto, which
   otherwise floors each field at its content's min-content width. The
   Suburb combo's placeholder/icon content has a min-content wider than
   its fair 1fr share, so without this the two-column .el-al-grid blows
   out past its container and overflows the mobile viewport on the right
   (the City column shrinks to compensate, Suburb still doesn't fit). */
.el-al .el-al-field { display: flex; flex-direction: column; min-width: 0; }
  /* Phone spans the full row while its WhatsApp sibling is hidden (i.e.
     "This number is also on WhatsApp" is checked) — reverts to a normal
     half-width column the moment the WhatsApp Number field appears. */
  .el-al .el-al-grid:has(> #al-whatsapp-field[hidden]) > #al-phone-field {
  grid-column: 1 / -1;
  }
.el-al .el-al-mt { margin-top: 16px; }
.el-al .el-al-field > label {
	font-size: 13.5px;
	font-weight: 600;
	color: #1c1d21;
	margin-bottom: 7px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.el-al .el-al-field > label b { color: #f0104a; font-weight: 700; }
.el-al .el-al-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #9a9ba1;
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	cursor: help;
}

/* WhatsApp "same as phone" checkbox row — sits below the Phone field in
   the Contact card. A plain checkbox row (not a pill, unlike .el-al-feat)
   since this is a single yes/no toggle, not one of several selectable
   feature tags. The WhatsApp glyph keeps its own brand green for
   recognizability, same convention already used on the listing detail
   page's WhatsApp button. */
.el-al .el-al-check-row {
	/* position:relative — without this, the child input's position:absolute
	   below has no positioned ancestor of its own and falls back to a
	   distant one (the page's .col-lg-12 column), which let the invisible
	   checkbox stretch to that column's full width and overflow off the
	   right edge of the mobile viewport. Same fix already applied to the
	   sibling .el-al-feat pill-toggle component below. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	cursor: pointer;
	user-select: none;
}
.el-al .el-al-check-row input { position: absolute; opacity: 0; pointer-events: none; }
.el-al .el-al-check-box {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid #d5d6db;
	border-radius: 6px;
	background: #fcfcfd;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.el-al .el-al-check-row:hover .el-al-check-box { border-color: #9a9ba1; }
.el-al .el-al-check-row:has(input:checked) .el-al-check-box {
	background: #1c1d21 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5L10 1' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	border-color: #1c1d21;
}
.el-al .el-al-check-txt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: #1c1d21;
	white-space: nowrap;
}
.el-al .el-al-check-txt i.fa-whatsapp { font-size: 16px; color: #25d366; }
.el-al-label-ic { font-size: 14px; color: #25d366; }

.el-al input[type="text"],
.el-al textarea,
.el-al select {
	width: 100%;
	border: 1px solid #e3e3e7;
	border-radius: 10px;
	background: #fcfcfd;
	padding: 10px 14px;
	font-size: 14px;
	color: #1c1d21;
	line-height: inherit;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
	height: auto;
	margin: 0;
}
/* Multi-line content still reads best with a roomier ratio than the
   page's inherited single-line value, so textarea keeps its own. */
.el-al textarea { resize: vertical; min-height: 104px; line-height: 1.4; }
.el-al input[type="text"]::placeholder,
.el-al textarea::placeholder { color: #b0b1b7; }
.el-al input[type="text"]:focus,
.el-al textarea:focus,
.el-al select:focus {
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(28,29,33,0.08);
	outline: none;
}
 .el-al select {
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239a9ba1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  }

/* ---- Custom-styled dropdowns (Nationality/Height/Age/Breast size/City/
   Suburb + Working Hours time pickers) — same floating .el-dd menu component
   scripts/custom.js already uses on Map Search / Advanced Search, restyled
   with this page's own field metrics (border/radius/padding) so the swapped-
   in control blends with the surrounding form instead of looking foreign. */
.el-al .el-dd { position: relative; }
.el-al .el-dd-native { display: none !important; }
.el-al .el-dd-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	border: 1px solid #e3e3e7;
	border-radius: 10px;
	background: #fcfcfd;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.el-al .el-dd-trigger:hover { border-color: rgba(28,29,33,0.28); }
.el-al .el-dd.is-open .el-dd-trigger,
.el-al .el-dd-trigger:focus-visible {
	outline: none;
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(28,29,33,0.08);
}
.el-al .el-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-al .el-dd-trigger.is-active .el-dd-label { color: #1c1d21; font-weight: 700; }
.el-al .el-dd-chev { flex: 0 0 auto; width: 12px; height: 12px; color: #9a9ba1; transition: transform .22s ease, color .18s ease; }
.el-al .el-dd.is-open .el-dd-chev { transform: rotate(180deg); color: #1c1d21; }
.el-al .el-dd-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid #edeef1;
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(28,29,33,0.28), 0 4px 12px rgba(28,29,33,0.06);
	padding: 6px;
	max-height: 280px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.el-al .el-dd.is-open .el-dd-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.el-al .el-dd-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}
.el-al .el-dd-option:hover { background: rgba(28,29,33,0.05); color: #1c1d21; }
.el-al .el-dd-option.is-selected { background: rgba(28,29,33,0.07); color: #1c1d21; font-weight: 700; }
.el-al .el-dd-check { flex: 0 0 auto; width: 15px; height: 15px; color: #1c1d21; opacity: 0; transform: scale(.6); transition: opacity .14s ease, transform .14s ease; }
.el-al .el-dd-option.is-selected .el-dd-check { opacity: 1; transform: scale(1); }

/* Working Hours time pickers reuse the same component inline in a tight
   grid row, so the trigger is more compact than the full-width field
   style above (matches the old .el-al-hr select's own compact metrics). */
.el-al-hours-row .el-dd-trigger { padding: 8px 12px; font-size: 13.5px; }
/* Every hours <select> loads with a pre-filled data-def value ("10 AM"/
   "1 AM"), so .el-dd-trigger.is-active is present from first paint —
   unlike every other .el-al dropdown on this page (City, Nationality,
   etc.), which starts on an empty placeholder and only earns the
   font-weight:700 "is-active" bold treatment once the user actually
   makes a choice. Since every one of these 14 hour dropdowns is always
   populated, that bold rule would make the whole section look
   permanently heavy/bold regardless of whether the user has touched it
   — reset back to the trigger's own base 500 weight here (unlike the
   rest of the form, this override is intentionally permanent, not just
   for the initial unselected state). */
.el-al-hours-row .el-dd-trigger.is-active .el-dd-label { font-weight: 500; }
.el-al-hours-row .el-dd-menu { min-width: 120px; }

/* Suburb searchable combobox — a type-to-filter input instead of a plain
   trigger button, gated behind the City field (disabled + "Select city
   first" placeholder until a city is chosen). Not the same component as
   .el-dd above: this one needs live text filtering and a dependent option
   set, so it's its own small combobox built directly in dashboard-add-listing.html
   rather than progressively enhancing a native <select>. */
.el-al .el-al-combo { position: relative; }
.el-al .el-al-combo-control {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	border: 1px solid #e3e3e7;
	border-radius: 10px;
	background: #fcfcfd;
	padding: 10px 14px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Search icon sits inside the input's own padding (absolutely positioned)
   rather than taking its own flex slot — this keeps the control's overall
   metrics (border/radius/background/padding) identical to the plain
   .el-dd-trigger used for City, so the two fields read as one consistent
   dropdown style with the icon as a subtle affordance inside the text field. */
.el-al .el-al-combo-search-ic {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	color: #9a9ba1;
	pointer-events: none;
}
.el-al .el-al-combo-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0 0 0 24px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: #1c1d21;
	outline: none;
	/* The UA stylesheet gives <input> its own line-height (~1.4x font-size)
	   that ignores the inherited value everything else on the page uses,
	   which made this control render shorter than the sibling City
	   .el-dd-trigger <button> (buttons inherit line-height normally, inputs
	   don't). Forcing it back to inherit syncs the two controls' heights
	   at every breakpoint instead of just patching one pixel value. */
	line-height: inherit;
}
/* Beats the generic `.el-al input[type="text"]` rule above, which has
   higher specificity (class + attribute + element) than a plain two-class
   selector and would otherwise reapply its own border/background/radius/
   padding directly on this <input>, drawing a second smaller pill box
   nested inside `.el-al-combo-control`'s own pill. Stripping all of that
   back off here (at matching 3-class specificity) makes the outer control
   the only visible box, with the input just bare text inside it. */
.el-al .el-al-combo .el-al-combo-input {
	width: auto;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0 0 0 24px;
	/* Beats the generic `.el-al input[type="text"]` rule's own
	   `line-height: 1.4`, which otherwise makes this <input> shorter than
	   the sibling City .el-dd-trigger <button> (buttons inherit the page's
	   line-height normally; the generic input rule pins its own instead). */
	line-height: inherit;
}
.el-al .el-al-combo-input::placeholder { color: #9a9ba1; font-weight: 400; }
.el-al .el-al-combo-chev { flex: 0 0 auto; width: 12px; height: 12px; color: #9a9ba1; transition: transform .22s ease, color .18s ease; }
.el-al .el-al-combo.is-open .el-al-combo-chev { transform: rotate(180deg); color: #1c1d21; }
.el-al .el-al-combo:not(.is-disabled) .el-al-combo-control:hover { border-color: rgba(28,29,33,0.28); }
.el-al .el-al-combo.is-open .el-al-combo-control {
	border-color: #1c1d21;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(28,29,33,0.08);
}
.el-al .el-al-combo.is-disabled .el-al-combo-control { background: #f6f6f7; cursor: not-allowed; }
.el-al .el-al-combo.is-disabled .el-al-combo-input { cursor: not-allowed; }
.el-al .el-al-combo-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid #edeef1;
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(28,29,33,0.28), 0 4px 12px rgba(28,29,33,0.06);
	padding: 6px;
	max-height: 240px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
.el-al .el-al-combo.is-open .el-al-combo-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.el-al .el-al-combo-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	transition: background .14s ease, color .14s ease;
}
.el-al .el-al-combo-option:hover,
.el-al .el-al-combo-option.is-active { background: rgba(28,29,33,0.05); color: #1c1d21; }
.el-al .el-al-combo-option.is-selected { background: rgba(28,29,33,0.07); color: #1c1d21; font-weight: 700; }
.el-al .el-al-combo-empty { padding: 14px 12px; text-align: center; font-size: 13px; color: #9a9ba1; }

@media (max-width: 767px) {
	.el-al .el-al-combo-control { padding: 9px 12px; }
	.el-al .el-al-combo-input { font-size: 13.5px; }
}

/* ---- feature pills ---- */
.el-al .el-al-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.el-al .el-al-feat {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 10px;
	border: 1px solid #e3e3e7;
	border-radius: 50px;
	background: #fcfcfd;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 500;
	color: #55565c;
	transition: .18s ease;
	user-select: none;
}
.el-al .el-al-feat span { line-height: 1; }
.el-al .el-al-feat:before {
	content: "";
	width: 13px;
	height: 13px;
	border-radius: 4px;
	border: 1.5px solid #c9cace;
	background: #fff;
	flex: 0 0 auto;
	transition: .18s ease;
}
.el-al .el-al-feat input { position: absolute; opacity: 0; pointer-events: none; }
.el-al .el-al-feat:hover { border-color: #c9cace; color: #1c1d21; }
.el-al .el-al-feat:has(input:checked) {
	border-color: #1c1d21;
	background: rgba(28,29,33,0.05);
	color: #1c1d21;
}
.el-al .el-al-feat:has(input:checked):before {
	background: #1c1d21 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5L4 7.5L10 1' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
	border-color: #1c1d21;
}

/* ---- working hours ---- */
.el-al .el-al-hours { padding-top: 6px; padding-bottom: 12px; }
.el-al .el-al-hours-row {
	display: grid;
	grid-template-columns: 140px 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #f4f4f6;
}
.el-al .el-al-hours-row:last-child { border-bottom: none; }
.el-al .el-al-day { font-size: 13px; font-weight: 700; color: #1c1d21; text-transform: uppercase; letter-spacing: 0.03em; }
.el-al .el-al-dash { font-size: 13px; color: #9a9ba1; }

/* ---- rates hint + add ---- */
.el-al .el-al-hint {
	margin: 0 0 12px;
	font-size: 13.5px;
	color: #9a9ba1;
	line-height: 1.5;
}
.el-al .el-al-add {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px dashed #d2d3d8;
	background: #f7f7f9;
	color: #55565c;
	border-radius: 50px;
	padding: 10px 22px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: .2s ease;
}
.el-al .el-al-add i { font-size: 13px; }
.el-al .el-al-add:hover { border-color: #1c1d21; color: #1c1d21; background: rgba(28,29,33,0.04); }

/* ---- dynamic additional rate rows ---- */
.el-al .el-al-extra-rates { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.el-al .el-al-extra-rates:empty { margin-bottom: 0; }
.el-al .el-al-rate-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.el-al .el-al-rate-drag {
	flex: 0 0 auto;
	color: #b5b6bc;
	font-size: 18px;
	cursor: grab;
	line-height: 1;
}
.el-al .el-al-rate-title { flex: 1 1 auto; }
.el-al .el-al-rate-price { flex: 0 0 150px; }
.el-al .el-al-rate-del {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: #e5484d;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.el-al .el-al-rate-del:hover { background: rgba(229,72,77,0.10); }
.el-al .el-al-rate-title.is-error,
.el-al .el-al-rate-price.is-error {
	border-color: #e5484d;
	background: #fff6f6;
}
.el-al .el-al-rate-err {
	flex: 1 0 100%;
	margin: -2px 0 0 30px;
}
@media (max-width: 600px) {
	.el-al .el-al-rate-price { flex-basis: 110px; }
}

/* ---- description character counter ---- */
.el-al .el-al-charcount {
	margin-top: 6px;
	font-size: 12.5px;
	color: #9a9ba1;
	align-self: flex-end;
}
.el-al .el-al-charcount.is-ok { color: #2f8f5a; }

/* ---- dropzone ---- */
.el-al .el-al-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 158px;
	border: 2px dashed #dcdce1;
	border-radius: 14px;
	background: #fafafb;
	cursor: pointer;
	text-align: center;
	padding: 24px;
	transition: .2s ease;
}
.el-al .el-al-dropzone:hover,
.el-al .el-al-dropzone.is-drag {
	border-color: #1c1d21;
	background: rgba(28,29,33,0.03);
}
.el-al .el-al-dropzone.is-error {
	border-color: #e5484d;
	background: #fff6f6;
}
.el-al .el-al-dz-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid #d2d3d8;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9a9ba1;
	font-size: 22px;
	transition: .2s ease;
}
.el-al .el-al-dropzone:hover .el-al-dz-icon,
.el-al .el-al-dropzone.is-drag .el-al-dz-icon { border-color: #1c1d21; color: #1c1d21; }
	.el-al .el-al-dz-title { font-size: 15px; font-weight: 600; color: #55565c; }
	.el-al .el-al-dz-sub { font-size: 12.5px; color: #b0b1b7; }
	.el-al .el-al-dropzone.is-hidden { display: none; }

	/* ---- photo previews (rendered once at least one photo is selected) ---- */
	.el-al .el-al-photos {
		display: none;
		grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
		gap: 10px;
		margin-bottom: 14px;
	}
	.el-al .el-al-photos.has-items { display: grid; }
	.el-al .el-al-photo {
		position: relative;
		aspect-ratio: 1 / 1;
		border-radius: 12px;
		overflow: hidden;
		background: #f1f1f3;
		border: 1px solid #e7e7ea;
	}
	.el-al .el-al-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.el-al .el-al-photo-main {
		position: absolute;
		left: 6px;
		bottom: 6px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		max-width: calc(100% - 12px);
		padding: 3px 8px 3px 6px;
		border: none;
		border-radius: 999px;
		background: rgba(18,18,21,0.72);
		color: #fff;
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}
	.el-al .el-al-photo-main i { color: #ff6b85; font-size: 9.5px; }
	.el-al .el-al-photo-main.is-current { cursor: default; }
	/* "Set as main" is a real action on every non-main photo, not just a label —
	   dimmer at rest so the current Main Photo badge still reads as the primary
	   signal, but fully opaque (and clearly a button) on hover/focus/tap. */
	.el-al .el-al-photo-main.is-settable {
		background: rgba(18,18,21,0.5);
		color: rgba(255,255,255,0.9);
		cursor: pointer;
		transition: background .2s ease, color .2s ease;
	}
	.el-al .el-al-photo-main.is-settable i { color: rgba(255,255,255,0.75); }
	.el-al .el-al-photo-main.is-settable:hover,
	.el-al .el-al-photo-main.is-settable:focus-visible {
		background: rgba(18,18,21,0.85);
		color: #fff;
	}
	.el-al .el-al-photo-main.is-settable:hover i,
	.el-al .el-al-photo-main.is-settable:focus-visible i { color: #ff6b85; }
	.el-al .el-al-photo-main.is-settable:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
	.el-al .el-al-photo-remove {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		border: none;
		background: rgba(18,18,21,0.6);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 11px;
		cursor: pointer;
		transition: .2s ease;
	}
	.el-al .el-al-photo-remove:hover { background: #f0104a; }
	.el-al .el-al-photo-add {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		aspect-ratio: 1 / 1;
		border-radius: 12px;
		border: 2px dashed #dcdce1;
		background: #fafafb;
		color: #9a9ba1;
		font-size: 11px;
		font-weight: 600;
		cursor: pointer;
		transition: .2s ease;
	}
	.el-al .el-al-photo-add i { font-size: 18px; }
	.el-al .el-al-photo-add:hover {
		border-color: #ff4d6d;
		color: #f0104a;
		background: rgba(255,77,109,0.04);
	}

	/* ---- video upload ---- */
	.el-al .el-al-video-preview {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
		margin-bottom: 14px;
		border: 1px solid #ececef;
		border-radius: 14px;
		background: #fafafb;
	}
	.el-al .el-al-video-preview[hidden] { display: none; }
	.el-al .el-al-video-ic {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: 10px;
		background: #1c1d21;
		color: #fff;
		font-size: 17px;
	}
	.el-al .el-al-video-info {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.el-al .el-al-video-name {
		font-size: 14px;
		font-weight: 600;
		color: #1c1d21;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.el-al .el-al-video-size { font-size: 12.5px; color: #9a9ba1; }
	.el-al .el-al-video-remove {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 50%;
		background: #eef0f4;
		color: #55565c;
		cursor: pointer;
		transition: .2s ease;
	}
	.el-al .el-al-video-remove:hover { background: #f0104a; color: #fff; }
	.el-al .el-al-dropzone.el-al-dropzone-video { padding: 22px 16px; }

/* ---- submit ---- */
.el-al .el-al-submit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding: 16px 24px;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(20,20,25,0.04);
}
.el-al .el-al-submit-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #86878d;
	line-height: 1.4;
}
.el-al .el-al-submit-note i { font-size: 18px; color: #4ca82a; flex: 0 0 auto; }
.el-al .el-al-submit {
	border: none;
	cursor: pointer;
	color: #fff;
	background: #1c1d21;
	border-radius: 50px;
	padding: 16px 46px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2px;
	box-shadow: 0 12px 26px rgba(28,29,33,0.26);
	transition: transform .2s ease, box-shadow .2s ease;
}
.el-al .el-al-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(28,29,33,0.34); }

/* ---- verification: captcha image + input ---- */
.el-al .el-al-cap-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
	flex-wrap: wrap;
	max-width: 520px;
}
.el-al .el-al-cap-input {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 240px;
}
.el-al .el-al-cap-input i {
	position: absolute;
	left: 15px;
	font-size: 16px;
	color: #b5b6bc;
	pointer-events: none;
}
.el-al .el-al-cap-input input {
	width: 100%;
	padding-left: 40px;
	letter-spacing: 2px;
	font-weight: 600;
}
.el-al .el-al-cap-img {
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid #e3e3e7;
	border-radius: 10px;
	background: #eef0f4;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	transition: border-color 0.2s ease;
}
.el-al .el-al-cap-img:hover { border-color: #c2c2c8; }
.el-al .el-al-cap-img canvas { display: block; }

/* ---- validation error states ---- */
.el-al .el-al-field.is-error > input,
.el-al .el-al-field.is-error > select,
.el-al .el-al-field.is-error > textarea,
.el-al .el-al-field.is-error .el-al-cap-input input {
	border-color: #e5484d;
	background: #fff6f6;
}
.el-al .el-al-err {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: #e5484d;
}

/* ---- success message ---- */
.el-al .el-al-success {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
	padding: 18px 24px;
	border-radius: 18px;
	background: #eaf7ee;
	border: 1px solid #bfe6cb;
	color: #1f7a3d;
	font-size: 14.5px;
	font-weight: 600;
}
.el-al .el-al-success i { font-size: 22px; }

@media (max-width: 767px) {
	/* (horizontal gutter is handled once by the 12px #dashboard.container rule
	   above — don't re-add side padding here or it double-insets the cards.) */
	.el-al .el-al-card { margin-bottom: 12px; border-radius: 14px; }
	.el-al .el-al-card-head { padding: 12px 14px; gap: 10px; }
	.el-al .el-al-card-ic { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
	.el-al .el-al-card-head h3 { font-size: 15px; }
	.el-al .el-al-head-note { margin-left: 42px; font-size: 12px; }
	.el-al .el-al-card-body { padding: 14px 13px 15px; }
	.el-al .el-al-photos { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
	.el-al .el-al-photo-add span { font-size: 10px; }
	/* At 84px-wide photo cells "Set as main" doesn't fit next to the star icon —
	   drop to an icon-only tap target on both badge states so nothing clips or
	   overflows onto the neighbouring photo. */
	.el-al .el-al-photo-main { padding: 5px; gap: 0; }
	.el-al .el-al-photo-main span { display: none; }
	.el-al .el-al-photo-main i { font-size: 11px; }

	/* Keep compact fields TWO-UP instead of one-per-row — this is the main
	   height reduction (was a single column, which made the page very long). */
	.el-al .el-al-grid { grid-template-columns: 1fr 1fr; gap: 11px 10px; }
	.el-al .el-al-grid-3 { grid-template-columns: 1fr 1fr; }
	/* a grid that holds a single field (e.g. Phone) should fill the width */
	.el-al .el-al-grid > .el-al-field:only-child { grid-column: 1 / -1; }
	.el-al .el-al-mt { margin-top: 11px; }

	/* tighter labels + inputs to shave more vertical space */
	.el-al .el-al-field > label { font-size: 12.5px; margin-bottom: 5px; }
	.el-al input[type="text"],
	.el-al textarea,
	.el-al select { padding: 9px 12px; font-size: 13.5px; border-radius: 9px; }
	.el-al select { background-position: right 12px center; padding-right: 34px; }
	.el-al textarea { min-height: 84px; }
  .el-al .el-al-combo .el-al-combo-input { width: auto; border: none; border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 0 24px; }
  .el-al .el-dd-trigger { padding: 9px 12px; font-size: 13.5px; border-radius: 9px; }
  /* Beats the generic `.el-al input[type="text"]` mobile override two
     lines up (identical 0,2,1 specificity, but this rule loses because it
     comes first in source order) which was resetting the shield icon's
     40px clearance back to 12px and overlapping it with the placeholder. */
  .el-al .el-al-cap-input input { padding-left: 40px; }

	.el-al .el-al-hours-row {
		grid-template-columns: 38px 1fr 1fr;
		grid-template-areas: "day from to";
		align-items: center;
		gap: 8px;
	}
  .el-al .el-al-day { grid-area: day; margin-right: 6px; }
	.el-al .el-al-dash { display: none; }
  .el-al-hours-row .el-dd-trigger { padding: 7px 6px; font-size: 12px; }
}

/* On very narrow phones (~360px and below), the "WhatsApp Number" label's
   icon + two-word text no longer fits its half-width column and breaks
   into 3 separate wrapped lines (icon alone, then "WhatsApp", then
   "Number"), pushing the input down and out of alignment with Phone.
   Stack Phone and WhatsApp Number to full width here — same one-field-
   per-row treatment already used for the wider breakpoint below 767px
   before that redesign moved them side-by-side — so the long label
   always gets the whole row's width instead of squeezing into 1fr. Only
   these two fields are affected; every other .el-al-grid pair (Display
   Name/Nationality, Height/Age, City/Suburb, etc.) keeps its 2-up layout
   at this breakpoint since their labels are short enough to fit. */
@media (max-width: 400px) {
  .el-al #al-phone-field,
  .el-al #al-whatsapp-field {
    grid-column: 1 / -1;
  }
}

/* ===================================================
   Escort Locate — My Profile redesign
=================================================== */
.el-mp-card {
	display: block;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 16px;
	margin: 0 0 30px;
	overflow: hidden;
}
.el-mp-card-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 22px 26px;
	border-bottom: 1px solid #ececef;
}
.el-mp-card-ic {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #1c1d21;
	color: #fff;
	font-size: 18px;
}
.el-mp-card-head h3 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #1c1d21;
	min-width: 140px;
}
.el-mp-head-note { flex: 1 1 100%; font-size: 13px; color: #9a9ba1; }
@media (min-width: 620px) {
	.el-mp-head-note { flex: 0 0 auto; margin-left: auto; text-align: right; max-width: 260px; }
}
.el-mp-card-body { padding: 26px; }

.el-mp-avatar-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid #f1f1f3;
}
.el-mp-avatar {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #ececef;
}
.el-mp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-mp-avatar-upload {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #d2d3d8;
	border-radius: 50px;
	padding: 10px 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1c1d21;
	background: #f7f7f9;
	cursor: pointer;
	transition: .2s ease;
}
.el-mp-avatar-upload:hover { border-color: #f0104a; color: #f0104a; background: rgba(240,16,74,0.05); }

.el-mp-field { margin-bottom: 20px; }
.el-mp-field:last-of-type { margin-bottom: 26px; }
.el-mp-field label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1c1d21;
}
.el-mp-field input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #d8d8dd;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	color: #1c1d21;
	transition: border-color .18s ease;
}
.el-mp-field input:focus { outline: none; border-color: #f0104a; }
.el-mp-verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border-radius: 50px;
	background: rgba(46,158,79,0.10);
	color: #2e9e4f;
	font-size: 11.5px;
	font-weight: 700;
}
.el-mp-verified i { font-size: 11px; }

.el-mp-save {
	border: none;
	border-radius: 50px;
	padding: 14px 30px;
	background: #1c1d21;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(28,29,33,0.26);
	transition: transform .18s ease, box-shadow .18s ease;
}
.el-mp-save:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(28,29,33,0.34); }

/* Escort Locate — My Listings status pages (Pending/Active/Expired/Rejected/Hidden) */
#dashboard .dashboard-list-box h4 .el-ml-count {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 10px;
	border-radius: 50px;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-size: 11.5px;
	font-weight: 700;
	vertical-align: middle;
}
#dashboard .dashboard-list-box .el-ml-note {
	margin: 20px 28px 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #f7f4f0;
	color: #767676;
	font-size: 13px;
	line-height: 1.5;
}
#dashboard .dashboard-list-box .el-ml-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 24px;
}
#dashboard .dashboard-list-box .el-ml-empty i {
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-size: 24px;
	margin-bottom: 18px;
}
#dashboard .dashboard-list-box .el-ml-empty h5 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #1c1d21;
}
#dashboard .dashboard-list-box .el-ml-empty p {
	max-width: 380px;
	margin: 0 0 22px;
	color: #767676;
	font-size: 13.5px;
	line-height: 1.6;
}
#dashboard .dashboard-list-box .el-ml-empty .button {
	border-radius: 50px;
	padding: 12px 26px;
	background: linear-gradient(135deg, #ff4d6d, #f0104a);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	border: none;
	box-shadow: 0 10px 22px rgba(240,16,74,0.28);
	transition: transform .18s ease, box-shadow .18s ease;
}
#dashboard .dashboard-list-box .el-ml-empty .button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(240,16,74,0.36); }

#dashboard .dashboard-list-box .el-ml-note i { color: #f0104a; margin-right: 6px; }
#dashboard .dashboard-list-box .el-ml-list {
	list-style: none;
	margin: 0;
	padding: 20px 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
 /* Card chrome: a crisp hairline border plus a soft shadow, so each card
    reads as a clearly separated surface on the white dashboard canvas
    (a shadow alone was too faint to register as an edge at a glance). */
 #dashboard .dashboard-list-box .el-ml-list > li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 18px;
  border: 1px solid rgba(28,29,33,0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28,29,33,0.04), 0 4px 14px rgba(28,29,33,0.05);
  transition: box-shadow .18s ease, border-color .18s ease;
  }
  #dashboard .dashboard-list-box .el-ml-list > li:hover {
  border-color: rgba(28,29,33,0.16);
  box-shadow: 0 8px 22px rgba(28,29,33,0.1);
  }

/* Favorites — unfavorite heart toggle (replaces the Delete action row) */
#dashboard .dashboard-list-box .el-ml-list > li.el-fav-item {
	position: relative;
	padding-right: 58px;
}
#dashboard .dashboard-list-box .el-ml-list .el-fav-remove {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: #fff;
	color: #f0104a;
	font-size: 16px;
	box-shadow: 0 4px 12px rgba(28,29,33,0.1);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
#dashboard .dashboard-list-box .el-ml-list .el-fav-link {
	display: block;
	color: inherit;
}
#dashboard .dashboard-list-box .el-ml-list .el-fav-link:hover { color: inherit; }
#dashboard .dashboard-list-box .el-ml-list .el-fav-link:hover h3 { color: #f0104a; }
#dashboard .dashboard-list-box .el-ml-list .el-fav-remove i { pointer-events: none; }
#dashboard .dashboard-list-box .el-ml-list .el-fav-remove:hover {
	background: #f0104a;
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 8px 18px rgba(240,16,74,0.32);
}
#dashboard .dashboard-list-box .el-ml-list .el-fav-remove:active {
	transform: scale(0.94);
}
#dashboard .dashboard-list-box .el-ml-list > li.el-fav-item.is-removing {
	opacity: 0;
	transform: scale(0.97);
	transition: opacity .25s ease, transform .25s ease;
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 1 1 auto;
	min-width: 260px;
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img {
	/* The theme sets `.list-box-listing-img { flex: 1 }` (= flex:1 1 0%), so
	   overriding only flex-shrink left flex-grow:1/flex-basis:0% in place and
	   the thumbnail sized itself from leftover space — shrinking when a card
	   had extra badges (Active + Verified). Lock all three with the shorthand
	   so the photo is always a fixed square regardless of badge count. */
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	max-width: none;
	border-radius: 14px;
	overflow: hidden;
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Hidden-listing thumbnails (Hidden Listings page only, via the
   .el-ml-photo-hidden modifier) get a dark wash + centered eye badge
   so the photo itself visually reads as "not publicly visible" —
   before this it looked identical to a live/active listing photo and
   only the small text badge next to the name told you it was hidden. */
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img.el-ml-photo-hidden::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 29, 33, 0.5);
	z-index: 1;
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img.el-ml-photo-hidden::after {
	content: "\e087";
	font-family: "simple-line-icons";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #fff;
	background: rgba(255, 255, 255, 0.18);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	backdrop-filter: blur(2px);
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img.el-ml-photo-hidden img {
	filter: grayscale(0.5);
}
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-content { flex: 1 1 auto; }
#dashboard .dashboard-list-box .el-ml-list .list-box-listing-content .inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
#dashboard .dashboard-list-box .el-ml-list h3 {
	margin: 0;
	line-height: 1.2;
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
}
/* Status badges (Active/Expired, Verified, Now Available) moved out
   from beside the name into their own row — crowding the name with
   2-3 chips on one line reads cramped, especially on narrower cards.
   Giving them a dedicated row right below the name lets both the
   name and the badges breathe, and keeps the card's flow reading
   name -> status -> contact -> meta, top to bottom. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: -2px 0 0;
}
/* Secondary meta line: location + expires/submitted merged into ONE
   row separated by a middle dot, instead of two near-identical
   "gray icon + gray text" rows stacked on top of each other — that
   repetition (three visually-similar rows in a column) was the
   "messy list" feeling. Both pieces stay quiet/secondary here since
   neither is an action; the phone number below is the one meta item
   that gets visual weight, because it's the one a client actually
   calls. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0;
	line-height: 1;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-meta-dot {
	color: #d4d6de;
	font-size: 13.5px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1;
	color: #8a8e9c;
	font-size: 13.5px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-loc i { color: #b9bcc6; font-size: 13px; }
/* Phone chip — the one meta item styled as a small tinted pill (same
   visual family as the status badges above it) rather than a plain
   icon+text row, so it reads as "the number you'd tap to call"
   instead of one more line of static info. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 11px 5px 9px;
	border-radius: 7px;
	background: rgba(240,16,74,0.08);
	line-height: 1;
	color: #f0104a;
	font-size: 13.5px;
	font-weight: 700;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-phone i { color: #f0104a; font-size: 13px; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1;
	padding: 5px 11px 5px 9px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2px;
	margin: 0;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status i { font-size: 11px; }
/* Pending / Expired / Hidden / Rejected — same neutral chip family
   as Active/Verified below; only the icon keeps a small semantic
   tint, so every status badge across every listing page reads as
   one quiet, consistent family instead of four different loud fills. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.yellow {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.yellow i {
	color: #c9930a;
}
/* Active — quieted from a full green-tinted fill to a neutral chip;
   the tiny green icon is the only color left, reading as a status
   dot rather than a loud badge (this card already carries a pink
   phone chip + pink Boost button, so a second and third saturated
   hue right next to them was what made it feel busy). */
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.green {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.green i {
	color: #22a55e;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.red {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.red i {
	color: #c9600f;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.gray {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.pink {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.pink i {
	color: #d1364c;
}
/* Verified — dropped blue entirely (it never belongs to the site's
   black/white/pink palette) in favor of the same neutral chip used
   for Active, so the two badges read as one quiet family instead of
   introducing yet another hue next to it. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.verified {
	background: rgba(28,29,33,0.05);
	color: #4a4b52;
	padding: 5px 11px 5px 9px;
	box-shadow: none;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.verified i {
	color: #4a4b52;
}
/* Rejection Reason — a full-width block below the photo+meta row instead
   of a single-line flex item squeezed into the narrow meta column next
   to the photo. That old layout (`display:flex;align-items:center;
   line-height:1`) assumed the reason text always fit on one line — a
   longer reason had nowhere to wrap to and broke the row. This block
   sits in the card's own flex column (a sibling of .list-box-listing),
   so it gets the FULL card width to wrap normal paragraph text into,
   and clamps to 2 lines with a JS-driven "Show more" toggle (see
   custom.js) that only appears when the text actually overflows. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-block {
	background: #fdeceb;
	border: 1.5px solid #f0a9a5;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(196, 42, 34, 0.08);
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #c42a22;
	color: #fff;
	font-size: 10.5px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #c42a22;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-text {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: #5c1512;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-block.is-expanded .el-ml-reason-text {
	-webkit-line-clamp: unset;
	overflow: visible;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-toggle {
	display: none;
	margin-top: 6px;
	padding: 0;
	border: none;
	background: none;
	font-size: 12.5px;
	font-weight: 700;
	color: #f0104a;
	cursor: pointer;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-reason-toggle:hover {
	text-decoration: underline;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-expires {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1;
	color: #8a8e9c;
	font-size: 13.5px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-expires i { color: #b9bcc6; font-size: 13px; }
/* No divider line above the action row anymore — the card's own
   padding + the buttons' quieter (borderless) chrome below already
   give enough separation from the meta info above. */
 #dashboard .dashboard-list-box .el-ml-list .el-ml-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
  border-top: none;
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  opacity: 1;
  box-shadow: none;
  }
  /* Ghost buttons: near-invisible fill, just a faint outline + icon+label.
  Only Boost (below) keeps a filled background as the primary CTA. */
 #dashboard .dashboard-list-box .el-ml-list .el-ml-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid #e9e9ec;
  color: #43465a;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn i {
	font-size: 13px;
	color: #a5a8b4;
	transition: color .15s ease;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn:hover {
	background: #f4f4f6;
	border-color: #d8d9de;
	color: #1c1d21;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn:hover i {
	color: #6c7086;
}

/* Boost / Renew — still the one accent action so it stands out from
   the neutral ghost buttons next to it, but as a soft pink TINT chip
   rather than a solid fill (same "pink is an accent, never a large
   solid block" language already used for the Verified/Active badges,
   phone chips, and sidebar active nav item elsewhere in the dashboard). */
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary,
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-renew {
	background: rgba(240,16,74,0.08);
	border-color: transparent;
	color: #f0104a;
	padding: 8px 15px;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary i,
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-renew i {
	color: #f0104a;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary:hover,
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-renew:hover {
	background: rgba(240,16,74,0.14);
	color: #f0104a;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary:hover i,
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-renew:hover i {
	color: #f0104a;
}

/* Verify / Available / Hide / Edit / Delete — same quiet ghost chrome, only the icon carries a hint of meaning */
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verify i { color: #f0104a; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verify:hover { background: #f4f4f6; border-color: #d8d9de; color: #1c1d21; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verify:hover i { color: #f0104a; }

/* Available toggle ��� dropped its green icon (redundant next to the
   Active badge's own green, and one more hue on an already busy
   card); it now shares the plain neutral ghost-button chrome used
   by Hide/Edit, distinguished only by its bell icon + label. */

#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-unhide i { color: #28A745; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-unhide:hover { background: #eef8f0; border-color: #cdebd4; color: #1e8838; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-unhide:hover i { color: #1e8838; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-unhide.is-done {
	background: #eef8f0;
	border-color: #cdebd4;
	color: #1e8838;
	pointer-events: none;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-unhide.is-done i { color: #1e8838; }

#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-hide:hover { background: #f4f4f6; border-color: #d8d9de; color: #1c1d21; }

#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-edit:hover { background: #f4f4f6; border-color: #d8d9de; color: #1c1d21; }

#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-danger i { color: #dc3545; }
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-danger:hover {
	background: #dc3545;
	border-color: #dc3545;
	color: #fff;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-danger:hover i { color: #fff; }

/* Verified — settled state, non-interactive */
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verified {
	background: #eef8f0;
	border-color: #cdebd4;
	color: #1e8838;
	cursor: default;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verified i {
	color: #28A745;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-verified:hover {
	background: #eef8f0;
	border-color: #cdebd4;
	color: #1e8838;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-disabled {
	background: transparent;
	border-color: #ececef;
	color: #c1c3cb;
	cursor: not-allowed;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-disabled i {
	color: #d5d7de;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-disabled:hover {
	background: transparent;
	border-color: #ececef;
	color: #c1c3cb;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-disabled:hover i {
	color: #d5d7de;
}

/* Pin Boost to the far left at EVERY width (desktop + mobile). Some cards
   start with Verify then Boost in markup, so on desktop Boost landed 2nd;
   `order:-1` pulls it to the front of the action row. It works in both the
   desktop flex-wrap and the <=767px 3-up grid, so Boost always leads. */
#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary { order: -1; }

@media (max-width: 767px) {
	/* reclaim width: the list (28px) + li (20px) side padding wasted ~48px
	   per side on a phone. Trim both so the card stretches close to edge. */
	#dashboard .dashboard-list-box .el-ml-list { padding: 12px 10px 16px; gap: 12px; }
	#dashboard .dashboard-list-box .el-ml-list > li { padding: 16px 14px 16px; gap: 14px; }

	/* bigger photo; drop the desktop min-width:260px that could force the
	   flex row to overflow on a narrow screen. */
	#dashboard .dashboard-list-box .el-ml-list .list-box-listing { gap: 14px; min-width: 0; }
	#dashboard .dashboard-list-box .el-ml-list .list-box-listing-img { flex: 0 0 134px; width: 134px; height: 134px; }

	/* even 3-up grid instead of the ragged flex-wrap (was the "messy" look);
	   Boost jumps to the first cell (top-left = far left) via order, no matter
	   where it sits in each card's markup. */
	#dashboard .dashboard-list-box .el-ml-list .el-ml-actions {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	#dashboard .dashboard-list-box .el-ml-list .el-ml-btn {
		justify-content: center;
		min-width: 0;
		padding: 11px 5px;
		font-size: 12px;
		gap: 5px;
	}
	#dashboard .dashboard-list-box .el-ml-list .el-ml-btn i { font-size: 12px; }
	#dashboard .dashboard-list-box .el-ml-list .el-ml-btn.is-primary { order: -1; }
}

/* Escort Locate — Delete Advertisement confirmation modal */
.el-del-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28,29,33,0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.el-del-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.el-del-modal {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 20px;
	padding: 40px 36px 32px;
	text-align: center;
	box-shadow: 0 30px 60px rgba(28,29,33,0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform .22s ease;
}
.el-del-overlay.is-open .el-del-modal {
	transform: translateY(0) scale(1);
}
.el-del-icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid rgba(220,53,69,0.35);
	background: rgba(220,53,69,0.06);
	color: #dc3545;
	font-size: 26px;
	line-height: 1;
}
.el-del-icon i {
	line-height: 1;
}
.el-del-modal h3 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: #1c1d21;
}
.el-del-modal p {
	margin: 0 0 28px;
	color: #6c7086;
	font-size: 14.5px;
	line-height: 1.5;
}
.el-del-modal .el-del-name {
	color: #1c1d21;
	font-weight: 600;
}
.el-del-actions {
	display: flex;
	gap: 12px;
}
.el-del-actions button {
	flex: 1;
	padding: 13px 16px;
	border-radius: 10px;
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.el-del-cancel {
	background: #fff;
	border: 1px solid #e2e3ea;
	color: #43465a;
}
.el-del-cancel:hover {
	background: #f6f6f8;
	border-color: #d3d5df;
}
.el-del-confirm {
	background: #dc3545;
	color: #fff;
	box-shadow: 0 10px 20px rgba(220,53,69,0.28);
}
.el-del-confirm:hover {
	background: #c3283a;
}

/* Escort Locate — Set as Top Ad (Boost) confirmation modal, shares .el-del-* base */
.el-del-icon.is-boost {
	border-color: rgba(240,16,74,0.35);
	background: rgba(240,16,74,0.08);
	color: #f0104a;
}
.el-boost-confirm {
	background: #1c1d21;
	color: #fff;
	box-shadow: 0 10px 20px rgba(28,29,33,0.26);
}
.el-boost-confirm:hover {
	background: #33343a;
}

/* Escort Locate — Mark as Available confirmation modal, shares .el-del-* base */
.el-del-icon.is-avail {
	border-color: rgba(40,167,69,0.35);
	background: rgba(40,167,69,0.08);
	color: #28A745;
}
.el-avail-confirm {
	background: #28A745;
	color: #fff;
	box-shadow: 0 10px 20px rgba(40,167,69,0.28);
}
.el-avail-confirm:hover {
	background: #23923c;
}

/* Escort Locate — Renew Advertisement confirmation modal, shares .el-del-* base */
.el-del-icon.is-renew {
	border-color: rgba(37,99,235,0.35);
	background: rgba(37,99,235,0.08);
	color: #2563eb;
}
.el-renew-confirm {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 10px 20px rgba(37,99,235,0.28);
}
.el-renew-confirm:hover {
	background: #1d4ed8;
}

/* Escort Locate — Hide Advertisement confirmation modal, shares .el-del-* base */
.el-del-icon.is-hide {
	border-color: rgba(108,114,147,0.35);
	background: rgba(108,114,147,0.08);
	color: #6c7293;
}
.el-hide-confirm {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 10px 20px rgba(37,99,235,0.28);
}
.el-hide-confirm:hover {
	background: #1d4ed8;
}

/* "Now Available" badge — injected into el-ml-name-row on confirm */
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.now-available {
	background: rgba(40,167,69,0.14);
	color: #1e8838;
}
#dashboard .dashboard-list-box .el-ml-list .el-ml-status.now-available .el-ml-live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #28A745;
	animation: elMlLivePulse 1.4s ease-in-out infinite;
}
@keyframes elMlLivePulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .4; transform: scale(0.7); }
}

/* Escort Locate — Verify Photo upload modal (reuses .el-del-overlay for the backdrop) */
.el-verify-modal {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 20px;
	padding: 32px 32px 28px;
	text-align: left;
	box-shadow: 0 30px 60px rgba(28,29,33,0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform .22s ease;
}
.el-del-overlay.is-open .el-verify-modal {
	transform: translateY(0) scale(1);
}
.el-verify-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
}
.el-verify-ic {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-size: 19px;
}
.el-verify-head h3 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
}
.el-verify-head p {
	margin: 0;
	font-size: 13.5px;
	color: #6c7086;
	line-height: 1.5;
}
.el-verify-guide {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f8f5f1;
	border: 1px solid #f0e6db;
}
.el-verify-guide li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	color: #6b5f4f;
	line-height: 1.45;
}
.el-verify-guide li i {
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 11px;
	color: #d18b3d;
}
.el-verify-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 16px;
	margin-bottom: 8px;
	border: 1.5px dashed #dfe1e8;
	border-radius: 14px;
	background: #fafafb;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.el-verify-drop:hover,
.el-verify-drop.is-drag {
	border-color: rgba(240,16,74,0.4);
	background: #fdf1f4;
}
.el-verify-drop input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.el-verify-drop-ic {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-size: 16px;
}
.el-verify-drop-text {
	font-size: 13.5px;
	font-weight: 600;
	color: #1c1d21;
}
.el-verify-drop-hint {
	font-size: 12px;
	color: #9a9eac;
}
.el-verify-filename {
	display: none;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #f2f9f3;
	border: 1px solid #dcefe0;
	font-size: 13px;
	color: #1e8838;
	font-weight: 600;
}
.el-verify-filename.is-visible {
	display: flex;
}
.el-verify-filename i {
	font-size: 13px;
}
.el-verify-filename span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.el-verify-actions {
	display: flex;
	gap: 12px;
}
.el-verify-actions button {
	flex: 1;
	padding: 13px 16px;
	border-radius: 10px;
	border: none;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.el-verify-cancel {
	background: #fff;
	border: 1px solid #e2e3ea;
	color: #43465a;
}
.el-verify-cancel:hover {
	background: #f6f6f8;
	border-color: #d3d5df;
}
.el-verify-upload {
	background: #1c1d21;
	color: #fff;
	box-shadow: 0 10px 20px rgba(28,29,33,0.26);
}
.el-verify-upload:hover {
	background: #33343a;
}
.el-verify-upload:disabled {
	background: #c7c8ce;
	box-shadow: none;
	cursor: not-allowed;
}

/* Escort Locate — Favorites listing meta
   Redesigned from one crowded "loc · phone" line into a clear
   two-tier stack under the name: the phone as a small tinted pill
   (the one detail worth acting on — same treatment as the My
   Listings card's phone chip, for consistency across the dashboard),
   then the location on its own quiet line below. */
.el-fav-item .list-box-listing-content .inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.el-fav-loc,
.el-fav-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	line-height: 1;
}
.el-fav-loc {
	color: #8a8e9c;
}
.el-fav-loc i {
	color: #b9bcc6;
	font-size: 13px;
}
.el-fav-phone {
	padding: 5px 11px 5px 9px;
	border-radius: 7px;
	background: rgba(240,16,74,0.08);
	color: #f0104a;
	font-weight: 700;
}
.el-fav-phone i {
	color: #f0104a;
	font-size: 13px;
}
@media (max-width: 767px) {
	/* `.list-box-listing-content .inner span` (0,2,1) otherwise beats a
	   plain `.el-fav-loc` (0,1,0) and silently keeps this at 15px on
	   mobile, so this selector matches that specificity to actually win.
	   Set to 13.5px to match the Active listing card's city text
	   (`.el-ml-loc`, dashboard-my-listings-active.html), which has no
	   mobile override of its own and stays at its base 13.5px on every
	   breakpoint — this was previously 12px, smaller than Active's for
	   no reason other than an earlier one-off "make it smaller" request
	   on this page alone. */
	.list-box-listing-content .inner .el-fav-loc { font-size: 13.5px; }
	.el-fav-loc i { font-size: 13px; }
}

/* ---- Dashboard — Recent Activities pagination ---- */
#dashboard .el-ra-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 20px;
	/* breathing room so the page numbers don't sit flush against the bottom
	   edge of the list-box card (the card has no bottom padding of its own). */
	padding-bottom: 12px;
	border-top: 1px solid #ececef;
}
#dashboard .el-ra-pagination[hidden] { display: none; }
#dashboard .el-ra-page-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
}
#dashboard .el-ra-page-arrow,
#dashboard .el-ra-page-num {
	appearance: none;
	border: 1px solid #ececef;
	background: #fff;
	color: #6b6f7d;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#dashboard .el-ra-page-arrow {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#dashboard .el-ra-page-arrow svg { width: 15px; height: 15px; }
#dashboard .el-ra-page-arrow:hover:not(:disabled) { border-color: #f0104a; color: #f0104a; }
#dashboard .el-ra-page-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
#dashboard .el-ra-page-num {
	min-width: 36px;
	height: 36px;
	padding: 0 4px;
	border-radius: 9px;
}
#dashboard .el-ra-page-num:hover { border-color: #f0104a; color: #f0104a; }
#dashboard .el-ra-page-num.is-active {
	background: #1c1d21;
	border-color: #1c1d21;
	color: #fff;
}
@media (max-width: 480px) {
	#dashboard .el-ra-pagination { gap: 6px; }
	#dashboard .el-ra-page-numbers { gap: 4px; }
	#dashboard .el-ra-page-arrow, #dashboard .el-ra-page-num { width: 32px; height: 32px; min-width: 32px; }
}

/* Hero */
.el-agd-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}
.el-agd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30,8,20,0.35) 0%, rgba(20,6,16,0.72) 78%, rgba(14,4,11,0.9) 100%);
	z-index: 1;
}
.el-agd-hero-watermark {
	position: absolute;
	right: -10px;
	bottom: -18px;
	font-family: var(--font-serif, Georgia, serif);
	font-weight: 800;
	font-size: clamp(60px, 11vw, 170px);
	color: rgba(255,255,255,0.06);
	letter-spacing: -2px;
	white-space: nowrap;
	line-height: 1;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
.el-agd-hero > .container { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.el-agd-hero-content { position: relative; z-index: 2; width: 100%; padding: 0 0 32px; }
.el-agd-hero-inner { display: flex; align-items: center; gap: 26px; }
.el-agd-avatar {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255,255,255,0.9);
	box-shadow: 0 14px 34px rgba(0,0,0,0.4);
	flex-shrink: 0;
}
.el-agd-hero-text h1 {
	color: #fff;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	margin: 0 0 6px;
	letter-spacing: -0.5px;
}
.el-agd-hero-year { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.el-agd-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.el-agd-hero-meta span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.88); font-size: 14.5px; }
.el-agd-hero-meta i { color: #ff8ba3; font-size: 13px; }
.el-agd-hero-web { color: rgba(255,255,255,0.7) !important; }
.el-agd-back {
	position: absolute;
	right: 0;
	bottom: 32px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,0.9);
	font-size: 14px;
	font-weight: 600;
	transition: color 0.2s ease;
}
.el-agd-back:hover { color: #ff4d6d; }
@media (max-width: 767px) {
	.el-agd-hero { min-height: 300px; align-items: flex-start; padding-top: 26px; }
	.el-agd-hero-content { padding: 0 0 24px; }
	.el-agd-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.el-agd-back { position: static; right: auto; margin-top: 20px; }
}

/* Breadcrumb bar */
.el-agd-breadcrumb-bar { background: #f4f5f7; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 14px 0; }
.el-agd-breadcrumb-bar .el-breadcrumb { margin: 0; }

/* Layout */
.el-agd-layout { display: grid; grid-template-columns: 1fr 350px; gap: 44px; align-items: start; padding-top: 48px; }
@media (max-width: 991px) { .el-agd-layout { grid-template-columns: 1fr; padding-top: 36px; } }
.el-agd-main { min-width: 0; }

.el-agd-block { margin-bottom: 42px; }
.el-agd-block:last-child { margin-bottom: 0; }
.el-agd-h {
	font-size: 22px;
	font-weight: 800;
	color: #1c1d21;
	margin: 0 0 20px;
	letter-spacing: -0.3px;
}
.el-agd-block p { font-size: 15.5px; line-height: 1.85; color: #56585e; margin: 0 0 16px; }
.el-agd-block p:last-child { margin-bottom: 0; }
.el-agd-block p strong { color: #1c1d21; }

/* Tag pills */
.el-agd-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.el-agd-tag {
	display: inline-flex;
	align-items: center;
	background: #1c1d21;
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
}
.el-agd-tag-muted { background: #eef0f3; color: #4a4c52; }

/* Social pills */
.el-agd-social { display: flex; flex-wrap: wrap; gap: 10px; }
.el-agd-social-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #f4f5f7;
	border: 1px solid rgba(0,0,0,0.08);
	color: #1c1d21;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 999px;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.el-agd-social-btn i { color: #f0104a; font-size: 14px; }
.el-agd-social-btn .el-agd-social-x { color: #f0104a; flex: 0 0 auto; }
.el-agd-social-btn:hover { border-color: #f0104a; background: rgba(240,16,74,0.06); color: #f0104a; }

/* Sidebar */
.el-agd-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 991px) { .el-agd-side { position: static; } }

.el-agd-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.07);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}
.el-agd-card-title {
	font-size: 15px;
	font-weight: 800;
	color: #1c1d21;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.el-agd-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.el-agd-info-list li { display: flex; align-items: flex-start; gap: 13px; }
.el-agd-info-list li i { color: #f0104a; font-size: 16px; margin-top: 3px; flex-shrink: 0; }
.el-agd-info-list .lbl { display: block; font-size: 12px; color: #9a9ba1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.el-agd-info-list a { color: #f0104a; font-weight: 700; font-size: 14.5px; }
.el-agd-info-list a:hover { text-decoration: underline; }
.el-agd-addr { display: block; color: #1c1d21; font-weight: 600; font-size: 14.5px; }

.el-agd-hours-list { list-style: none; margin: 0; padding: 0; }
.el-agd-hours-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.el-agd-hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.el-agd-hours-list li:first-child { padding-top: 0; }
.el-agd-hours-list .day { font-size: 14px; font-weight: 700; color: #1c1d21; }
.el-agd-hours-list .time { font-size: 13.5px; color: #6b6b70; }

.el-agd-other-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.el-agd-other-list li a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 9px 8px;
	margin: 0 -8px;
	border-radius: 10px;
	transition: background 0.2s ease;
}
.el-agd-other-list li a:hover { background: #f4f5f7; }
.el-agd-mini-logo {
	width: 40px; height: 40px; min-width: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.5px;
}
.el-agd-other-info { display: flex; flex-direction: column; min-width: 0; }
.el-agd-other-info .name { font-size: 14px; font-weight: 700; color: #1c1d21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-agd-other-info .count { font-size: 12.5px; color: #9a9ba1; }
.el-agd-view-all { display: inline-block; color: #f0104a; font-weight: 700; font-size: 13.5px; }
.el-agd-view-all:hover { text-decoration: underline; }

/* Our Profiles (empty state) */
.el-agd-profiles { margin-top: 64px; margin-bottom: 64px; padding-top: 48px; border-top: 1px solid rgba(0,0,0,0.08); }
.el-agd-profiles-h { text-align: left; margin-bottom: 32px; }
.el-agd-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 56px 20px;
	background: #f9f9fa;
	border-radius: 16px;
}
.el-agd-empty-icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: #eef0f3;
	display: flex; align-items: center; justify-content: center;
	color: #9a9ba1;
	font-size: 24px;
	margin-bottom: 18px;
}
.el-agd-empty-title { font-size: 17px; font-weight: 800; color: #1c1d21; margin: 0 0 6px; }
.el-agd-empty-sub { font-size: 14px; color: #9a9ba1; margin: 0; }

/* ======================================================
   Escort Locate ����� Off-canvas mobile menu (custom drawer)
   A self-contained drawer (no plugin): pinned header +
   footer with a single scrollable body in between, so the
   menu ALWAYS scrolls with native touch and never hijacks
   the gesture. White surface, brand pink/red accents.
   ====================================================== */

.el-drawer {
	position: fixed;
	inset: 0;
	z-index: 20000;
	visibility: hidden;
	transition: visibility 0s linear 0.34s;
	/* .el-drawer-panel sits closed at translateX(100%) — 100% of its OWN
	   width past .el-drawer's right edge, i.e. up to ~86vw beyond the
	   viewport. Without clipping, some mobile browsers (Chrome/Android
	   confirmed) still count that translated-but-offscreen box in the
	   document's scrollable area even though .el-drawer itself is
	   position:fixed, letting a user swipe right into a blank gap the
	   width of the closed drawer on every page that includes this
	   shared nav drawer. overflow:hidden clips the panel to this
	   viewport-sized box so the closed, translated copy never expands
	   the page's scrollable width — the open state (translateX(0)) is
	   still fully inside these bounds, so this doesn't clip anything
	   visible while the drawer is open. */
	overflow: hidden;
}
.el-drawer.is-open { visibility: visible; transition-delay: 0s; }

.el-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 18, 0.5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.32s ease;
}
.el-drawer.is-open .el-drawer-backdrop { opacity: 1; }

.el-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 86vw;
	max-width: 360px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22);
	transform: translateX(100%);
	transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.el-drawer.is-open .el-drawer-panel { transform: translateX(0); }

/* lock the page behind the open drawer */
html.el-drawer-lock,
html.el-drawer-lock body { overflow: hidden; }

/* ---- pinned header ---- */
.el-drawer-head {
	flex: 0 0 auto;
	height: 64px;
	padding: 0 12px 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.el-drawer-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: #1c1d21;
}
.el-drawer-brand-mark {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
	background:
		radial-gradient(circle at 50% 50%, #ffffff 0 4px, transparent 5px),
		linear-gradient(135deg, #ff4d6d, #f0104a);
	box-shadow: 0 6px 14px rgba(240, 16, 74, 0.32);
}
.el-drawer-close {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #f4f4f6;
	color: #1c1d21;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.el-drawer-close:hover { background: rgba(28, 29, 33, 0.1); color: #1c1d21; }
.el-drawer-close:active { transform: scale(0.92); }

/* ---- scrollable body (the fix: this is the only scroller) ---- */
.el-drawer-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 8px 12px 16px;
}
.el-drawer-label {
	margin: 16px 8px 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(58, 58, 63, 0.4);
}
.el-drawer-body .el-drawer-label:first-child { margin-top: 6px; }
.el-drawer-list { list-style: none; margin: 0; padding: 0; }
.el-drawer-list li { margin: 0; }
.el-drawer-list li a {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #1c1d21;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-drawer-list li a span { display: inline; }
/* uniform icon chip so the mixed glyph set reads as one family */
.el-drawer-list li a i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #f4f4f7;
	font-size: 16px;
	line-height: 1;
	color: #9a9ba1;
	padding: 0 !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.el-drawer-list li a:hover,
.el-drawer-list li a:focus {
	background: rgba(240, 16, 74, 0.06);
	color: #f0104a;
}
.el-drawer-list li a:hover i,
.el-drawer-list li a:focus i {
	background: rgba(240, 16, 74, 0.12);
	color: #f0104a;
}
/* active page */
.el-drawer-list li a.current {
	background: transparent;
	color: #f0104a;
	font-weight: 800;
}
.el-drawer-list li a.current i {
	background: #1c1d21;
	color: #ffffff;
	box-shadow: none;
}

/* ---- Explore section: trial "big card" row style ----
   EXPERIMENT: same 5 items (Home + 4 quick links), now styled to
   match the homepage Explore section's larger horizontal card look
   (bigger 42px icon chip, left-aligned label, trailing chevron)
   instead of the compact 3-col square-tile grid this used to be.
   Note the height trade-off this reintroduces: 5 full-width card
   rows run noticeably taller than the square-tile grid did — that
   grid was originally built specifically to cut this section's
   height in half (see the git history for this rule). Browse by
   City below keeps its own original tall vertical-list rows either
   way. */
.el-drawer-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.el-drawer-grid li a {
	flex-direction: row;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 14px;
	min-height: 0;
	border-radius: 14px;
	border: 1px solid #ececef;
	background: #ffffff;
	text-align: left;
	font-size: 14.5px;
}
.el-drawer-grid li a i {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	font-size: 18px;
	margin: 0;
}
.el-drawer-grid li a span { display: block; flex: 1; }
.el-drawer-grid li a::after {
	content: "\f105";
	font-family: FontAwesome;
	font-size: 13px;
	color: #c2c3c8;
	flex: none;
}
.el-drawer-grid li a:hover::after,
.el-drawer-grid li a:focus::after { color: #f0104a; }
.el-drawer-grid li a.current::after { color: #1c1d21; }

/* ---- pinned footer CTAs ---- */
.el-drawer-foot {
	flex: 0 0 auto;
	padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(0, 0, 0, 0.07);
	background: #ffffff;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.el-drawer-foot a {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.el-drawer-foot a:active { transform: scale(0.98); }
.el-drawer-btn-ic {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	line-height: 0;
}
.el-drawer-btn-ic i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	margin: 0;
	font-size: 16px;
	line-height: 1;
}
.el-drawer-btn-txt { flex: 1 1 auto; text-align: left; }
.el-drawer-signin {
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	color: #2c2f3a;
	box-shadow: 0 2px 6px rgba(17, 19, 26, 0.05);
}
.el-drawer-signin .el-drawer-btn-ic { background: #f4f4f6; color: #1c1d21; }
.el-drawer-signin:hover,
.el-drawer-signin:active { border-color: rgba(28, 29, 33, 0.35); color: #1c1d21; }
.el-drawer-add {
	background: #1c1d21;
	color: #ffffff;
	box-shadow: 0 12px 26px rgba(28, 29, 33, 0.3);
}
.el-drawer-add .el-drawer-btn-ic { background: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* safety: never show the drawer on desktop */
@media (min-width: 1025px) { .el-drawer { display: none; } }

/* ---- dashboard drawer (#elDashDrawer): identity in the head bar,
   count-badge pills in the list rows — everything else reuses the
   .el-drawer* classes above as-is for a visually identical drawer. ---- */
.el-drawer-head .el-dash-drawer-avatar img { width: 32px; height: 32px; }
.el-drawer-list li a .el-drawer-badge {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 22px;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: #ffffff;
}
.el-drawer-list li a .el-drawer-badge.yellow { background: #FFC107; color: #1c1d21; }
.el-drawer-list li a .el-drawer-badge.green { background: #28A745; }
.el-drawer-list li a .el-drawer-badge.orange { background: #FD7E14; }
.el-drawer-list li a .el-drawer-badge.pink { background: #DC3545; }
.el-drawer-list li a .el-drawer-badge.gray { background: #6C757D; }

/* ============================================================
   Escort Locate — My Listings search & filter bar
   A refined filter toolbar that shares the listings card's visual
   language (white, 16px radius, #ececef border): a borderless search
   with a subtle gray magnifier, a hairline divider, then the two
   filters as tidy soft "chips" that fill pink on hover/focus.
   #dashboard-scoped so it wins on source order and only affects
   dashboard pages. Collapses to clean stacked fields on mobile.
   ============================================================ */
#dashboard .el-mls-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #ececef;
	border-radius: 16px;
	padding: 12px 14px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(28, 29, 33, 0.04);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#dashboard .el-mls-bar:focus-within {
	border-color: #ffbccb;
	box-shadow: 0 6px 18px rgba(255, 77, 109, 0.1);
}
/* Wraps the two .el-mls-field selects. On desktop this is purely a
   pass-through flex row (same gap as the bar itself) so City + Suburb
   keep sitting side by side exactly as before the wrapper existed;
   the mobile media query below is what actually changes their layout
   (from 2 stacked full-width rows down to 1 shared row). */
#dashboard .el-mls-filter-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* search: borderless, grows to fill the row */
#dashboard .el-mls-search {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	gap: 12px;
	padding-left: 6px;
}
#dashboard .el-mls-search-ic {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: #b0b2bb;
	pointer-events: none;
	transition: color 0.18s ease;
}
#dashboard .el-mls-search:focus-within .el-mls-search-ic { color: #ff4d6d; }
#dashboard .el-mls-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0;
	/* the theme's base input carries a box-shadow (the phantom outline box),
	   a 16px bottom margin (dropped it below the icon's centerline) and a
	   51px line-height — reset all three so the field is flat and vertically
	   centered with the magnifier. */
	box-shadow: none;
	margin: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	line-height: 44px;
	color: #1c1d21;
}
#dashboard .el-mls-search input:focus {
	outline: none;
	box-shadow: none;
	border: 0;
}
#dashboard .el-mls-search input::placeholder { color: #9a9ca6; }
/* explicit search trigger — the field already filters live on input,
   so this button just re-fires that same filter (and drops the mobile
   keyboard) rather than needing its own separate logic. Solid black to
   match the site's black/white-first, pink-accent-only button
   convention (e.g. .el-search-go on the city-page hero search). */
#dashboard .el-mls-go {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: #1c1d21;
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
}
#dashboard .el-mls-go:hover { background: #33343a; }
#dashboard .el-mls-go svg { width: 17px; height: 17px; }
/* hairline divider between search and filters */
#dashboard .el-mls-divider {
	flex: 0 0 auto;
	width: 1px;
	height: 28px;
	background: #ececef;
}
/* filters: refined premium pill selects — crisp white, hairline border,
   letter-spaced label and an elegant chevron. */
#dashboard .el-mls-field {
	flex: 0 0 184px;
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
}
#dashboard .el-mls-field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 46px;
	/* reset the theme's base <select> defaults (16px bottom margin,
	   box-shadow, 51px line-height) so the pill is flat and its vertical
	   center lines up exactly with the search text on the left. */
	margin: 0;
	line-height: 46px;
	vertical-align: middle;
	border: 1px solid #e6e7eb;
	border-radius: 12px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0a2ab' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	box-shadow: 0 1px 2px rgba(28, 29, 33, 0.05);
	padding: 0 42px 0 18px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #2b2c33;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-image 0.18s ease;
}
#dashboard .el-mls-field select:hover {
	border-color: #d3d4da;
	box-shadow: 0 3px 10px rgba(28, 29, 33, 0.08);
}
#dashboard .el-mls-field select:focus {
	outline: none;
	border-color: #ff4d6d;
	box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.14);
	/* pink chevron while focused */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ff4d6d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Custom dropdown (JS-enhanced replacement for the native select).
   The trigger mirrors the premium pill above; the menu is a floating
   card with soft shadow, rounded rows, pink-tint hover and a check on
   the active option. --- */
#dashboard .el-mls-field .el-dd {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
#dashboard .el-mls-field .el-dd-native {
	display: none !important;
}
#dashboard .el-mls-field .el-dd-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 46px;
	margin: 0;
	border: 1px solid #e6e7eb;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28, 29, 33, 0.05);
	padding: 0 16px 0 18px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #2b2c33;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#dashboard .el-mls-field .el-dd-trigger:hover {
	border-color: #d3d4da;
	box-shadow: 0 3px 10px rgba(28, 29, 33, 0.08);
}
#dashboard .el-mls-field .el-dd.is-open .el-dd-trigger,
#dashboard .el-mls-field .el-dd-trigger:focus-visible {
	outline: none;
	border-color: #ff4d6d;
	box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.14);
}
/* a subtle pink dot when an actual city/suburb is chosen (not "All ...") */
#dashboard .el-mls-field .el-dd-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#dashboard .el-mls-field .el-dd-trigger.is-active .el-dd-label {
	color: #f0104a;
}
#dashboard .el-mls-field .el-dd-chev {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: #a0a2ab;
	transition: transform 0.22s ease, color 0.18s ease;
}
#dashboard .el-mls-field .el-dd.is-open .el-dd-chev {
	transform: rotate(180deg);
	color: #ff4d6d;
}
/* the floating menu */
#dashboard .el-mls-field .el-dd-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid #edeef1;
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(28, 29, 33, 0.28), 0 4px 12px rgba(28, 29, 33, 0.06);
	padding: 6px;
	max-height: 300px;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	pointer-events: none;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
#dashboard .el-mls-field .el-dd.is-open .el-dd-menu {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
#dashboard .el-mls-field .el-dd-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 500;
	color: #1c1d21;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease;
}
#dashboard .el-mls-field .el-dd-option:hover {
	background: rgba(255, 77, 109, 0.08);
	color: #f0104a;
}
#dashboard .el-mls-field .el-dd-option.is-selected {
	background: rgba(255, 77, 109, 0.1);
	color: #f0104a;
	font-weight: 700;
}
#dashboard .el-mls-field .el-dd-check {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: #f0104a;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.14s ease, transform 0.14s ease;
}
#dashboard .el-mls-field .el-dd-option.is-selected .el-dd-check {
	opacity: 1;
	transform: scale(1);
}
/* no-results state injected by the filter script */
#dashboard .el-mls-empty {
	list-style: none;
	padding: 46px 20px;
	text-align: center;
}
#dashboard .el-mls-empty-ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f2f3f5;
	color: #9a9ca6;
}
#dashboard .el-mls-empty-ic svg { width: 26px; height: 26px; }
#dashboard .el-mls-empty h5 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #1c1d21;
}
#dashboard .el-mls-empty p {
	margin: 0;
	font-size: 14px;
	color: #7e808a;
}
@media (max-width: 767px) {
	/* Shorter overall bar: search stays full-width on its own row, but
	   City + Suburb now sit SIDE BY SIDE in a second row instead of each
	   getting its own full-width stacked row — cuts the block from 3
	   stacked 48px rows down to 2 (search + a shared filter row), and
	   trims each control's own height (48px->42px) + tightens the outer
	   padding/gaps, so the whole card takes noticeably less vertical
	   space. The search gets its own soft field (matching the filter
	   chips) and the divider is hidden (it only made sense in the
	   desktop single-row layout). */
	#dashboard .el-mls-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px;
	}
	#dashboard .el-mls-divider { display: none; }
	#dashboard .el-mls-search {
		background: #f4f5f7;
		border: 1px solid transparent;
		border-radius: 11px;
		padding: 0 14px;
		transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	}
	#dashboard .el-mls-search:focus-within {
		background: #fff;
		border-color: #ff4d6d;
		box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.12);
	}
	#dashboard .el-mls-search input { height: 42px; }
	#dashboard .el-mls-go { width: 36px; height: 36px; border-radius: 9px; }
	#dashboard .el-mls-go svg { width: 16px; height: 16px; }
	/* Wrap the two select fields into their own flex row via a new
	   .el-mls-filter-row wrapper (added in markup right around the two
	   .el-mls-field elements) so they sit side by side instead of
	   stacking; each field shrinks to fit its half. */
	#dashboard .el-mls-filter-row {
		display: flex;
		gap: 8px;
	}
	#dashboard .el-mls-field { flex: 1 1 0; min-width: 0; }
	#dashboard .el-mls-field select { height: 42px; padding: 0 30px 0 14px; font-size: 13px; }
	#dashboard .el-mls-field .el-dd-trigger { height: 42px; padding: 0 30px 0 14px; font-size: 13px; }
}

/* =========================================================================
   Escort Locate — Outfit + Plus Jakarta Sans typography (both themes,
   site-wide). Outfit is a wide, rounded geometric sans used for headings
   and display/UI elements (echoing Shutterstock's black/white, headline-led
   type system); Plus Jakarta Sans is a companion grotesque used for body
   copy, where its taller x-height reads better at small paragraph sizes.
   Applied to text/UI elements only; icon-font elements (.sl, .fa, <i>) keep
   their own family, so glyphs are never affected.
   ========================================================================= */
body,
p, a, span, li, td, th, label, blockquote, figcaption, small, strong, em, b,
input, select, textarea {
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, button,
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.headline, .headline span, .headline strong, .headline-with-separator,
.button, .el-hero-title, .el-hero-subtitle,
.el-hero-lead, .el-card-head h3, .el-faq-q {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* keep icon fonts intact */
i, .sl, .fa, [class^="sl-"], [class*=" sl-"], [class^="fa-"], [class*=" fa-"],
.verified-icon, .like-icon, .el-faq-toggle {
	font-family: inherit;
}
[class^="sl-icon"], [class*=" sl-icon"], i.sl, i.fa {
	font-family: "simple-line-icons", "FontAwesome", sans-serif;
}

/* =========================================================================
   Escort Locate — BLACK HEADER + CITY-NAV BAR
   Matches the reference screenshot of shutterstock.com's actual header: a
   true flat near-black bar (not a charcoal/gray gradient) with white
   logo/nav text, and pink reserved as a small accent (hover/active states,
   the logo's pink mark) — the same role Shutterstock gives its orange
   accent. The city-nav bar below it is unaffected by this — it floats as a
   glass panel directly on the hero banner's own background (see the
   .el-citybar rules further down), not on the header's background, so it
   needs no changes here. Un-scoped from the old dark-mode toggle so it
   applies by default; excludes the dashboard header
   (#header-container.dashboard) which has its own design.
   Accent is the site's pink brand (#f0104a / #ff4d6d).
   ========================================================================= */

/* ---- HEADER BAR ---- */
#header-container:not(.dashboard) {
	background: #0e0e10;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#header-container:not(.dashboard) #header { background: transparent; }
/* logo: white "Escort" wordmark + lighter tagline on the black bar */
#header-container:not(.dashboard) #logo .brand-logo tspan[fill="#2b2b2b"] { fill: #ffffff; }
#header-container:not(.dashboard) #logo .brand-logo text[fill="#9a9a9a"] { fill: #b7b8bd; }

/* two-tier nav divider line */
#header-container:not(.dashboard) #navigation.style-1 {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* top-level nav links */
#header-container:not(.dashboard) #navigation.style-1 ul li a { color: #d8d9dc; }
#header-container:not(.dashboard) #navigation.style-1 ul li a:hover,
#header-container:not(.dashboard) #navigation.style-1 ul li:hover > a { color: #ff6b85; }
#header-container:not(.dashboard) #navigation.style-1 ul li a.current { color: #ff6b85; }
#header-container:not(.dashboard) #navigation.style-1 > ul > li > a:before { background: #ff4d6d; }
#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li > a.current,
#header-container:not(.dashboard) #navigation.style-1 > ul#responsive > li:hover > a { color: #ff6b85; }
/* dropdown panels: dark cards matching the black bar */
#header-container:not(.dashboard) #navigation.style-1 ul ul {
	background: #17181c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
#header-container:not(.dashboard) #navigation.style-1 ul ul li a { color: #b7b8bd; background: transparent !important; }
#header-container:not(.dashboard) #navigation.style-1 ul ul li a:hover { color: #ff6b85; }

/* quick-link icons + divider */
#header-container:not(.dashboard) .header-quick-links a { color: #d8d9dc; }
#header-container:not(.dashboard) .header-quick-links a:hover { background: rgba(255, 255, 255, 0.1); color: #ff6b85; }
#header-container:not(.dashboard) .header-quick-links a.is-active { background: transparent; color: #ff6b85; }
#header-container:not(.dashboard) .header-divider { background: rgba(255, 255, 255, 0.14); }

/* sign in / my account link */
#header-container:not(.dashboard) .header-widget .sign-in { color: #ffffff; }
#header-container:not(.dashboard) .header-widget .sign-in:hover { color: #ff6b85; }

/* mobile hamburger: dark-appropriate chip + white icon lines */
#header-container:not(.dashboard) .mmenu-trigger { background-color: rgba(255, 255, 255, 0.1); }
#header-container:not(.dashboard) .hamburger-inner,
#header-container:not(.dashboard) .hamburger-inner:before,
#header-container:not(.dashboard) .hamburger-inner:after { background-color: #ffffff; }

/* sticky (cloned) header stays black to match, with a soft shadow for lift */
#header-container:not(.dashboard) #header.cloned {
	background-color: #0e0e10;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
/* standalone city-nav bar (moved out of the header by custom.js) — the top
   header row above is plain text+icon links on a solid dark bg, so this row
   is built from a DIFFERENT visual vocabulary: instead of its own colored
   strip, it floats as a transparent/glass pill row directly ON TOP OF the
   hero banner's own background image, so the bar's "background" IS the
   hero photo (blurred), never a flat color that competes with the header.
   Mechanics: negative margin-bottom pulls the very next sibling (the hero)
   up underneath this bar by this element's own height, so it renders on the
   hero's background instead of a separate row; z-index beats the hero's
   .main-search-container (z-index:9). The bar and hero are SIBLINGS but NOT
   ADJACENT (a stray .clearfix div sits between them in the markup), so the
   hero-side compensating padding below must use the general sibling
   combinator ~, never +. */
.el-citybar {
	position: relative;
	z-index: 950;
	/* Default: a solid opaque black bar sitting in normal flow, right below
	   the header — this is what pages WITHOUT a hero underneath get
	   (listing detail, agencies, blog/FAQ/other .el-titlebar pages, etc).
	   Without this fallback the bar was always transparent + pulled up by
	   the hero-overlap margin below, which on a hero-less page instead
	   pulled the very next element (often the breadcrumb) up underneath the
	   bar and out of view, and left the bar's light hero-tuned text sitting
	   on the plain white page canvas with no contrast. */
	background: #0e0e10;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 0;
}
/* When a hero immediately follows (homepage, city pages, search/map/login/
   register/forgot-password/new.html — all carry .main-search-container),
   switch back to the transparent glass bar floating directly on the hero's
   own background instead of the solid fallback above. Bar and hero aren't
   adjacent siblings (a stray .clearfix div sits between them), so :has()
   must reach across it with the general sibling combinator. */
	.el-citybar:has(~ .main-search-container) {
		background: transparent;
		border-bottom: none;
		margin-bottom: -63px;
	}
/* ONE continuous glass strip (not per-item pills, not a shrink-wrapped
   pill): the fill lives on #navigation.style-1 itself and stretches the
   full container width, with a modest corner radius (not a full pill) so
   it reads as one wide panel rather than one big rounded lozenge. */
.el-citybar #navigation.style-1 {
	display: flex;
	width: 100%;
	margin: 3px 0;
	padding: 2px 22px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(5px) saturate(150%);
	-webkit-backdrop-filter: blur(5px) saturate(150%);
	overflow: hidden;
}
.el-citybar #navigation.style-1 > ul#responsive {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 2px;
}
.el-citybar #navigation.style-1 > ul#responsive > li {
	margin: 0;
}
.el-citybar #navigation.style-1 > ul#responsive > li > a {
	position: relative;
	padding: 3px 16px;
	margin: 0;
	border-radius: 9px;
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* city links: the nav is moved OUT of #header-container into .el-citybar, so
   the #header-container color rules don't reach it and it falls back to the
   base #444 (invisible over a photo). Default assumes the dark hero variant
   (homepage + city pages) — near-white text with a soft shadow so it stays
   legible over a busy photo background. */
.el-citybar #navigation.style-1 ul li a {
	color: rgba(255, 255, 255, 0.68);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* pill fill communicates state now, so the old underline indicator is
   switched off entirely for this bar. */
.el-citybar #navigation.style-1 > ul > li > a:before { content: none; }
/* HOVER — a quiet lift, not a color change: soft glass tint fill + full
   text opacity. No pink anywhere in the hover state. */
.el-citybar #navigation.style-1 ul li a:hover,
.el-citybar #navigation.style-1 ul li:hover > a {
	background: rgba(255, 255, 255, 0.045);
	color: rgba(255, 255, 255, 0.96);
}
/* ACTIVE/CURRENT — no pink fill. A brighter glass chip carries the state,
   and the ONE brand accent is a small underline mark under the label,
   not a background color. */
.el-citybar #navigation.style-1 > ul > li > a.current {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	text-shadow: none;
}
.el-citybar #navigation.style-1 > ul > li > a.current:after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 5px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #ff4d6d, #f0104a);
}

/* ADAPTIVE TEXT for the light-hero pages (search/map/login/register/
   forgot-password/new.html — the ones carrying .el-hero-compact). The
   homepage + 8 city pages keep the dark-photo hero and the light-glass
   capsule above; on the light hero this bar floats over, white text/glass
   would be invisible, so flip to a dark-on-light glass capsule instead. Bar
   and hero aren't adjacent siblings (see comment above), so :has() must
   reach across the stray .clearfix div with the general sibling combinator. */
.el-citybar:has(~ .main-search-container.el-hero-compact) #navigation.style-1 {
	border-color: rgba(28, 29, 33, 0.06);
	background: rgba(255, 255, 255, 0.25);
}
.el-citybar:has(~ .main-search-container.el-hero-compact) #navigation.style-1 ul li a {
	color: rgba(28, 29, 33, 0.62);
	text-shadow: none;
}
.el-citybar:has(~ .main-search-container.el-hero-compact) #navigation.style-1 ul li a:hover,
.el-citybar:has(~ .main-search-container.el-hero-compact) #navigation.style-1 ul li:hover > a {
	color: #1c1d21;
	background: rgba(28, 29, 33, 0.04);
}
.el-citybar:has(~ .main-search-container.el-hero-compact) #navigation.style-1 > ul > li > a.current {
	background: rgba(28, 29, 33, 0.06);
	color: #1c1d21;
}
/* compensating clearance so the floating pill row never collides with the
   hero's own title text underneath it — desktop only, matching when the
   bar is actually visible (display:none below 1025px). */
@media (min-width: 1025px) {
	.el-citybar ~ .main-search-container:not(.el-hero-compact) .main-search-inner { padding-top: 120px; }
	.el-citybar ~ .main-search-container.el-hero-compact .main-search-inner { padding-top: 94px; }
}

/* ---- HERO BANNER ----
   Hero is light everywhere (mobile + desktop) — the theme's original light
   hero rules ("modern centered hero" block above, ~L20962) already cover
   .el-hero/.el-hero-title/-subtitle/-lead/-tags, so no dark override lives
   here. Only the soft brand glow pseudo-element (added for the homepage
   redesign) is defined here, using light-appropriate low-opacity pink. */
.el-hero .main-search-inner::before {
	content: "";
	position: absolute;
	top: 6%;
	left: 50%;
	width: min(640px, 100%);
	height: 340px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(240, 16, 74, 0.10) 0%, rgba(240, 16, 74, 0) 68%);
	pointer-events: none;
	z-index: 0;
}
.el-hero .el-hero-content { position: relative; z-index: 1; }
/* Map Search + Advanced Search: no pink brand glow behind the title —
   keeps these two pages reading as black/white with pink used only as a
   small accent further down the page (toggle switches), not in the hero. */
.el-hero.el-hero-neutral .main-search-inner::before { display: none; }
/* Homepage: the mobile hero is now a compact self-contained photo card on
   a plain white section background, so this glow (sized/positioned for
   the old taller text hero) would show as a stray pink smudge below the
   card instead of sitting behind anything — disabled here, same pattern
   as el-hero-neutral above. */
.el-hero-home .main-search-inner::before { display: none; }

/* ---- DESKTOP-ONLY DARK HERO (homepage "country page" + the 8 city pages) ----
   User asked for the desktop hero on the homepage and city pages to be dark
   again. Every other page that reuses the same .el-hero/-title/-subtitle/
   -lead classes (search.html, map.html, login/register/forgot-password/
   new.html) carries the extra .el-hero-compact class, so scoping to
   .el-hero:not(.el-hero-compact) hits only the homepage + 8 city heroes and
   leaves those other pages on the light hero above. Mobile is intentionally
   left alone (min-width:769px only) — the earlier mobile hero redesign work
   established a light mobile hero here and that stays as-is. Colors reuse
   the site's pink brand from the previous (now-removed) dark hero rules. */
@media (min-width: 769px) {
	.el-hero:not(.el-hero-compact) {
		background: #0e0e10;
	}
	.el-hero:not(.el-hero-compact):before {
		background: linear-gradient(180deg, #0e0e10 0%, #0e0e10 62%) !important;
	}
	.el-hero:not(.el-hero-compact):after {
		background: rgba(255, 255, 255, 0.08);
	}
	.el-hero:not(.el-hero-compact) .el-hero-title { color: #ffffff; }
	.el-hero:not(.el-hero-compact) .el-hero-subtitle { color: #ff6b85; }
	/* Homepage only: the site's palette is black/white first with pink used
	sparingly as an accent — a full sentence of pink subtitle text read as too
	much color next to the pink eyebrow pill above it, so tone this one line
	down to a neutral light gray on the homepage hero specifically. City-page
	heroes keep the pink subtitle above untouched. */
	.el-hero:not(.el-hero-compact).el-hero-home .el-hero-subtitle { color: #c7c8cd; }
	.el-hero:not(.el-hero-compact) .el-hero-lead { color: #a9abb0; }
	.el-hero:not(.el-hero-compact) .el-hero-tags-label { color: #8d8f96; }
	.el-hero:not(.el-hero-compact) .el-hero-tags a {
		color: #d7d8dd;
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.14);
		box-shadow: none;
	}
	.el-hero:not(.el-hero-compact) .el-hero-tags a:hover {
		background: #f0104a;
		border-color: #f0104a;
		color: #fff;
	}
	.el-hero:not(.el-hero-compact) .main-search-inner::before {
		background: radial-gradient(ellipse at center, rgba(240, 16, 74, 0.22) 0%, rgba(240, 16, 74, 0) 68%);
	}
	.el-hero-home .el-hero-eyebrow {
		border-color: rgba(255, 255, 255, 0.22);
		background: rgba(255, 255, 255, 0.08);
		color: #ff9bae;
	}

	/* Mobile-only featured photo card + CTA button (markup added right
	   after .el-hero-lead in index.html) — hidden here since desktop
	   keeps the full .el-hero-photo ad-banner grid instead; the mobile
	   media query below (@media max-width:768px) turns these back on. */
	.el-hero-mobile-feature,
	.el-hero-mobile-feature-caption,
	.el-hero-mobile-cta {
		display: none;
	}

	/* Homepage hero background: no photo, now matches the 8 city-page
	   heroes' solid near-black base + single restrained pink accent glow
	   (previously the homepage had its own ambient Sky Tower photo behind
	   both columns — removed in favor of the same flat dark treatment
	   used site-wide on city pages, kept quiet as one signature touch
	   rather than a loud wash of color). */
	.el-hero:not(.el-hero-compact).el-hero-home,
	.el-hero:not(.el-hero-compact).el-hero-city {
		background: #0e0e10;
		background-image: radial-gradient(circle at 88% 8%, rgba(240,16,74,0.24) 0%, rgba(240,16,74,0.08) 32%, transparent 62%);
		background-size: 100% 100%;
		background-position: center;
	}
	.el-hero:not(.el-hero-compact).el-hero-home:before,
	.el-hero:not(.el-hero-compact).el-hero-city:before {
		background: linear-gradient(90deg, #0e0e10 0%, rgba(14,14,16,0.85) 55%, rgba(14,14,16,0.55) 100%) !important;
	}

	/* FLAT variant — same dark left-aligned .el-hero-city layout/typography
	   but with the photo removed, used on search/map/login/register/
	   forgot-password/new.html (class="el-hero-city el-hero-flat" on those
	   6 pages only). The 8 real city pages keep their photo untouched since
	   they don't carry .el-hero-flat. Specificity (3 classes) beats the
	   2-class .el-hero-city rule above it regardless of source order. */
	.el-hero:not(.el-hero-compact).el-hero-city.el-hero-flat {
		background-image: none;
	}
	.el-hero:not(.el-hero-compact).el-hero-city.el-hero-flat:before {
		background: #0e0e10 !important;
	}
	/* shorter banner now that there's no photo to fill — see the
	   .el-hero-city.el-hero-flat { min-height: 0 } reset above */
	.el-hero-city.el-hero-flat .main-search-inner { padding: 72px 0 48px; }
}

/* citybar-overlap clearance for the flat hero pages, tightened from the
   shared 120px used by the photo city heroes — those pages need more
   room because their content sits lower to clear the photo's own visual
   weight; these flat pages just need enough gap under the floating
   nav capsule (~30px) before the title starts. */
@media (min-width: 1025px) {
	.el-citybar ~ .main-search-container.el-hero-city.el-hero-flat .main-search-inner { padding-top: 108px; }
}

/* ---- Homepage hero — premium minimal redesign (mobile-first) ----
   Scoped to .el-hero-home only, so search.html/map.html/city pages/auth
   pages (which reuse the same .el-hero-title/-subtitle/-lead classes)
   stay untouched. The eyebrow tag is the one signature accent; the
   subtitle line is dropped on small screens (redundant with the eyebrow)
   and the long SEO lead paragraph is visually clamped to 3 lines instead
   of running the full ~6-line block — the full text stays in the DOM for
   crawlers, it's just not dumped in front of the user on a phone. */
.el-hero-home .el-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	margin-bottom: 20px;
	border: 1px solid rgba(240,16,74,0.22);
	border-radius: 50px;
	background: rgba(240,16,74,0.06);
	color: #f0104a;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	/* Tightened from 42px/32px — the card itself is now a small, fully
	   self-contained unit (photo + white caption bar, no CTA button
	   below it), so it no longer needs generous breathing room sized
	   for the old taller hero with supporting copy underneath. */
	.el-hero-home .main-search-inner { padding: 18px 0 16px; }
	.el-hero-home .main-search-inner::before { height: 230px; }
	/* left-align the hero copy on mobile to match the desktop layout
	   (title/eyebrow/lead all flush-left there) instead of centering it —
	   a left-aligned block also reads more naturally on a narrow screen,
	   since the eyebrow pill/title/lead no longer each need their own
	   centered optical balancing. */
	/* The homepage hero card: headline text overlaid directly on the
	   featured-photo carousel (.el-hero-mobile-feature — a fixed-height
	   absolute layer, top portion only, see below), with a separate
	   solid-WHITE caption strip for name/location BELOW the photo
	   rather than overlaid on it, matching the reference layout
	   exactly. Eyebrow/subtitle/lead move off-canvas on mobile
	   (display:none below) since the reference layout is just headline
	   + photo + caption, no supporting copy — the full SEO text stays
	   in the DOM for desktop and crawlers. Card total height = photo
	   height (168px) + caption strip height (30px) = 198px. */
	.el-hero-home .el-hero-content {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border-radius: 14px;
		/* Mobile Safari/WebKit can promote an absolutely-positioned child
		   with its own opacity transition (the active carousel slide's
		   crossfade) to its own compositing layer, and in that case the
		   layer sometimes ignores this parent's overflow:hidden clip,
		   leaking square corners through at the very corners of the
		   card. clip-path forces a real GPU clip that isn't skipped by
		   compositing, so it's kept alongside overflow:hidden as the
		   robust fix rather than relying on overflow alone. */
		clip-path: inset(0 round 14px);
		/* The card now contains only the photo (the name/location caption
		   was moved out to a plain-text element below it, see
		   .el-hero-mobile-feature-caption), so there's no internal white
		   strip to interrupt the bottom corners — a border + soft shadow
		   still gives the photo card a visible edge against the page's
		   own white background. */
		border: 1px solid rgba(28,29,33,0.08);
		box-shadow: 0 8px 24px rgba(28,29,33,0.08);
		min-height: 0;
		height: 168px;
		padding: 0 14px 16px;
		display: flex;
		align-items: flex-end;
		text-align: left;
		margin: 0;
		max-width: 100%;
	}
	.el-hero-home .el-hero-eyebrow { display: none; }
	.el-hero-home .el-hero-title {
		position: relative;
		z-index: 2;
		font-size: 17px;
		line-height: 1.24;
		letter-spacing: -0.2px;
		margin: 0;
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	}
	.el-hero-home .el-hero-subtitle { display: none; }
	.el-hero-home .el-hero-lead { display: none; }

	/* City-page heroes (el-hero-city, e.g. auckland-escorts.html): same
	   left-align treatment, matching the desktop layout ��� these pages
	   only have a title + lead, no eyebrow/subtitle to adjust. Title/lead
	   font size matched to the homepage hero's mobile size (27px/14px)
	   instead of the larger generic 32px/15px .el-hero-title/.el-hero-lead
	   mobile size used elsewhere, for visual consistency between the two. */
	.el-hero-city .el-hero-content { text-align: left; margin: 0; max-width: 100%; }
	.el-hero-city .el-hero-title { font-size: 27px; line-height: 1.24; letter-spacing: -0.3px; }
	.el-hero-city .el-hero-lead { font-size: 14px; line-height: 1.7; margin: 0; max-width: 100%; }

	/* Mobile city-page heroes (.el-hero-city above, ≥769px) reuse the same
	   solid dark background + restrained pink glow as desktop — for the
	   8 real city pages only. :not(.el-hero-flat) excludes search/map/
	   login/register/forgot-password/new.html, which also carry
	   .el-hero-city for their desktop dark-hero layout but keep mobile's
	   original light hero, matching the desktop split where only
	   .el-hero-flat removes the photo/glow treatment. Text colors flip
	   to the same light-on-dark palette used on desktop so everything
	   stays readable. The HOMEPAGE hero is scoped out of this dark
	   treatment below — it uses the site's plain white section
	   background instead, since its title/caption already sit on the
	   photo card itself and don't need a dark section behind them. */
	.el-hero-city:not(.el-hero-flat) {
		background: #0e0e10;
		background-image: radial-gradient(circle at 88% 6%, rgba(240,16,74,0.24) 0%, rgba(240,16,74,0.08) 32%, transparent 62%);
		background-size: 100% 100%;
		background-position: center;
	}
	.el-hero-city:not(.el-hero-flat):before {
		background: linear-gradient(180deg, #0e0e10 0%, rgba(14,14,16,0.92) 100%) !important;
	}
	.el-hero-city:not(.el-hero-flat):after {
		background: rgba(255, 255, 255, 0.08);
	}
	.el-hero-city:not(.el-hero-flat) .el-hero-title {
		color: #ffffff;
	}
	.el-hero-city:not(.el-hero-flat) .el-hero-lead {
		color: #a9abb0;
	}

	/* Homepage hero section: plain site white background (matches
	   body's #fff) instead of the dark treatment above — only the photo
	   card itself (.el-hero-content) stays dark, via its own photo +
	   gradient overlay, unaffected by this section-level change. */
	.el-hero-home {
		background: #ffffff;
		background-image: none;
	}
	.el-hero-home:before {
		background: #ffffff !important;
	}
	.el-hero-home:after {
		background: transparent;
	}
	.el-hero-home .el-hero-title {
		color: #ffffff;
	}

	/* Featured photo carousel: a real photographic anchor for the mobile
	   hero instead of type alone, with prev/next arrows to browse a
	   few featured profiles (one slide visible at a time, swapped via
	   .is-active + the .el-hero-mobile-feature-btn script in
	   index.html). Rounded card, dark gradient at the bottom of each
	   slide for legibility, "Online now" pill top-left (persistent —
	   all demo profiles are "online"), circular nav buttons top-right,
	   name/verified badge/location bottom-right per slide. Markup
	   added right after .el-hero-lead in index.html; hidden on
	   tablet/desktop (base rule right before this media query) which
	   keep the full .el-hero-photo ad-banner grid instead. */
	.el-hero-home .el-hero-mobile-feature {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 168px;
		z-index: 0;
		/* Matches the parent .el-hero-content's own 14px radius on all
		   four corners now that the caption bar no longer sits inside
		   this card — set explicitly instead of relying only on the
		   parent's overflow:hidden clip. */
		border-radius: 14px;
		overflow: hidden;
	}
	.el-hero-home .el-hero-mobile-feature-track {
		position: relative;
		height: 100%;
	}
	.el-hero-home .el-hero-mobile-feature-slide {
		display: block;
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease;
	}
	.el-hero-home .el-hero-mobile-feature-slide.is-active {
		opacity: 1;
		visibility: visible;
	}
	.el-hero-home .el-hero-mobile-feature-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.el-hero-home .el-hero-mobile-feature-slide:after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(14, 14, 16, 0.05) 0%, rgba(14, 14, 16, 0.28) 40%, rgba(14, 14, 16, 0.92) 100%);
	}
	.el-hero-home .el-hero-mobile-feature-tag {
		position: absolute;
		z-index: 2;
		top: 12px;
		left: 12px;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 11px;
		border-radius: 50px;
		background: rgba(14, 14, 16, 0.55);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	/* Circular prev/next buttons, top-right — same "white glass pill"
	   treatment as .el-hero-photo-btn on the desktop ad banner, sized
	   down for the smaller mobile card. */
	.el-hero-home .el-hero-mobile-feature-nav {
		position: absolute;
		z-index: 2;
		top: 12px;
		right: 12px;
		display: flex;
		gap: 6px;
	}
	.el-hero-home .el-hero-mobile-feature-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: none;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: #0e0e10;
		font-size: 11px;
	}
	/* Name/location caption — plain text sitting in normal document flow
	   directly BELOW the photo card (a sibling of .el-hero-content, not
	   nested inside it), so it no longer forms a white strip that
	   interrupts the card's own rounded bottom corners. No background/
	   border/radius of its own — just right-aligned text with a small
	   gap above it. Text is swapped per active slide by the script at
	   the bottom of this file (reads data-name/data-loc off the active
	   .el-hero-mobile-feature-slide), since this is a single shared
	   element rather than per-slide markup. */
	.el-hero-home .el-hero-mobile-feature-caption {
		display: flex;
		justify-content: flex-end;
		padding: 10px 14px 0;
	}
	.el-hero-home .el-hero-mobile-feature-caption-name {
		color: #1c1d21;
		font-size: 12px;
		font-weight: 700;
	}
	.el-hero-home .el-hero-mobile-feature-caption-loc {
		color: #6b6c72;
		font-size: 12px;
		font-weight: 700;
	}

	/* New Faces / Map Search / Advanced Search / Agencies
	   (.el-hero-flat-mobile-dark, a dedicated marker class since these 4
	   pages share el-hero-city.el-hero-flat with the auth pages below,
	   which intentionally keep their own light hero on mobile). Reverted
	   back to a plain white/light hero (no solid dark fill) with dark
	   text, and the title/lead sized to match the homepage hero's mobile
	   copy (.el-hero-home above) instead of the larger base .el-hero-title
	   (32px)/.el-hero-lead (15px) size used elsewhere. */
	.el-hero-flat-mobile-dark .el-hero-title {
		font-size: 27px;
		line-height: 1.24;
		letter-spacing: -0.3px;
	}
	.el-hero-flat-mobile-dark .el-hero-lead {
		font-size: 14px;
		line-height: 1.7;
	}
	/* One small pink touch on the light hero background. Map Search /
	   Advanced Search / Agencies also carry .el-hero-neutral, whose
	   global (non-media-queried) `:before` rule paints a gray fade at
	   the same 0,2,1+!important specificity — this selector matches
	   that specificity and wins the tie by coming later in source
	   order, so all 4 pages get a consistent soft blush top instead of
	   flat/gray white. */
	.el-hero.el-hero-flat-mobile-dark:before {
		background: linear-gradient(180deg, #fbe4e9 0%, #ffffff 55%) !important;
	}
}

/* ---- Homepage hero — stacked layout: copy on top, full-width ad banner
   below (desktop ≥1025px) ----
   The copy (eyebrow/title/subtitle/lead) sits on its own full-width row at
   the top of the hero; below it, "Latest Escorts from New Zealand" is a
   wide banner — one large featured photo + a 3x2 grid of six smaller
   tiles, paging through the ad pool via prev/next. This replaces an
   earlier side-by-side (copy left, photo column right) layout, which
   cramped the copy into a narrow column — stacking full-width instead
   gives the copy its own breathing room and gives the photo banner enough
   width to show more ads at once, echoing a "Diamond girls"-style wide ad
   strip while keeping this site's own tasteful photography convention
   (no explicit imagery, no tier badges/ribbons — just name/location).
   Scoped to .el-hero-home only; every other .el-hero page (search, map,
   login, the 8 city pages) is untouched and keeps its own treatment.
   Below 1025px the photo banner is hidden and the hero falls back to the
   existing centered text-only layout already established for tablet/
   mobile — .el-hero-split has no rules of its own there, so it's just a
   plain block wrapper around the (still centered) .el-hero-content. */
@media (min-width: 1025px) {
	/* Side-by-side hero layout — a single large photo card on the left,
	   copy on the right, matching the referenced layout instead of the
	   old full-width stacked text + mosaic grid. */
	.el-hero-home .el-hero-split {
		display: flex;
		align-items: center;
		gap: 56px;
	}
	.el-hero-home .el-hero-feature {
		flex: 0 0 400px;
	}
	.el-hero-home .el-hero-split .el-hero-content {
		flex: 1;
		min-width: 0;
		max-width: 100%;
		margin: 0;
		text-align: left;
	}
	/* eyebrow/title/subtitle stay a comfortable reading width even though
	   the lead paragraph below now stretches full width — keeps the
	   large display type from spanning an unreadably long single line */
	.el-hero-home .el-hero-eyebrow,
	.el-hero-home .el-hero-title,
	.el-hero-home .el-hero-subtitle { max-width: 900px; }
	/* taller hero + a more generous, evenly-stepped vertical rhythm between
	   each element — the previous tight spacing (12-18px between every
	   line) read as cramped/crowded once the copy became a full-width
	   block; this widens the gaps and gives each element more room to
	   breathe without changing type size or the overall composition. */
	.el-citybar ~ .main-search-container.el-hero-home .main-search-inner { padding-top: 114px; }
	.el-hero-home .main-search-inner { padding-bottom: 72px; }

	.el-hero-home .el-hero-eyebrow { margin-bottom: 22px; }
	.el-hero-home .el-hero-title {
		font-size: 34px;
		line-height: 1.2;
		letter-spacing: -0.4px;
		margin-bottom: 18px;
	}
	.el-hero-home .el-hero-subtitle { font-size: 16px; margin-bottom: 26px; }
	/* the base .el-hero-lead rule centers itself with margin:0 auto (for the
	   centered mobile/tablet layout) — override to a flush-left block so it
	   lines up with the eyebrow/title/subtitle above instead of drifting
	   toward the middle of the (wider, left-aligned) .el-hero-content box */
	.el-hero-home .el-hero-lead {
		margin: 0;
		max-width: 100%;
	}

	/* City-page heroes (el-hero-city, e.g. auckland-escorts.html): match the
	   homepage's left-aligned layout and title size at this same desktop
	   breakpoint. These pages have no eyebrow/subtitle/photo banner �� just
	   title + lead — so only those two need to line up with the homepage's
	   copy column instead of staying centered at a larger 46px title. */
	.el-hero-city .el-hero-content {
		max-width: 100%;
		margin: 0;
		text-align: left;
	}
	.el-hero-city .el-hero-title {
		position: relative;
		max-width: 900px;
		font-size: 34px;
		line-height: 1.2;
		letter-spacing: -0.4px;
		margin-bottom: 26px;
		padding-bottom: 18px;
	}
	.el-hero-city .el-hero-title:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 56px;
		height: 3px;
		border-radius: 2px;
		background: linear-gradient(90deg, #f0104a, rgba(240,16,74,0));
	}
	.el-hero-city .el-hero-lead {
		margin: 0;
		max-width: 100%;
	}

	/* ---- Featured photo showcase: one large photo card cycling through
	   the same set of profiles via prev/next (crossfade handled by the
	   script in index.html), with a plain name/location caption below
	   the card — a single strong photo instead of a busy multi-tile
	   mosaic, matching the referenced layout. */
	.el-hero-home .el-hero-feature-card {
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		background: #1c1d21;
		aspect-ratio: 3 / 4;
		box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
	}
	.el-hero-home .el-hero-feature-track { position: relative; height: 100%; }
	.el-hero-home .el-hero-feature-slide {
		display: block;
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease;
	}
	.el-hero-home .el-hero-feature-slide.is-active {
		opacity: 1;
		visibility: visible;
	}
	.el-hero-home .el-hero-feature-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.el-hero-home .el-hero-feature-live {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		border-radius: 50px;
		background: rgba(23, 24, 28, 0.55);
		backdrop-filter: blur(6px) saturate(140%);
		-webkit-backdrop-filter: blur(6px) saturate(140%);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
	}

	.el-hero-home .el-hero-feature-nav {
		position: absolute;
		z-index: 2;
		top: 16px;
		right: 16px;
		display: flex;
		gap: 8px;
	}
	.el-hero-home .el-hero-feature-btn {
		width: 34px;
		height: 34px;
		border-radius: 999px;
		border: none;
		background: rgba(255, 255, 255, 0.92);
		color: #0e0e10;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}
	.el-hero-home .el-hero-feature-btn:hover {
		background: #fff;
		transform: translateY(-1px);
	}
	.el-hero-home .el-hero-feature-caption {
		display: flex;
		align-items: baseline;
		gap: 2px;
		margin-top: 14px;
		color: #fff;
	}
	.el-hero-home .el-hero-feature-caption-name {
		font-size: 17px;
		font-weight: 700;
	}
	.el-hero-home .el-hero-feature-caption-loc {
		font-size: 15px;
		color: rgba(255, 255, 255, 0.6);
	}
}
/* laptop-width band: shrink the card a little so it doesn't crowd the
   copy column before the 1024px cutover hides it entirely */
@media (min-width: 1025px) and (max-width: 1400px) {
	.el-hero-home .el-hero-feature { flex: 0 0 320px; }
}
@media (max-width: 1024px) {
	.el-hero-home .el-hero-feature { display: none; }
}

/* =========================================================================
   Escort Locate — MOBILE-ONLY LIGHT CITY-NAV BAR (<=768px)
   Desktop keeps the dark header + citybar above untouched (per the site's
   established dark top-nav look). The hero banner itself is light at ALL
   widths now (see the "HERO BANNER" block above — no dark hero override
   exists anymore). The top header row (logo + hamburger) was briefly
   flipped to light on mobile too but the user asked to revert it back to
   dark — with no mobile override left for #header-container, the earlier
   un-scoped dark rule (background gradient, white logo, etc., which
   applies at every width) takes over on mobile again automatically. Only
   the city-nav bar (Home/Auckland/Wellington/...) stays flipped to light
   on mobile, matching the light hero it sits directly above.
   ========================================================================= */
@media (max-width: 768px) {
	.el-citybar {
		background: #ffffff;
		border-bottom: 1px solid #ececef;
	}
	.el-citybar #navigation.style-1 ul li a { color: #55565c; }
	.el-citybar #navigation.style-1 ul li a:hover,
	.el-citybar #navigation.style-1 ul li:hover > a,
	.el-citybar #navigation.style-1 ul li a.current { color: #f0104a; }
}

/* ============================================================
   Browse by City — circular-avatar rail on the homepage, inspired
   by ivysociete.com's mobile "Browse by city" panel. No card
   background (sits directly on the page canvas); on wide screens
   the avatars spread out evenly edge-to-edge, on narrow screens
   they fall back to a fixed-width horizontal scroll rail.
   Mobile-only section: hidden by default (desktop/tablet), shown
   again inside the @media(max-width:900px) block below.
   ============================================================ */
.el-citybrowse {
	display: none;
	position: relative;
	margin: 28px 0 0;
	padding: 0;
}
.el-citybrowse-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.el-citybrowse-title {
	margin: 0;
	font-family: var(--font-sans, inherit);
	font-size: 20px;
	font-weight: 700;
	color: #1c1d21;
	letter-spacing: -0.01em;
}
.el-citybrowse-nav-group { display: flex; gap: 8px; flex: 0 0 auto; }

/* reset the card-scroller's absolute overlay-arrow positioning —
   here the arrows are static, inline in the header row */
.el-citybrowse .el-scroller-nav {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
	width: 34px;
	height: 34px;
	background: #f4f4f7;
	border: 1px solid #ececef;
	color: #55565c;
	box-shadow: none;
}
.el-citybrowse .el-scroller-nav:hover { background: #f0104a; border-color: #f0104a; color: #fff; }
.el-citybrowse .el-scroller-nav:active { transform: scale(0.94); }
.el-citybrowse .el-scroller-nav i { font-size: 14px; }
/* keep arrows visible on mobile too, unlike the default card rail */
.el-citybrowse .el-scroller-nav { display: flex !important; }

.el-citybrowse-track {
	position: relative;
	z-index: 1;
	justify-content: space-between;
	gap: 18px;
	padding: 2px 2px 6px;
}
.el-citybrowse-item {
	flex: 0 0 auto;
	width: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	scroll-snap-align: start;
	text-decoration: none;
}
.el-citybrowse-avatar {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #fff;
	box-shadow: 0 4px 14px rgba(28,29,33,0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f7;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.el-citybrowse-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.el-citybrowse-avatar--all {
	background: #1c1d21;
	border-color: #fff;
}
.el-citybrowse-avatar--all i { color: #fff; font-size: 24px; }
.el-citybrowse-item:hover .el-citybrowse-avatar { border-color: #f0104a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240,16,74,0.22); }
.el-citybrowse-name {
	font-size: 13px;
	font-weight: 600;
	color: #4a4b52;
	text-align: center;
	line-height: 1.25;
	max-width: 96px;
}
.el-citybrowse-item:hover .el-citybrowse-name { color: #f0104a; }

@media (max-width: 900px) {
	.el-citybrowse-track { justify-content: flex-start; }
}

/* Mobile-only: re-show the section (hidden by default above) on phones/
   small tablets, matching the same 768px breakpoint used by the header/
   city-nav-bar mobile overrides elsewhere on the page. */
@media (max-width: 768px) {
	.el-citybrowse { display: block; }
}

@media (max-width: 560px) {
	.el-citybrowse-title,
	.el-explore-title,
	.el-popular-section h3.headline.centered,
	.el-about-section h3.headline,
	.el-home-blog h3.headline,
	.el-faq h3.headline,
	.el-new-escorts h3.headline,
	.el-active-escorts h3.headline,
	.el-hottest-section h3.headline { font-size: 17px !important; line-height: 22px !important; }
	.el-citybrowse-avatar { width: 72px; height: 72px; border-width: 2px; }
	.el-citybrowse-avatar--all i { font-size: 22px; }
	.el-citybrowse-item { width: 78px; }
	.el-citybrowse-name { font-size: 13px; }
	.el-citybrowse-track { gap: 12px; }
	.el-citybrowse .el-scroller-nav { width: 30px; height: 30px; }
	.el-citybrowse .el-scroller-nav i { font-size: 12px; }
}

/* ---- Homepage "Latest Escorts from New Zealand" scroller — removed on
   desktop (that content now lives in the hero's own photo card, see
   .el-hero-feature in the hero split-layout block above), but kept for
   mobile/tablet where the hero photo card is hidden. Same mobile-only
   pattern as .el-citybrowse above: hidden by default, re-shown at the
   same 768px breakpoint. ============================================ */
.el-latest-escorts { display: none; }
@media (max-width: 768px) {
	.el-latest-escorts { display: block; }
}

/* ---- Homepage "Explore" card row — mobile-only, same
   hidden-by-default / re-shown-at-768px pattern as .el-citybrowse/
   .el-latest-escorts above. Desktop already surfaces New Faces/Map
   Search/Advanced Search/Agencies in the header's own quick-links
   nav, so this is a phone-only shortcut to the same destinations
   ("Home" is deliberately omitted �� we're already on it). Icons use
   the site's own icon font (sl-icon-*), flat black-on-light-gray per
   the standing black/white-first, pink-accent-only rule — no image
   assets needed, crisp at any density. All 4 tiles now sit in a
   single horizontally-swipeable row (native overflow-x scroll +
   scroll-snap, no JS needed) instead of a 2x2 grid — keeps every
   destination reachable without the section growing taller, and
   the peeking 4th card at the row's edge signals it's swipeable.
   Trailing chevron gives tap affordance, pink-tinted icon chip on
   press/hover is the one deliberate accent touch. */
.el-explore { display: none; }
@media (max-width: 768px) {
	.el-explore { display: block; padding: 24px 0 8px; }
	.el-explore-title {
		margin: 0 0 18px;
		padding: 0 15px;
		font-family: var(--font-sans, inherit);
		font-size: 20px;
		font-weight: 700;
		color: #1c1d21;
		letter-spacing: -0.01em;
	}
	.el-explore-grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 15px;
		-webkit-overflow-scrolling: touch;
		padding: 2px 15px 6px;
		scrollbar-width: none;
	}
	.el-explore-grid::-webkit-scrollbar { display: none; }
	.el-explore-tile {
		flex: 0 0 auto;
		scroll-snap-align: start;
		width: 78%;
		max-width: 260px;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 14px;
		border: 1px solid #ececef;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(20, 20, 24, 0.03);
		transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
	}
	.el-explore-tile:active {
		transform: scale(0.97);
		border-color: #e3e3e7;
		box-shadow: none;
	}
	.el-explore-tile-icon {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 13px;
		background: #f4f4f5;
		color: #1c1d21;
		font-size: 21px;
		transition: background 0.2s, color 0.2s;
	}
	.el-explore-tile:active .el-explore-tile-icon {
		background: rgba(240, 16, 74, 0.1);
		color: #f0104a;
	}
	.el-explore-tile-body {
		flex: 1;
		min-width: 0;
	}
	.el-explore-tile-label {
		display: block;
		font-size: 14.5px;
		font-weight: 700;
		color: #1c1d21;
		line-height: 1.3;
	}
	.el-explore-tile-sub {
		display: block;
		font-size: 11.5px;
		color: #8b8c92;
		margin-top: 1px;
	}
	.el-explore-tile-arrow {
		flex: none;
		font-size: 11px;
		color: #c2c3c8;
	}
}

/* ---- Listing detail: Photo Review vote feedback modal ----
   Shares the same fixed-overlay/centered-card mechanics as the
   dashboard's .el-del-overlay confirmation modals (blur backdrop,
   opacity+visibility toggle via .is-open, scale-in transform), but this
   one is a single-button "thank you" acknowledgement rather than a
   confirm/cancel prompt, so it gets its own .el-pr-* namespace. Icon +
   copy are swapped by JS depending on whether "Real" or "Fake" was
   voted — default state below is the "Real" (success/green) mood. */
.el-pr-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28,29,33,0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.el-pr-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.el-pr-modal {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 20px;
	padding: 40px 32px 32px;
	text-align: center;
	box-shadow: 0 30px 60px rgba(28,29,33,0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform .22s ease;
}
.el-pr-overlay.is-open .el-pr-modal {
	transform: translateY(0) scale(1);
}
.el-pr-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid rgba(11,145,102,0.28);
	background: #e7f8f0;
	color: #0b9166;
	font-size: 28px;
	line-height: 1;
}
.el-pr-icon.is-fake {
	border-color: rgba(217,142,4,0.3);
	background: #fef3e2;
	color: #d98e04;
}
.el-pr-modal h3 {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	color: #1c1d21;
}
.el-pr-modal p {
	margin: 0 0 26px;
	color: #6c7086;
	font-size: 14.5px;
	line-height: 1.55;
}
.el-pr-ok {
	width: 100%;
	padding: 13px 16px;
	border: none;
	border-radius: 10px;
	background: #1c1d21;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(28,29,33,0.24);
	transition: transform .15s ease, box-shadow .15s ease;
}
.el-pr-ok:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 26px rgba(28,29,33,0.3);
	background: #000;
}

/* Escort Locate — Report User to Site Admin modal, reuses the same
   fixed-overlay/backdrop pattern as .el-pr-overlay/.el-del-overlay
   but is wider (form content) and structured as a header row +
   body instead of a centered icon/heading confirmation card. */
.el-report-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28,29,33,0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.el-report-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.el-report-modal {
	width: 100%;
	max-width: 460px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 60px rgba(28,29,33,0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform .22s ease;
	overflow: hidden;
}
.el-report-overlay.is-open .el-report-modal {
	transform: translateY(0) scale(1);
}
.el-report-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	border-bottom: 1px solid rgba(28,29,33,0.08);
}
.el-report-head h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
}
.el-report-close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: #f4f4f7;
	color: #6c7086;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.el-report-close:hover {
	background: #ececef;
	color: #1c1d21;
}
.el-report-body {
	padding: 24px;
}
.el-report-label {
	display: block;
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: #1c1d21;
}
.el-report-textarea {
	width: 100%;
	min-height: 96px;
	padding: 12px 14px;
	border: 1px solid #e2e3ea;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #1c1d21;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.el-report-textarea::placeholder { color: #a0a1a6; }
.el-report-textarea:focus {
	outline: none;
	border-color: #1c1d21;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}
.el-report-hint {
	margin: 10px 0 20px;
	font-size: 12.5px;
	font-style: italic;
	color: #a0a1a6;
	line-height: 1.5;
}
.el-report-radios {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}
.el-report-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: #1c1d21;
	cursor: pointer;
}
.el-report-radio input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.el-report-radio-dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #d3d5df;
	position: relative;
	transition: border-color .15s ease;
}
.el-report-radio-dot:after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #f0104a;
	transform: scale(0);
	transition: transform .15s ease;
}
.el-report-radio input:checked + .el-report-radio-dot {
	border-color: #f0104a;
}
.el-report-radio input:checked + .el-report-radio-dot:after {
	transform: scale(1);
}
.el-report-contact {
	display: none;
	margin: -6px 0 18px;
}
.el-report-contact.is-visible {
	display: block;
}
.el-report-contact-label {
	display: block;
	margin: 14px 0 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1c1d21;
}
.el-report-contact-label:first-child {
	margin-top: 0;
}
.el-report-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #e2e3ea;
	border-radius: 10px;
	font-size: 14px;
	font-family: inherit;
	color: #1c1d21;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.el-report-input::placeholder { color: #a0a1a6; }
.el-report-input:focus {
	outline: none;
	border-color: #1c1d21;
	box-shadow: 0 0 0 3px rgba(28,29,33,0.08);
}
.el-report-submit {
	width: 100%;
	padding: 14px 16px;
	border: none;
	border-radius: 10px;
	background: #1c1d21;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.el-report-submit:hover:not(:disabled) {
	background: #000;
	transform: translateY(-1px);
}
.el-report-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.el-report-success {
	padding: 40px 32px 36px;
	text-align: center;
}
.el-report-success-ic {
	width: 68px;
	height: 68px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid rgba(11,145,102,0.28);
	background: #e7f8f0;
	color: #0b9166;
	font-size: 26px;
}
.el-report-success h4 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: #1c1d21;
}
.el-report-success p {
	margin: 0 0 26px;
	font-size: 14.5px;
	color: #6c7086;
	line-height: 1.55;
}
.el-report-done {
	width: 100%;
	padding: 13px 16px;
	border: none;
	border-radius: 10px;
	background: #1c1d21;
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.el-report-done:hover {
	background: #000;
}
@media (max-width: 480px) {
	.el-report-head { padding: 18px 18px; }
	.el-report-body { padding: 18px; }
}