*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; border: 0; }

 :root { 
 	--full-width: 100%; 
 	--full-height: 100%; 
 	--white: #ffffff;
 	--black: #000000;
 	--darkest-grey: #1E1E1E;
 	--darker-grey: #404040;
 	--dark-grey: #303030;
 	--light-grey: #ECEDEF;
 	--lighter-grey: #CACACA;
 	--medium-grey: #7A7A7A;
 	--medium-grey-xl: #9c9c9c;
 	--green: #46A282;
 	--dark-green: #265B49;
 	--light-green: #86D0B7;
 	--yellow: #EBBE56; 
 	--medium-yellow: #DEA520;
 	--dark-yellow: #864800;
 	--light-yellow: #E2AE32;
 	--orange: #D38E7A;
 	--light-orange: #D38979; 
 	--error: #F1421C;
 }

body, body * { font-family: 'Montserrat', sans-serif !important; outline: none; }
body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 20px; line-height: 25px; background: var(--white); }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; list-style-type: none; font-family: 'Montserrat', sans-serif; }
a, input, button, :after, :before, li { -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; text-decoration: none; }
/* header { -webkit-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; -moz-transition: all 0.6s ease-in; } */
html { min-height: 100%; font-family: 'Montserrat', sans-serif; }
h2 { font-size: 36px; font-weight: 800; line-height: 44px; color: var(--light-grey); }
h3 { font-weight: bold; font-size: 24px; line-height: 37px; color: var(--dark-grey); }
h4 { font-size: 20px; list-style: 24px; font-weight: bold; }
h5 { font-weight: 600; font-size: 18px; line-height: 22px; }
.yellow { color: var(--yellow); }
.green { color: var(--green); }
.wrapper { width: var(--full-width); height: var(--full-height); }
.center { max-width: 1600px; margin: 0 auto; position: relative; }
.clearfix { clear: both; }
.bttn { width: auto; display: inline-block; line-height: 61px; height: 61px; min-width: 200px; text-align: center; border-radius: 5px; cursor: pointer; color: var(--white); font-weight: 600; font-size: 18px; /* text-transform: uppercase;  */}

.bttn-primary { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#51ad8d+0,389574+100 */
background: #51ad8d; /* Old browsers */ background: -moz-linear-gradient(top, #51ad8d 0%, #389574 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #51ad8d 0%, #389574 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #51ad8d 0%, #389574 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#51ad8d', endColorstr='#389574', GradientType=0); /* IE6-9 */ }
.bttn-primary:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#39a881+0,218e67+100 */
background: #39a881; /* Old browsers */ background: -moz-linear-gradient(top, #39a881 0%, #218e67 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #39a881 0%, #218e67 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #39a881 0%, #218e67 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39a881', endColorstr='#218e67', GradientType=0); /* IE6-9 */ }
.bttn-secondary { color: var(--dark-grey); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cb7767+0,d38979+100 */ background: #cb7767; /* Old browsers */ background: -moz-linear-gradient(top, #cb7767 0%, #d38979 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #cb7767 0%, #d38979 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #cb7767 0%, #d38979 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb7767', endColorstr='#d38979', GradientType=0); /* IE6-9 */ }
.bttn-secondary:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c96b59+0,d17b68+100 */
background: #c96b59; /* Old browsers */ background: -moz-linear-gradient(top, #c96b59 0%, #d17b68 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c96b59 0%, #d17b68 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c96b59 0%, #d17b68 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c96b59', endColorstr='#d17b68', GradientType=0); /* IE6-9 */ }
.bttn-warning { color: var(--dark-grey); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4c366+0,e2ae4b+100 */ background: #f4c366; /* Old browsers */ background: -moz-linear-gradient(top, #f4c366 0%, #e2ae4b 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f4c366 0%, #e2ae4b 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f4c366 0%, #e2ae4b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4c366', endColorstr='#e2ae4b', GradientType=0); /* IE6-9 */ }
.bttn-warning:hover { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dbab4a+0,f2c865+100 */
background: #dbab4a; /* Old browsers */ background: -moz-linear-gradient(top, #dbab4a 0%, #f2c865 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #dbab4a 0%, #f2c865 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #dbab4a 0%, #f2c865 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbab4a', endColorstr='#f2c865', GradientType=0); /* IE6-9 */ }
.box-left { opacity: 0; transition: ease all 1.5s; margin-left: -100%; }
.box-left.fadeIn-left { opacity: 1; margin-left: 0; }
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dark-grey); z-index: 99; }
#status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* header { position: absolute; top: 0; left: 0; width: var(--full-width); } */
header { position: fixed; top: 0; left: 0; z-index: 50; width: var(--full-width); }
.header-up header { position: fixed; top: 0; left: 0; z-index: 50; width: var(--full-width); background: var(--white); }
header .center { padding: 30px 0; display: flex; flex-flow: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.header-down header { background: var(--white); position: fixed; top: -100%; left: 0; z-index: 50; }
.header-up header .logo-dark { display: inline-block; width: 110px; }
.header-up header .logo-dark img { width: 100%; }
.header-up header .logo-light { display: none; }
.header-up header .header-left nav ul li a, .header-up header .header-right ul li a { color: var(--dark-grey); }
.header-up header .center { padding: 10px 0; }
.header-up header .header-left nav, .header-up header .header-right ul { margin: 6px 0 0; }

.logo-light { position: relative; z-index: 1; }
.logo-light img { height: 60px; }
.header-left { width: auto; display: flex; justify-content: space-between; align-items: center; }
.header-left nav { width: auto; margin: 15px 0 0; padding: 0; position: relative; z-index: 2; }
.header-left nav ul li { width: auto; display: inline-block; padding: 0 0 0 50px; }
.header-left nav ul li a { width: auto; display: inline-block; color: var(--light-grey); font-size: 16px; font-weight: 400; }
.header-left nav ul li a:hover { color: var(--orange); }
.header-right { width: auto; }
.header-right ul { width: auto; margin: 15px 0 0; position: relative; z-index: 2; }
.header-right ul li { width: auto; display: inline-block; padding: 0 0 0 50px; }
.header-right ul li a { width: auto; display: inline-block; color: var(--white); font-size: 16px; font-weight: 600; }
.header-right ul li a:hover { color: var(--orange); }
.upper-landing { width: var(--full-width); background-color: var(--dark-grey); background-image: url(../img/bg.svg); /* background-size: 100%; */ background-position: 0 0; background-repeat: no-repeat; background-size: cover; }
.main-content { width: var(--full-width); }
.banner { width: var(--full-width); display: flex; align-items: flex-start; padding: 200px 0 0; }
.banner-content { width: 60%; position: relative; }
.banner-content h2 { font-weight: 900; font-size: 70px; line-height: 85px; color: var(--light-grey); text-align: left; padding: 0 0 65px; float: left; min-height: 240px; }
.banner-content h2 br { display: none; }
.banner-content h2 span.heading { float: left; width: 100%; display: block; }
.banner-content p { font-weight: 500; font-size: 20px; line-height: 24px; color: var(--light-grey); margin: 0 0 55px; clear: both; }

/*-------- typing text start --------------*/
.text_1 { animation: text1; color: var(--green); }
.text_2 { animation: text2; color: var(--yellow); }
.text_1, .text_2 { overflow: hidden; white-space: nowrap; display: inline-block; position: relative; animation-duration: 15s; animation-timing-function: steps(25, end); animation-iteration-count: infinite; margin: 0; float: left; position: relative; }
/* .text_1:after, .text_2:after { content: "|"; position: absolute; right: 0; width: 100%; color: var(--white); background: var(--white); animation: typing $animation-time steps($text-length) forwards, caret 1s infinite; }

@keyframes typing {
	to { width: 0 }
}
@keyframes caret {
	50% { color: transparent }
} */

@keyframes text2 {
	0%, 50%, 100% { width: 0; }
	60%, 90% { width: 500px; }
}
@keyframes text1 {
	0%, 50%, 100% { width: 0; }
	10%, 40% { width: 500px; }
}

/*-------- typing text end --------------*/
.play-icon:after { position: absolute; content: ""; left: -10px; top: -14px; width: 150px; height: 40px; border-top: 2px solid var(--white); border-left: 2px solid var(--white); opacity: 0; }
.play-icon:before { position: absolute; content: ""; left: -10px; bottom: -14px; width: 70px; height: 25px; border-bottom: 2px solid var(--white); border-left: 2px solid var(--white); opacity: 0; }
.play-icon .watch-video { opacity: 0; position: absolute; width: 150px; color: var(--white); left: 68px; top: 19px; }
.play-icon:hover:after, .play-icon:hover:before, .play-icon:hover .watch-video { opacity: 1; }
.play-icon { position: absolute; top: 90px; left: 68%; transform: translateX(-68%); }
.play-icon a { position: relative; z-index: 1; left: 0; top: 0; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.preloader { display: block; width: 60px; height: 60px; border-radius: 50%; border: 5px solid transparent; animation: rotating 10s infinite ease; -webkit-animation: rotating 10s infinite linear; position: absolute; left: 0; top: 0; }
.preloader:after { content: ""; position: absolute; border-radius: inherit; border: inherit; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/play-rotate.svg); background-repeat: no-repeat; background-position: 0 0; animation: rotating 5s infinite ease; -webkit-animation: rotating 5s infinite linear; }
@keyframes rotating {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes rotating {
	0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); }
	100% { transform: rotate(360deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); }
}
.banner-phone { width: 40%; height: 100%; margin-top: -7%; }
.phone-bg { background-image: url(../img/phone.svg); background-repeat: no-repeat; background-position: center 0; background-size: initial; width: 100%; height: 903px;    /* padding: 17% 26% 24% 26%; */ display: flex; align-items: center; justify-content: center; }
.phone-inn { background: var(--dark-grey); width: 300px; height: 680px; border-radius: 40px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }

/*-----mouse animation start ------------*/
.mouse span { position: absolute; bottom: -20px; left: -20px; color: #fff; font-weight: 500; font-size: 13px; line-height: 16px; text-align: center; letter-spacing: 0.5em; -webkit-animation: colorText 8s ease-out infinite, nudgeText 8s ease-out infinite; animation: colorText 8s ease-out infinite, nudgeText 8s ease-out infinite; }
.mouse { position: absolute; bottom: 12%; left: 50%; background: #303030 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%); width: 25px;    height: 40px; border-radius: 100px; background-size: 100% 200%; -webkit-animation: colorSlide 8s linear infinite, nudgeMouse 8s ease-out infinite; animation: colorSlide 8s linear infinite, nudgeMouse 8s ease-out infinite; }
.mouse:before, .mouse:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
.mouse:before { width: 23px; height: 38px; background-color: var(--dark-grey); border-radius: 100px; }
.mouse:after { background-color: #ffffff; width: 5px; height: 5px; border-radius: 100%; -webkit-animation: trackBallSlide 8s linear infinite; animation: trackBallSlide 8s linear infinite; top: auto; bottom: 14px; }
@-webkit-keyframes colorSlide {
	0% { background-position: 0% 100%; }
	20% { background-position: 0% 0%; }
	21% { background-color: #4e5559; }
	29.99% { background-color: #ffffff; background-position: 0% 0%; }
	30% { background-color: #4e5559; background-position: 0% 100%; }
	50% { background-position: 0% 0%; }
	51% { background-color: #4e5559; }
	59% { background-color: #ffffff; background-position: 0% 0%; }
	60% { background-color: #4e5559; background-position: 0% 100%; }
	80% { background-position: 0% 0%; }
	81% { background-color: #4e5559; }
	90%, 100% { background-color: #ffffff; }
}
@keyframes colorSlide {
	0% { background-position: 0% 100%; }
	20% { background-position: 0% 0%; }
	21% { background-color: #4e5559; }
	29.99% { background-color: #ffffff; background-position: 0% 0%; }
	30% { background-color: #4e5559; background-position: 0% 100%; }
	50% { background-position: 0% 0%; }
	51% { background-color: #4e5559; }
	59% { background-color: #ffffff; background-position: 0% 0%; }
	60% { background-color: #4e5559; background-position: 0% 100%; }
	80% { background-position: 0% 0%; }
	81% { background-color: #4e5559; }
	90%, 100% { background-color: #ffffff; }
}
@-webkit-keyframes trackBallSlide {
	0% { opacity: 1; transform: scale(1) translateY(-20px); }
	6% { opacity: 1; transform: scale(0.9) translateY(5px); }
	14% { opacity: 0; transform: scale(0.4) translateY(40px); }
	15%, 19% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	28%, 29.99% { opacity: 1; transform: scale(1) translateY(-20px); }
	30% { opacity: 1; transform: scale(1) translateY(-20px); }
	36% { opacity: 1; transform: scale(0.9) translateY(5px); }
	44% { opacity: 0; transform: scale(0.4) translateY(40px); }
	45%, 49% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	58%, 59.99% { opacity: 1; transform: scale(1) translateY(-20px); }
	60% { opacity: 1; transform: scale(1) translateY(-20px); }
	66% { opacity: 1; transform: scale(0.9) translateY(5px); }
	74% { opacity: 0; transform: scale(0.4) translateY(40px); }
	75%, 79% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	88%, 100% { opacity: 1; transform: scale(1) translateY(-20px); }
}
@keyframes trackBallSlide {
	0% { opacity: 1; transform: scale(1) translateY(-20px); }
	6% { opacity: 1; transform: scale(0.9) translateY(5px); }
	14% { opacity: 0; transform: scale(0.4) translateY(40px); }
	15%, 19% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	28%, 29.99% { opacity: 1; transform: scale(1) translateY(-20px); }
	30% { opacity: 1; transform: scale(1) translateY(-20px); }
	36% { opacity: 1; transform: scale(0.9) translateY(5px); }
	44% { opacity: 0; transform: scale(0.4) translateY(40px); }
	45%, 49% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	58%, 59.99% { opacity: 1; transform: scale(1) translateY(-20px); }
	60% { opacity: 1; transform: scale(1) translateY(-20px); }
	66% { opacity: 1; transform: scale(0.9) translateY(5px); }
	74% { opacity: 0; transform: scale(0.4) translateY(40px); }
	75%, 79% { opacity: 0; transform: scale(0.4) translateY(-20px); }
	88%, 100% { opacity: 1; transform: scale(1) translateY(-20px); }
}
@-webkit-keyframes nudgeMouse {
	0% { transform: translateY(0); }
	20% { transform: translateY(8px); }
	30% { transform: translateY(0); }
	50% { transform: translateY(8px); }
	60% { transform: translateY(0); }
	80% { transform: translateY(8px); }
	90% { transform: translateY(0); }
}
@keyframes nudgeMouse {
	0% { transform: translateY(0); }
	20% { transform: translateY(8px); }
	30% { transform: translateY(0); }
	50% { transform: translateY(8px); }
	60% { transform: translateY(0); }
	80% { transform: translateY(8px); }
	90% { transform: translateY(0); }
}
@-webkit-keyframes nudgeText {
	0% { transform: translateY(0); }
	20% { transform: translateY(2px); }
	30% { transform: translateY(0); }
	50% { transform: translateY(2px); }
	60% { transform: translateY(0); }
	80% { transform: translateY(2px); }
	90% { transform: translateY(0); }
}
@keyframes nudgeText {
	0% { transform: translateY(0); }
	20% { transform: translateY(2px); }
	30% { transform: translateY(0); }
	50% { transform: translateY(2px); }
	60% { transform: translateY(0); }
	80% { transform: translateY(2px); }
	90% { transform: translateY(0); }
}
@-webkit-keyframes colorText {
	21% { color: #4e5559; }
	30% { color: #ffffff; }
	51% { color: #4e5559; }
	60% { color: #ffffff; }
	81% { color: #4e5559; }
	90% { color: #ffffff; }
}
@keyframes colorText {
	21% { color: #4e5559; }
	30% { color: #ffffff; }
	51% { color: #4e5559; }
	60% { color: #ffffff; }
	81% { color: #4e5559; }
	90% { color: #ffffff; }
}

/*-----mouse animation end ------------*/
.find-content { width: var(--full-width); display: flex; align-items: center; justify-content: space-between; }
.find-content input[type="text"] { width: 52%; height: 60px; line-height: 60px; color: var(--dark-grey); font-weight: 500; font-size: 16px; background: var(--white); padding: 0 15px; border-radius: 5px; display: inline-block; vertical-align: middle; }
.post-job input[type="text"] { width: auto; }
.select { position: relative; width: 250px; height: 60px; }
.select .selectBtn { padding: 0 15px; box-sizing: border-box; border-radius: 5px; width: 100%; cursor: pointer; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: var(--white); height: 60px; color: var(--dark-grey); line-height: 60px; font-size: 16px; font-weight: 500; }
.select .selectBtn:after { content: ""; position: absolute; top: 45%; right: 15px; width: 12px; height: 12px; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); border-right: 2px solid var(--dark-grey); border-bottom: 2px solid var(--dark-grey); transition: 0.2s ease; }
.select .selectBtn.toggle { border-radius: 3px 3px 0 0; }
.select .selectBtn.toggle:after { -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg); }
.select .selectDropdown { position: absolute; top: 90%; width: 100%; border-radius: 0 0 5px 5px; overflow: hidden; z-index: 1; background: var(--white); -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: top center; transform-origin: top center; visibility: hidden; transition: 0.2s ease; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
.select .selectDropdown .option { padding: 10px; box-sizing: border-box; cursor: pointer; color: var(--dark-grey); font-size: 15px; font-weight: 500; }
.select .selectDropdown .option:hover { background: var(--light-grey); }
.select .selectDropdown.toggle { visibility: visible; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
.near-map { padding: 30px 0 0; position: relative; z-index: 2; }
.near-map img { width: 100%; display: block; }

/*---------------2nd section ------------*/
.bottom-banner { padding: 40px 0 50px !important; align-items: center; justify-content: space-between; }
.ipad-section { width: 49%; }
.ipad { background-image: url(../img/ipad.png); background-repeat: no-repeat; background-position: center 0; width: 670px; height: 100vh; background-size: cover; /* padding: 108px 104px 174px 153px; */ border-radius: 10px; overflow: hidden; }
.jobs-slider { width: 49%; }
.spacer { height: 100%; text-align: center; }
.c-1 { color: lightblue; }
.c-2 { color: pink; }
.c-3 { color: green; }
.c-img-responsive { max-width: 80%; position: absolute; }
.chat ul { margin: 0px; padding: 0px; list-style: none; }
.message-left .message-time { display: none; font-size: 12px; text-align: left; padding-left: 30px; padding-top: 4px; color: #333; font-family: Courier; }
.message-right .message-time { display: none; font-size: 12px; text-align: right; padding-right: 20px; padding-top: 4px; color: #ccc; font-family: Courier; }
.message-left { text-align: left; margin-bottom: 70px; }
.message-left .message-text { max-width: 90%; width: 100%; display: inline-block; background: var(--yellow); padding: 22px 15px; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--dark-grey); border-radius: 10px; position: relative; margin: 0 0 0 50px; }
.message-right { text-align: right; margin-bottom: 70px; }
.message-right .message-text { max-width: 90%; width: 100%; display: inline-block; background: var(--green); padding: 22px 15px; font-weight: 500; font-size: 16px; line-height: 20px; border-radius: 10px; text-align: left; color: var(--white); position: relative; margin: 0 50px 0 0; }
.chat { /* border-radius: 30px; padding: 20px 30px; height: 100%; */ border-radius: 10px; padding: 0; /* height: 570px; width: 390px; margin: 107px 0 0 123px; */ height: 650px; width: 440px; margin: 107px 0 50px 140px; }
.chat-container { overflow-y: auto; padding-right: 16px; height: 100%; }
.spinme-right { display: inline-block; padding: 15px 20px; font-size: 14px; border-radius: 30px; line-height: 1.25em; font-weight: 100; opacity: 1; background: #60B8B2; }
.spinme-left { display: inline-block; padding: 15px 20px; font-size: 14px; color: #fff; border-radius: 30px; line-height: 1.25em; font-weight: 100; opacity: 1; background: var(--white); }
.spinner { margin: 0; width: 30px; text-align: center; }
.spinner > div { width: 10px; height: 10px; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; background: rgba(0, 0, 0, 1); }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
.message-right .message-text .c-img-responsive { right: -50px; top: 0; }
.message-left .message-text .c-img-responsive { left: -50px; top: 0; }
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
	40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}
.ipad ::-webkit-scrollbar { width: 0px; }
.ipad ::-webkit-scrollbar-track-piece { background-color: transparent; -webkit-border-radius: 6px }

.slider-box { width: var(--full-width); }
.slider-box h2 { font-weight: 800; font-size: 50px; line-height: 65px; text-align: right; color: var(--light-grey); margin: 0 0 40px; }
.slider-box p { font-weight: 500; font-size: 20px; line-height: 30px; text-align: right; color: var(--light-grey); }

/*------------ lower landing ------*/
.lower-landing { width: var(--full-width); background: var(--white); padding: 100px 0 0; }
.category-slide { width: var(--full-width); }
.category-col { width: var(--full-width); display: inline-block; vertical-align: top; margin: 0 0 0 0; }
.category-box { width: auto; display: block; overflow: hidden; position: relative; margin: 16px 0; border-radius: 5px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.category-box img { width: var(--full-width); display: block; }
.category-box a { width: var(--full-width); position: absolute; bottom: 0; left: 0; text-align: center; font-weight: 600; font-size: 18px; line-height: 22px; color: var(--white); padding: 16px 10px; z-index: 2; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#303030+0,303030+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(48, 48, 48, 0) 0%, rgba(48, 48, 48, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(48, 48, 48, 0) 0%, rgba(48, 48, 48, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(48, 48, 48, 0) 0%, rgba(48, 48, 48, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00303030', endColorstr='#303030', GradientType=0); /* IE6-9 */ }
.category-box:after { position: absolute; content: ""; left: 0; top: 0; width: var(--full-width); height: var(--full-height); background: rgba(48, 48, 48, 0.6); opacity: 0; }
.category-box:hover:after { opacity: 1; }
.category-box span { opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 1; }
.category-box:hover span { opacity: 1; }

/* .category-slide .owl-carousel .owl-stage { left: -35%; padding-left: calc( (100% - 1600px) /2 ); } */
.category-slide .owl-carousel .owl-stage-outer { padding-left: calc((100% - 1600px) / 2); /* margin-left: -100px; */ }
.category-slide h3 { margin: 0 0 30px; }
.jobs-tabs { padding: 50px 0 0; overflow: hidden; }
.jobs-tabs ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; width: 99.9%; }
.jobs-tabs ul.tabs li { float: left; line-height: 32px; position: relative; padding-right: 50px; position: relative; }
.jobs-tabs ul.tabs li:after { position: absolute; content: "/"; left: -25px; top: 0; color: var(--dark-grey); font-weight: 400; font-size: 20px; }
.jobs-tabs ul.tabs li:first-child:after { display: none; }
.jobs-tabs ul.tabs li a { display: block; padding: 0 5px; outline: none; background: none; }
.jobs-tabs .tabContainer { border-top: none; overflow: hidden; clear: both; float: left; width: 100%; /* min-height: 300px; */ margin-bottom: 10px; }
.jobs-tabs .tabContent { padding: 40px 0 40px; }
.jobs-tabs .tabContent h3 { padding: 0px; }
.jobs-tabs .tabContainer #tab1 { background: var(--dark-grey); }
.jobs-tabs .tabContainer #tab1 .jobs-lists-row { border-bottom: 2px solid rgba(236, 237, 239, 0.3); padding: 0 0 70px; }

/**** TABS STYLES ****/
.jobs-tabs div.tabBox h3 { }
.jobs-tabs ul.tabs { }
.jobs-tabs ul.tabs li { }
.jobs-tabs ul.tabs li a { text-decoration: none; font-weight: 500; font-size: 18px; color: var(--dark-grey); outline: none; }
.jobs-tabs ul.tabs li.active a { font-weight: bold; font-size: 30px; }
.jobs-tabs div.tabContainer { background: #fff; margin: 20px 0 0; }
.jobs-lists-row ul.recent-job-list { width: var(--full-width); clear: both; padding: 20px 0 0; }
.jobs-lists-row ul.recent-job-list li { width: var(--full-width); display: flex; align-items: center; justify-content: space-between; position: relative; border: 2px solid rgba(236, 237, 239, 0.3); padding: 38px 24px; border-radius: 5px; margin: 0 0 22px; }
.jobs-lists-row ul.recent-job-list li label { font-weight: 700; font-size: 18px; line-height: 22px; color: var(--light-grey); }
.jobs-lists-row ul.recent-job-list li span.km { font-weight: 600; font-size: 16px; line-height: 20px; color: var(--light-grey); display: flex; align-items: center; }
.jobs-lists-row ul.recent-job-list li span.km img { margin: 0 0 0 10px; }
.jobs-lists-row ul.recent-job-list li span.time { font-weight: 500; font-size: 14px; line-height: 17px; color: var(--light-grey); position: absolute; right: -100px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.jobs-lists-row ul.recent-job-list li:hover { border-color: var(--white); }
.jobs-lists-row ul.recent-job-list li:last-child label { font-weight: 600; font-size: 20px; line-height: 24px; text-transform: uppercase; }
.jobs-lists-row ul.recent-job-list li label span { animation-duration: 1.3s; animation-iteration-count: infinite; animation-timing-function: linear; padding: 0 3px; }
.jobs-lists-row ul.recent-job-list li label span:nth-child(1) { animation-name: first; }
.jobs-lists-row ul.recent-job-list li label span:nth-child(2) { animation-name: second; }
.jobs-lists-row ul.recent-job-list li label span:nth-child(3) { animation-name: third; }
@keyframes first {
	0% { opacity: 0; }
	60%, 100% { opacity: 1; }
}
@keyframes second {
	0%, 20% { opacity: 0; }
	80%, 100% { opacity: 1; }
}
@keyframes third {
	0%, 40% { opacity: 0; }
	100% { opacity: 1; }
}
.jobs-lists-row .start-now { width: var(--full-width); height: 100px; line-height: 100px; font-weight: 600; font-size: 22px; text-align: center; text-transform: uppercase; color: var(--light-grey); min-width: var(--full-width); text-transform: none; }

/* THE RESPONSIVE PART */
@media only screen and (max-width:767px) {
	.jobs-tabs div.tabBox { }
	.jobs-tabs ul.tabs { height: auto; display: block; width: 100%; border-left: 0px; }
	.jobs-tabs ul.tabs li { width: 100%; }
	.jobs-tabs ul.tabs li a { border: 0px; }
	.jobs-tabs div.tabContainer { border: 0px; }
}
.jobs-lists-row { width: var(--full-width); }
.jobs-lists-row ul { display: flex; align-items: flex-start; justify-content: space-between; flex-flow: row; flex-wrap: wrap; flex-direction: row; }
.jobs-lists-row ul li { width: 49%; border: 2px solid #949494; padding: 20px; margin: 0 0 2%; display: flex; align-items: center; justify-content: space-between; }
.jobs-lists-row ul li .profile-img { width: 15%; text-align: center; }
.jobs-lists-row ul li .profile-img img { width: 80%; }
.jobs-lists-row ul li .profile-img span { font-size: 18px; font-weight: 500; }
.jobs-lists-row ul li .profile-info { width: 80%; }
.jobs-lists-row ul li .profile-info h5 { font-weight: 600; font-size: 18px; line-height: 22px; margin: 0 0 8px; width: auto; float: left; }
.jobs-lists-row ul li .profile-info p { font-weight: normal; font-size: 16px; line-height: 20px; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: var(--full-width); }
.jobs-lists-row ul li .more { font-weight: 600; font-size: 16px; line-height: 20px; color: var(--dark-grey); background-image: url(../img/arrow-left.svg); background-position: right center; background-repeat: no-repeat; padding: 0 15px 0 0; }
.jobs-lists-row ul li .more:hover { padding: 0 20px 0 0; color: var(--orange); }
.jobs-lists-row ul li .apply-btn { float: right; color: var(--white); font-size: 18px; font-weight: 500; min-width: 154px; height: 40px; line-height: 35px; border: 1px solid transparent; }
.jobs-lists-row ul li .apply-btn:hover { border-color: var(--dark-grey); }
.jobs-lists-row ul li .hourly { font-weight: 300; font-size: 16px; line-height: 20px; float: right; display: flex; align-items: center; }
.jobs-lists-row ul li .hourly img { padding: 0 0 0 10px; }
.jobs-lists-row ul li .district { font-weight: 500; font-size: 12px; line-height: 20px; float: left; width: 100%; display: flex; align-items: center; color: var(--medium-grey); margin: 0 0 8px; }
.jobs-lists-row ul li .district img { padding: 0 5px 0 0; }
footer { width: var(--full-width); background: var(--dark-grey); padding: 50px 0; }
footer .center { display: flex; align-items: flex-start; justify-content: space-between; }
.footer-block { width: 47%; }
.footer-block h3 { margin: 0 0 20px; color: var(--white); }
.footer-block ul { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.footer-block ul li { width: 33.33%; padding: 0 15px 0 0; margin: 0 0 10px; }
.footer-block ul li a { color: var(--white); font-weight: 500; font-size: 16px; line-height: 20px; position: relative; padding: 0 0 0 32px; }
.footer-block ul li a:after { position: absolute; content: ""; left: 0; top: 7px; width: 14px; height: 4px; background: var(--white); }
.footer-block ul li a:hover { color: var(--yellow); }
.footer-block ul li a:hover:after { left: 5px; background: var(--yellow); }
.newsletter { width: var(--full-width); display: flex; align-items: center; }
.newsletter input[type="text"] { width: 70%; background: var(--darker-grey); height: 60px; line-height: 60px; color: var(--lighter-grey); padding: 0 15px; border: 0; font-size: 16px; font-weight: 500; }
.newsletter input.subscribe-btn { border: 0; width: 30%; height: 60px; line-height: 60px; font-weight: 500; font-size: 20px; color: var(--dark-grey); text-align: center; cursor: pointer; border-radius: 5px; text-transform: capitalize; }
.social { width: auto; clear: both; margin: 25px 0 0; }
.social a { width: 48px; height: 48px; border: 2px solid var(--white); display: inline-block; vertical-align: middle; text-align: center; border-radius: 5px; margin: 0 10px 0 0; }
.social a span { display: flex; align-items: center; justify-content: center; height: 100%; }
.social a.fb-icon:hover { background: #3b5998; }
.social a.insta-icon:hover { background: #E1306C; }
.social a.linkedin-icon:hover { background: #0072b1; }
.view-more { display: flex; align-items: flex-end; justify-content: flex-end; margin: -60px 0 40px; font-weight: 300; font-size: 20px; line-height: 24px; text-align: right; color: var(--dark-grey); padding: 0 25px 0 0; background-image: url(../img/arrow-left.svg); background-repeat: no-repeat; background-position: right center; position: relative; z-index: 2; }
.view-more:hover { padding: 0 35px 0 0px; }
.jobs-tabs .more-jobs { position: absolute; right: 0; top: 0; margin: 0; }
.logo-dark { display: none; }
.start-bttn-row { width: auto; display: flex; padding: 60px 0; flex-flow: column; flex-wrap: wrap; float: right; }
.start-bttn-row p { font-weight: 500; font-size: 20px; line-height: 30px; color: rgba(236, 237, 239, 0.7); text-align: center; margin: 15px 0; }

.hidden-map { z-index: 2; border: 30px solid var(--dark-grey); background: var(--dark-grey); border-top: 0; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.25); }

.newsletter ::-webkit-input-placeholder, .login-form ::-webkit-input-placeholder { 
    color:    var(--light-grey);
}
.newsletter ::-webkit-input-placeholder, .login-form ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    var(--light-grey);
}
.newsletter :-moz-placeholder, .login-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    var(--light-grey);
   opacity:  1;
}
.newsletter ::-moz-placeholder, .login-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    var(--light-grey);
   opacity:  1;
}
.newsletter :-ms-input-placeholder, .login-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    var(--light-grey);
}
.newsletter ::-ms-input-placeholder, .login-form ::-ms-input-placeholder  { /* Microsoft Edge */
   color:    var(--light-grey);
}

.newsletter ::placeholder, .login-form ::placeholder { /* Most modern browsers support this now. */
   color:    var(--light-grey);
}

/*-----landing Responsive --------------*/

@media only screen and (max-width:1899px) {
	.center { padding: 0 2%; }
	header .center { padding: 1% 2%; }
	.banner { padding: 140px 0 0; }
	.find-content input[type="text"] { width: 50%; }
	.upper-landing { background-repeat: no-repeat; background-size: cover; }
	.jobs-lists-row ul.recent-job-list li { width: 90%; }
	.jobs-lists-row .start-now { min-width: 90%; width: 90%; }
	.slider { margin: -74px auto 0; }
	.header-up header .center { padding: 10px 2%; }
}
@media only screen and (max-width:1599px) {
	.jobs-tabs .more-jobs { right: 32px; }
}
@media only screen and (max-width:1499px) {
	.best-responsive-tab-content:first-child .find-content input[type="text"] { /* width: 65%;  */}
	.find-content input[type="text"] { width: 30%; }
	.select { width: 30%; }
	.find-content .bttn { width: auto; min-width: 100px; padding: 0 15px; font-size: 15px; }
	.chat { height: 540px; width: 350px; margin: 87px 0 0 180px; }
	.jobs-slider { width: 47%; }
	.banner-content h2 { font-size: 55px; line-height: 65px; min-height: 180px; padding: 0; }
	.slider-box h2 { font-size: 40px; line-height: 50px; }
	.slider-box p { font-size: 16px; line-height: 22px; }
	.category-box a { font-size: 15px; line-height: 1; }
}
@media only screen and (max-width:1299px) {
	.lower-landing { padding: 50px 0 0; }
	.slider-box h2 { font-size: 55px; line-height: 65px; margin: 0 0 20px; }
	.start-bttn-row { padding: 30px 0; }
	/* .chat { height: 655px; width: 390px; margin: 107px 0 0 163px; } */
	.chat { height: 560px; width: 350px; margin: 92px 0 0 180px; }
	.jobs-slider { width: 44%; }
}

@media only screen and (max-width:1199px) {
	.banner-content { padding: 0 10px 0 0; }
	.banner-content h2 { font-size: 50px; line-height: 60px; padding: 0 0 40px; }
	.best-responsive-tab-contents:not(.lgTabToggle-tab-responsive-active) { padding: 20px; }
	.best-responsive-tab-content:first-child .find-content input[type="text"] { width: 56%; }
	.jobs-slider { width: 100%; }
	.ipad-section { width: 100%; }
	.bottom-banner { flex-flow: column; }
	.ipad { margin: 0 auto; }
	.chat { height: 560px; width: 360px; margin: 92px 0 0 175px;}
	.slider-box h2, .slider-box p { text-align: left; }
	.start-bttn-row { float: none; margin: 0 auto; width: 300px; }
	.newsletter input.subscribe-btn { min-width: auto; }
}

@media only screen and (max-width:1023px) {
	.center { padding: 0 4%; }
	.banner { flex-flow: column; }
	.banner-content { order: 2; margin: -180px 0 0; width: 100%; }
	.banner-phone { width: 100%; height: 100%; margin-top: -7%; display: flex; justify-content: flex-end; }
	.banner-content h2 br { display: block; }
	.banner-content h2 { font-size: 36px; line-height: 44px; padding: 0 0 20px; }
	.banner-content p { font-size: 14px; line-height: 26px; margin: 0 0 25px; }
	.mouse { display: none; }
	.header-left nav ul li, .header-right ul li { padding: 0 0 0 20px; }
}

@media only screen and (max-width:959px) {
	.ipad { margin: 0 auto; height: 710px;}
	.jobs-slider { margin: 30px 0 0; }
}

@media only screen and (max-width:767px) {
	.banner-phone { width: 67%; height: 100%; margin-top: -7%; margin-left: 33%; }
	.phone-bg { background-image: url(../img/iphone-m.png); background-position: center 0; height: 468px; }
	.phone-inn { width: 175px; height: 395px; border-radius: 22px; margin: -8px 0 0; }
	.banner-content { margin: -140px 0 0; }
	.play-icon { position: absolute; top: -25%; left: 45px; z-index: 10; }
}


/*--------------- About US --------------*/


.inner-page { width: var(--full-width); background-color: var(--dark-grey); padding: 150px 0 0; }
.inner-page .about-top h2 { text-align: center; margin: 0 0 42px; }
.about-content { width: 62%; padding: 0 0 50px; }
.about-content h3 { font-size: 30px; color: var(--white); font-weight: 700; margin: 0 0 24px; }
.about-content p { color: var(--light-grey); font-weight: 300; line-height: 30px; }

.about-bottm { width: var(--full-width); background-color: var(--white); padding: 70px 0; }
.about-img { width: 30%; float: right; padding: 30px; margin: -16% 0 0; position: relative; }
.about-img img { width: 100%; display: block; }
.about-img:after { position: absolute; content: ""; width: 100%; height: 8px; background-color: var(--orange); left: 0; top: 0; }
.about-img:before { position: absolute; content: ""; width: 100%; height: 186px; left: 0; top: 0; border-right: 8px solid var(--orange); border-left: 8px solid var(--orange); }

.about-tab { width: 65%; float: left; margin: 0 0 50px; }

.inner-page-tab {  }
.inner-page-tab .tabs { width: var(--full-width); margin: 0 0 40px; }
.inner-page-tab .tabs li { width: auto; padding: 0px 50px 0 0; display: inline-block; }
.inner-page-tab .tabs li a { font-weight: 500; font-size: 20px; line-height: 24px; color: var(--dark-grey); position: relative; }
.inner-page-tab .tabs li.active a { font-weight: bold }
.inner-page-tab .tabs li.active a:before { position: absolute; content: ""; width: 100%; height: 3px; background-color: var(--dark-grey); left: 0; top: -5px; }
.tabContent p { font-weight: 500; font-size: 20px; line-height: 30px; color: var(--dark-grey); margin: 0 0 30px; }
.team-img-row { display: flex; align-items: center; }
.team-img-row .team-img { width: 150px; text-align: center; margin: 0 30px 0 0; }
.team-img-row .team-img img { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; text-align: center; border: 1px solid var(--dark-grey); margin: 0 0 10px; }
.team-img-row .team-img span { font-weight: 500; font-size: 18px; line-height: 22px; color: var(--dark-grey); }




/*--------------- FAQ --------------*/
.faq-section .inner-page-tab{ padding-bottom: 60px; border-bottom: 2px solid rgba(236, 237, 239, 0.2); }
.dark-theme-tab > *{ color: var(--white); } 
.dark-theme-tab .tabs li a{ color: var(--white); }
.dark-theme-tab .tabs li.active a:before{ background-color: var(--white); }

.faq-content { display: none; padding: 0 10px 20px; }
.faq-row{ padding: 12px 10px;border: 2px solid rgba(236, 237, 239, 0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.faq-row:not(:last-child){ margin-bottom: 16px; }
.faq-title { -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease; padding: 20px 10px;}
.faq-title h5{ font-weight: 700; font-size: 18px; line-height: 22px; color: var(--white); position: relative; padding-right: 20px; cursor: pointer;}
.faq-title h5:after{ content: ''; position: absolute; right: 10px; top: 6px; width: 18px; height: 10px; background: url('../img/faq-up-arow.svg'); -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; transition: 0.5s ease;}
.faq-title.active h5:after{ background: url('../img/faq-down-arow.svg'); }

.faq-content, .faq-content p{ font-weight: 500; font-size: 16px; line-height: 30px; color: var(--white);}
.faq-content p:last-of-type{ margin-bottom: 0; }

@media (max-width:979px) {
	.faq-section .inner-page-tab { padding-bottom: 0; border-bottom: 0); }
}

/*---------- Signup ------------*/

.login-section { width: var(--full-width); display: flex; flex-wrap: wrap; height: 100vh; overflow: hidden; }
.login-section:after { position: absolute; content: ""; width: var(--full-width); height: var(--full-height); left: 0; top: 0; background: rgba(48, 48, 48, 0.8); }
.login-box { width: 50%; display: flex;  position: relative; align-items: center; justify-content: center; position: relative; z-index: 5; }
.login-bg-box { width: 10%; border: 2px solid var(--dark-grey); }
.login-bg-box img { width: 100%; display: block; }

.inner-login { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 1; width: var(--full-width); height: 100%; display: flex; }
.login-section .center {  text-align: center; display: flex; width: var(--full-width); } 
.inner-login:after { position: absolute; content: ""; left: 0; top: 0; width: 50%; height: 100%; background: var(--dark-grey); z-index: 1; opacity: 1; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; }
.inner-login.current-login:after { left: 50%; }
.login-content { padding: 30px; }
.login-content h2 { font-weight: bold; font-size: 60px; line-height: 73px; text-align: center; color: var(--white); text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); margin: 0 0 20px; }
.member-link { font-weight: 500; font-size: 20px; line-height: 24px; text-align: center; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); color: var(--white); }
.member-link:hover { color: var(--yellow); }
.login-btn { clear: both; margin: 30px auto 0; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; }
.input-text { width: 100%; height: 58px; line-height: 58px; border-radius: 5px; border: 1px solid var(--medium-grey); padding: 0 10px; background: var(--dark-grey); color: var(--light-grey); font-size: 16px; }
.acnt-form { display: flex; align-items: center; justify-content: center; flex-flow: column; }
.acnt-form h3 { color: var(--white); font-weight: bold; font-size: 35px; line-height: 43px; text-align: center; margin: 0 0 40px; }
.login-form { width: 100%; text-align: left; }
.login-form li { width: 100%; margin: 0 0 20px; text-align: left; }
.login-form li label { font-weight: 600; font-size: 14px; line-height: 17px; color: var(--white); text-align: left; margin: 0 0 8px; display: inline-block; }
.signup-btn { clear: both; color: var(--white); font-weight: 600; font-size: 18px; width: var(--full-width); margin: 15px 0 0; text-transform: none; }
.login-form li p { font-size: 16px; font-weight: 400; line-height: 20px; color: var(--white); }
.login-form li p a { color: var(--orange); }
.logo-login { position: absolute; left: 0; top: 15px; z-index: 10; }

.login-content-inn.create-content { display: none; }
.login-acnt { display: none; }
.inner-login.current-login .login-content-inn.create-content { display: block; }
.inner-login.current-login .create-acnt { display: none; }
.inner-login.current-login .login-content-inn.login-text { display: none; }
.inner-login.current-login .login-acnt { display: block; }



/*------------ search category field ------------*/

.jobs-category-field { width: 52%; display: flex; align-items: center; justify-content: space-between; background: #fff; height: 60px; border-radius: 5px; padding: 0 10px; }
.jobs-icon { position: relative; padding: 0 20px 0 0; }
.jobs-icon:after { position: absolute; content: ""; right: 0; top: 0; background: url(../img/arrow-down.svg) 0 center no-repeat; width: 12px; height: 100%; }

.category-section { width: auto; }
.category-section .category-botton { border: 1px solid var(--medium-grey); border-radius: 5px; font-weight: 500; color: var(--medium-grey); font-size: 14px; height: 30px; line-height: 30px; padding: 0 10px; background: #fff; cursor: pointer; }


.is-hidden--off-flow { opacity: 0; transition: all 0.2s ease-in-out; z-index: -10;   /* *1* */ visibility: hidden;   /* *1* */ }
.is-shown--off-flow { opacity: 1; transition: all 0.2s ease-in-out; visibility: visible; }
.l-modal { position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; margin: 0 auto; z-index: 2; text-align: center; }
.l-modal__shadow { width: 100%; height: 100%; position: fixed; display: block; background: #161616; opacity: 0.92; z-index: -1; cursor: pointer; }
.l-modal__body { position: relative; top: 50%; transform: translateY(-50%); }
.c-popup { display: inline-block; text-align: center; background: white; max-width: 530px; width: 100%; line-height: 1.48; }
.h-img-resp { max-width: 100%; }
.c-popup__note { opacity: 0.2; font-size: 1em; margin-top: 6px; margin-bottom: 60px; }

.category-option-box { width: var(--full-width); display: block; padding: 40px 10px 40px 40px; }
.category-option-box h4 { font-weight: bold; font-size: 24px; line-height: 29px; text-align: center; display: block; color: var(--dark-grey); margin: 0 0 25px; }
.choose-category { width: var(--full-width); }
.choose-category h5 { font-weight: 600; font-size: 18px; line-height: 22px; text-align: left; color: var(--dark-grey); margin: 0 0 10px; }
.choose-category ul { padding: 0; }
.choose-category ul li { width: var(--full-width); text-align: left; margin: 0 0 8px; position: relative; }
.choose-category ul li input[type="checkbox"] { width: 100%; height: 92%; left: 0; top: 0; position: absolute; opacity: 0; cursor: pointer; }
.choose-category ul li a { width: auto; color: var(--dark-grey); padding: 5px 12px; display: inline-block; font-weight: 500; font-size: 14px; line-height: 17px; border: 1px solid var(--dark-grey); border-radius: 5px; }
.choose-category ul li a:hover, .choose-category ul li input[type="checkbox"]:checked + a { background: #ECEDEF; }

.find-content input[type="text"].category-search-field { border: 0; width: 60%; padding: 0; font-weight: 500; font-size: 14px; line-height: 17px; color: var(--dark-grey); padding: 0 10px; }
.onmap-btn { position: relative; text-align: left; padding: 0 0 0 77px; }
.onmap-btn:after { position: absolute; content: ""; left: 44px; top: 0; background: url(../img/onmap-icon.svg) 0 center no-repeat; width: 28px; height: 100%; }

.scrollbar::-webkit-scrollbar { background-color: #fff; width: 12px }

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track { background-color: #fff }
.scrollbar::-webkit-scrollbar-track:hover { background-color: #fff; }

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb { background-color: #303030; border-radius: 16px; border: 3px solid #fff }
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: #a0a0a5; border: 3px solid #fff; }

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button { display: none }
.scrollbar { height: 250px; width: 100%; min-width: 100%; background: #fff; overflow-y: scroll; margin: 0 0 40px; }

.close { position: absolute; right: 15px; top: 15px; }
.save-btn { min-width: 155px; height: 40px; font-weight: 500; font-size: 18px; color: var(--white); line-height: 40px; }


.login-form li { position: relative; }
.login-form li span.password-close-eye { background: var(--dark-grey) url(../img/close-eye.svg) 97% center no-repeat; position: absolute; right: 12px; top: 50px; width: 30px; height: 20px; }
.login-form li input[type="password"], .login-form li input[type="text"] { padding: 0 50px 0 10px; background-color: var(--dark-grey); width: 100%; height: 58px; line-height: 58px; border-radius: 5px; border: 1px solid var(--medium-grey); background: var(--dark-grey); color: var(--light-grey); font-size: 16px; }
.forgot-pass { color: var(--white); text-align: right; font-size: 14px; float: right; margin: 6px 0; }
.forgot-pass:hover { color: var(--yellow); }

.choose-category .filter-category { display: flex; flex-wrap: wrap; }
.choose-category .filter-category li { width: auto !important; margin: 0 10px 10px 0 !important; }
.choose-category .filter-category li a { border: 0; padding: 2px 10px; color: var(--dark-grey); background-color: var(--light-grey); border-radius: 20px; }
.choose-category .filter-category li a:hover { text-decoration: none; }
.choose-category ul li.checked a { background: #ECEDEF; }


/*-----------Result Page ------------------*/

.fixed-header { width: var(--full-width); background: var(--dark-grey); padding: 15px 20px; position: fixed; top: 0; left: 0; z-index: 10; }
.fixed-header .center { display: flex; align-items: center; justify-content: space-between; }
.fixed-header .header-l { width: auto; display: flex; align-items: center; justify-content: space-between; }
.fixed-header .header-r { width: auto; display: flex; align-items: center; justify-content: space-between; }
.fixed-header .fixed-header-logo { height: 52px; }
.fixed-header .fixed-header-logo img { width: 105px; }
.fixed-header .header-l nav { width: auto; margin: 8px 0 0; padding: 0; position: relative; z-index: 2; }
.fixed-header .header-l nav ul li { width: auto; display: inline-block; padding: 0 0 0 50px; }
.fixed-header .header-l nav ul li a { width: auto; display: inline-block; color: var(--light-grey); font-size: 18px; font-weight: 400; }
.fixed-header .header-l nav ul li a:hover { color: var(--orange); }
.fixed-header .header-r ul { width: auto; margin: 0; position: relative; z-index: 2; }
.fixed-header .header-r ul li { width: auto; display: inline-block; padding: 0 0 0 50px; }
.fixed-header .header-r ul li a { width: auto; display: inline-block; color: var(--white); font-size: 16px; font-weight: 600; }
.fixed-header .header-r ul li a:hover { color: var(--orange); }
.inner-page-content { width: var(--full-width); position: relative; padding: 110px 0 0 0; }
.inner-page-content .center { padding: 62px 7% 0; }
.search-result-page { width: var(--full-width); display: flex; justify-content: space-between; }
aside { width: 26%; border-radius: 5px; padding: 20px 0; border-radius: 5px; /* background-color: var(--light-grey); */ }
.main-inner { width: 71%; }
.result-list { width: var(--full-width); display: block; }
.result-list li { margin: 0; position: relative; padding: 0; width: var(--full-width); clear: both; padding: 24px 16px; background-color: var(--dark-grey); color: var(--white); border-radius: 5px; margin: 0 0 30px; }

/* .result-list li:nth-child(even) { background-color: var(--white); } */
.result-list li h3 { font-weight: 600; font-size: 20px; line-height: 24px; text-align: left; margin: 0 0 10px; color: var(--white); }
.result-list li .rate-addres { display: flex; align-items: center; margin: 0 0 25px; width: auto; }
.result-list li .rate-addres p { width: auto; font-weight: normal; font-size: 14px; line-height: 17px; display: flex; align-items: center; margin: 0 40px 0 0; }
.result-list li .rate-addres p img { margin: 0 7px 0 0; }
.result-list li p { width: var(--full-width); display: block; font-weight: normal; font-size: 16px; line-height: 20px; margin: 0 0 30px; }
.bottom-row { display: flex; align-items: center; }
.profile-info { width: auto; display: flex; align-items: center; margin: 0 40px 0 0; }
.profile-info span.pro-name { margin: 0 0 0 8px; font-weight: 500; font-size: 16px; line-height: 20px; }
.pro-img { width: 50px; height: 50px; overflow: hidden; border: 1px solid var(--lighter-grey); padding: 3px; border-radius: 50%; }
.pro-img img { width: 100%; height: 100%; }
.rating { font-weight: 500; font-size: 16px; margin: 0 0 0 8px; }
.rating span { font-size: 14px; font-weight: 300; }
.profile-info label { font-weight: 500; font-size: 12px; margin: 0 0 0 8px; }
.result-list li .button-row { display: flex; justify-content: flex-end; width: calc(100% - 58%); }
.result-list li .button-row .view-btn { justify-content: right; float: right; height: 40px; line-height: 40px; color: var(--white); min-width: 155px; }
.aside-box { width: var(--full-width); padding: 0 0 24px; border-bottom: 1px solid #D2D2D2; margin: 0 0 24px; }
.aside-box h2 { font-weight: 800; font-size: 20px; line-height: 24px; color: var(--dark-grey); margin: 0 0 20px; }
.aside-box .input-text { border: 1px solid var(--medium-grey); background-color: var(--white); height: 45px; color: var(--dark-grey); }
.aside-box h4 { font-weight: 700; font-size: 18px; line-height: 22px; color: var(--dark-grey); margin: 0 0 20px; }
.add-category { position: relative; }
span.add-icon { background: url(../img/add-icon.svg) 0 0 no-repeat; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 16px; height: 16px; cursor: pointer; }
.close-eye { background: url(../img/close-eye.svg) 97% center no-repeat; position: absolute; right: 12px; top: -40px; width: 30px; height: 20px; cursor: pointer; }
.aside-box .select { width: 100%; height: 45px; border: 1px solid var(--dark-grey); border-radius: 5px; }
.aside-box .select .selectBtn { height: 40px; line-height: 45px; }
.aside-box .select .selectDropdown { top: 110%; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16); border-radius: 5px; padding: 10px 0; z-index: 10 !important; }
.aside-box .select .selectDropdown .option { padding: 4px 10px; font-size: 14px; font-weight: 400; }
.aside-box .select .selectDropdown h5 { padding: 5px 10px; font-size: 16px; font-weight: 600; }
.noUi-target { cursor: pointer; }
.noUi-target:focus { outline: none; }
.noUi-horizontal { height: 5px; }
.noUi-connect { background: var(--orange); }
.noUi-base { background: #fff; height: 5px; }
.noUi-horizontal .noUi-handle { top: -6px; right: -15px; width: 10px; height: 10px; background: var(--orange); border: 5px solid var(--white); border-radius: 5px; box-shadow: unset; cursor: pointer; transition: transform 0.1s; }
.noUi-horizontal .noUi-handle:before, .noUi-horizontal .noUi-handle:after { content: none; }
.noUi-horizontal .noUi-handle:hover { transform: scale(1.1); }

/* styles for filter */
.filter { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 0; }
.filter__label { position: relative; cursor: pointer; width: auto; }
.filter__label:before { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #999999; font-size: 14px; }
.fliter-range { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.filter__label:last-child .filter__input { text-align: right; }
.filter__input { height: 35px; border-radius: 5px; padding: 0 10px 0 22px; background: transparent; width: 59px; font-size: 16px; }
.filter__input:focus { background: var(--lighter-grey); }
.filter__slider-price { width: 100%; margin: 20px 5px 0; }
.filter__label:nth-child(1):before { content: "$"; }
.filter__label:nth-child(2):before { content: "$"; }
.location-map { width: 100%; border-radius: 5px; overflow: hidden; margin: 0 0 16px; }
.location-map img { width: 100%; }
.location-address { width: var(--full-width); position: relative; margin: 0 0 14px; }
.location-address span { position: absolute; top: 10px; right: 10px; }
.location-address .input-text { padding: 0 48px 0 10px; }
.aside-box:last-child { border: 0; }
.floating-button-row { display: flex; align-items: center; justify-content: space-between; }
.clear-all { font-weight: normal; font-size: 18px; line-height: 22px; color: var(--dark-grey); }
.clear-all:hover { text-decoration: underline; }
.apply-btn { float: right; height: 40px; line-height: 40px; color: var(--white); min-width: 155px; background: var(--dark-grey); }
.back-to-top { display: none; position: fixed; bottom: 40px; right: 40px; width: 64px; height: 64px; cursor: pointer; }


/*------after login --------------*/

.search-bar { width: auto; /* margin: 15px 0 0; */ padding: 0; position: relative; z-index: 2; margin: 0 0 0 30px; display: flex; align-items: center; }
.search-bar .jobs-category-field { width: auto; height: 45px; position: relative; }
.search-bar .jobs-category-field .category-search-field { width: 350px; padding: 0 12px; }
.search-bar .jobs-category-field .category-section { width: auto; margin: 0 0 0 10px; }
.search-bar .jobs-category-field .search-map { display: flex; align-items: center; font-size: 14px; font-weight: 500; padding: 0px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; position: absolute; top: 8px; right: 5px; overflow: hidden; cursor: pointer; }
.search-bar .jobs-category-field .search-map:after { position: absolute; content: ""; left: 28px; top: 0; width: 30px; height: 30px; background: url(../img/map-icon.svg) 0 center no-repeat; }
.search-bar .jobs-category-field .search-map span { opacity: 0; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; padding: 2px 0 0 0; }
.search-bar .jobs-category-field .search-map:hover span { opacity: 1; padding: 2px 0 0 28px; }
.search-bar .jobs-category-field .search-map:hover:after { left: 0px; }
.search-find-btn { height: 45px; line-height: 45px; color: var(--white); min-width: 120px; margin: 0 0 0 8px; }
.advance-search { font-weight: 500; font-size: 14px; color: var(--medium-grey-xl); margin: 0 0 0 15px; }
.advance-search:hover { color: var(--yellow); }

/* .fixed-header .header-r ul.after-login-header { margin: 10px 0 -20px; } */
.fixed-header .header-r ul.after-login-header { display: flex; align-items: center; margin: 0; }
.fixed-header .header-r ul.after-login-header li { padding: 0 0 0 0; margin: 0 30px 0 0; position: relative; }

/* .fixed-header .header-r ul.after-login-header li.links a { padding-bottom: 20px; } */
.fixed-header .header-r ul.after-login-header li ul.sub-menu { position: absolute; width: 240px; left: 0; top: 60px; padding: 10px 0; background: var(--darker-grey); border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.fixed-header .header-r ul.after-login-header li:hover ul.sub-menu { opacity: 1; visibility: visible; top: 36px; }
.fixed-header .header-r ul.after-login-header li ul.sub-menu li { width: var(--full-width); padding: 0; }
.fixed-header .header-r ul.after-login-header li ul.sub-menu li a { width: var(--full-width); font-size: 16px; font-weight: 500; color: var(--white); line-height: 35px; padding: 0 16px; }
.fixed-header .header-r ul.after-login-header li ul.sub-menu li a:hover { background: var(--dark-grey); }
.fixed-header .header-r ul.after-login-header li ul.sub-menu:after { content: " "; position: absolute; left: 20px; top: -10px; border-top: none; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid var(--darker-grey); }
.fixed-header .header-r ul.after-login-header li .tooltip { position: absolute; width: auto; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: 60px; padding: 4px 20px; background: var(--darker-grey); border-radius: 5px; opacity: 0; font-size: 16px; font-weight: 500; color: var(--white); visibility: hidden; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.fixed-header .header-r ul.after-login-header li:hover .tooltip { opacity: 1; visibility: visible; top: 38px; }
.fixed-header .header-r ul.after-login-header li .tooltip:after { content: " "; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); -webkit-transform: translateX(-50%); border-top: none; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid var(--darker-grey); }
.fixed-header .header-r ul li a.profile-icon { width: 58px; height: 58px; border: 2px solid var(--light-grey); overflow: hidden; border-radius: 50%; padding: 3px; }
.fixed-header .header-r ul li a.profile-icon img { width: 100%; height: 100%; }
.fixed-header .header-r ul li.link-profile .profile-submenu { position: absolute; width: 240px; right: 0; top: 100px; padding: 10px 0; background: var(--darker-grey); border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.fixed-header .header-r ul li.link-profile.selected .profile-submenu { opacity: 1; visibility: visible; top: 79px; }
.fixed-header .header-r ul li.link-profile .profile-submenu:after { content: " "; position: absolute; right: 20px; top: -10px; border-top: none; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid var(--darker-grey); }
.fixed-header .header-r ul li.link-profile ul { padding: 0; text-align: right; width: var(--full-width); }
.fixed-header .header-r ul li.link-profile ul li { width: var(--full-width); }
.fixed-header .header-r ul li.link-profile ul li a { width: var(--full-width); font-size: 16px; font-weight: 500; line-height: 35px; padding: 0 16px; color: var(--white); }
.fixed-header .header-r ul li.link-profile ul li a:hover { background: var(--dark-grey); }
.fixed-header .header-r ul li.link-profile ul li:last-child { margin: 35px 0 0; border-top: 1px solid var(--medium-grey-xl); }
.fixed-header .header-r ul li.link-profile .profile-info { display: flex; align-items: center; justify-content: flex-end; width: var(--full-width); padding: 10px 16px 20px; border-bottom: 1px solid var(--medium-grey-xl); }
.fixed-header .header-r ul li.link-profile .profile-info .pro-name { width: auto; margin: 0 12px 0 0; }
.fixed-header .header-r ul li.link-profile .profile-info .pro-name span { font-weight: 600; font-size: 16px; line-height: 20px; text-align: right; color: var(--white); }
.fixed-header .header-r ul li.link-profile .profile-info .pro-name p { font-weight: 300; font-size: 12px; line-height: 15px; text-align: right; color: var(--white); }
.fixed-header .header-r ul li.link-profile .profile-info .pro-imgs { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--yellow); padding: 3px; }
.fixed-header .header-r ul li.link-profile .profile-info .pro-imgs img { width: 100%; height: 100%; }
.search-result-tab .tabs { display: flex; align-items: center; margin: -66px 0 0; background: var(--light-grey); border-radius: 5px; }
.search-result-tab .tabs li { width: 50%; text-align: center; }
.search-result-tab .tabs li a { width: var(--full-width); height: 50px; font-weight: 500; font-size: 14px; line-height: 17px; text-align: center; border-radius: 5px; color: var(--dark-grey); width: 100%; display: flex; align-items: center; justify-content: center; }
.search-result-tab .tabs li.active a { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#51ad8d+0,389574+100 */
background: #51ad8d; /* Old browsers */ background: -moz-linear-gradient(top, #51ad8d 0%, #389574 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #51ad8d 0%, #389574 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #51ad8d 0%, #389574 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#51ad8d', endColorstr='#389574', GradientType=0); /* IE6-9 */ color: var(--white); font-size: 18px; font-weight: 600; }
.search-result-tab .tabContainer { padding: 20px 0 0; }
.sortby-row { width: var(--full-width); display: flex; align-items: center; justify-content: flex-end; margin: 0 0 15px; }
.sortby-btn { width: auto; position: relative; }
.sortby-icon { width: auto; background: url(../img/sortby-icon.svg) right center no-repeat; padding: 0 20px 0 0; font-size: 16px; color: var(--dark-grey); }
.sortby-list { position: absolute; width: 170px; border-radius: 5px; top: 40px; right: 0; background: var(--white); opacity: 0; visibility: hidden; }
.sortby-list li { width: var(--full-width); display: block; }
.sortby-list li a { width: var(--full-width); display: block; line-height: 35px; font-weight: normal; font-size: 14px; color: var(--black); text-align: left; padding: 0 18px; }
.sortby-list li a:hover { background: var(--light-grey); }
.sortby-btn.open .sortby-list { visibility: visible; opacity: 1; }




/*-------- employee Home -----------*/

.inner-page-content.profile-home-inner { margin: 30px 0 0 0; padding: 0; }
.inner-page-content.profile-home-inner .center { padding: 0 7%; }
.inner-page-content.profile-home-inner .search-result-page { padding: 80px 0 0; }
.welcome-profile { background-color: var(--dark-grey); width: var(--full-wifth); padding: 30px 0; margin: 92px 0 0; }
.welcome-profile .center { padding: 0 7%; }
.profile-row { display: flex; justify-content: space-between; margin: 0 0 20px; }
.profile-statements { width: 30%; background-color: var(--darkest-grey); padding: 18px; display: flex; align-items: center; border-radius: 5px; }
.profile-statements .profile-name { width: auto; text-align: left; margin: 0 0 0 22px; }
.profile-statements .profile-name h5 { font-weight: 800; font-size: 20px; line-height: 24px; color: var(--white); }
.profile-statements .profile-name p { font-weight: 500; font-size: 14px; line-height: 17px; color: var(--white); }
.profile-statements .profile-name a { font-weight: bold; font-size: 14px; line-height: 17px; color: var(--orange); }
.profile-loged { width: 15%; background-color: var(--darkest-grey); padding: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px; }
.profile-loged p { font-weight: 500; font-size: 14px; line-height: 22px; color: var(--white); text-align: center; }
.profile-loged p span { color: var(--green); }
.profile-infos { display: flex; justify-content: space-between; width: 52%; }
.profile-infos .infos-box { width: 18%; border-radius: 5px; background: linear-gradient(180deg, #FCFCFC 0%, #D1D1D1 100%); display: flex; align-items: center; justify-content: center; padding: 20px; flex-flow: column; }
.profile-infos .infos-box span { font-weight: 500; font-size: 14px; line-height: 17px; text-align: center; color: var(--darkest-grey); }
.profile-infos .infos-box h2 { font-weight: bold; font-size: 40px; line-height: 49px; text-align: center; color: var(--darkest-grey); }
.profile-methods { background-color: var(--darkest-grey); padding: 22px; display: flex; flex-flow: column; justify-content: center; align-items: center; border-radius: 5px; width: 15.5%; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.profile-methods a { font-weight: 600; font-size: 18px; line-height: 22px; text-align: center; color: var(--white); margin: 12px 0 0; }
.profile-methods:hover a { color: var(--yellow); }
.profile-methods:hover { background-color: var(--black); }
.verefication-level { background-color: var(--dark-grey); border-radius: 5px; padding: 22px; }
.verefication-level h4 { color: var(--white); width: var(--full-width); margin: 0 0 28px; }
.verefication-row { display: flex; justify-content: space-between; align-items: center; }
.verefication-row .verefication-content { width: 35%; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--white); }
.verefication-steps { width: 60%; display: flex; align-items: center; justify-content: space-between; }
.verified-steps { width: 40%; display: flex; background-color: var(--darkest-grey); border-radius: 5px; border: 2px solid var(--green); padding: 14px; }
.verified-steps .steps { position: relative; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-flow: column; border-left: 1px solid #7A7A7A; width: 33.33%; }
.verified-steps .steps:first-child { border: 0; }
.verified-steps .steps h3 { display: flex; align-items: center; color: var(--lighter-grey); }
.verified-steps .steps h3 img { margin: 0 0 0 10px; }
.verified-steps .steps span { text-align: center; font-weight: 600; font-size: 12px; line-height: 15px; color: var(--lighter-grey); }
.active-step { width: 18%; display: flex; flex-flow: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #FCFCFC 0%, #D1D1D1 100%); border-radius: 5px; padding: 25px 15px; }
.active-step h3 { display: flex; align-items: center; color: var(--dark-grey); }
.active-step span { text-align: center; font-weight: 600; font-size: 12px; line-height: 15px; color: var(--dark-grey); }
.active-step p { text-align: center; font-weight: 400; font-size: 12px; line-height: 15px; color: #545454; margin: 12px 0 -5px 0; }
.upcomming-steps { width: 40%; display: flex; background-color: var(--darkest-grey); border-radius: 5px; border: 0px solid var(--green); padding: 8px; }
.upcomming-steps .steps { position: relative; padding: 8px 0; display: flex; align-items: center; justify-content: center; flex-flow: column; border-left: 1px solid #7A7A7A; width: 33.33%; }
.upcomming-steps .steps:first-child { border: 0; }
.upcomming-steps .steps h3 { display: flex; align-items: center; color: var(--lighter-grey); }
.upcomming-steps .steps h3 img { margin: 0 0 0 10px; }
.upcomming-steps .steps span { text-align: center; font-weight: 600; font-size: 12px; line-height: 15px; color: var(--lighter-grey); padding: 0 0 8px; }
.upcomming-steps .steps p { position: absolute; bottom: 0; width: var(--full-width); text-align: center; font-weight: 400; font-size: 12px; line-height: 15px; color: #545454; }
section { width: var(--full-width); padding: 0 0 40px; }
.provide-service { position: relative; }
.provide-service h4 { font-weight: 600; margin: 0 0 16px; }
.provide-service-row { width: var(--full-width); position: relative; display: flex; justify-content: space-between; }
.provide-service-row .new-provide { width: 20%; background-color: var(--green); border-radius: 5px; display: flex; }
.provide-service-row .new-provide a { display: flex; flex-flow: column; justify-content: center; font-weight: 600; font-size: 14px; line-height: 17px; text-align: center; color: var(--white); padding: 40px; }
.provide-service-row .new-provide a span { font-weight: 600; font-size: 14px; line-height: 17px; }
.right-slider { width: 79%; }
.provide-slider { display: flex; justify-content: space-between; }
.provider-box { padding: 10px; background-color: var(--dark-grey); width: 24%; border-radius: 5px; }
.provider-box p { font-weight: 500; font-size: 14px; line-height: 17px; text-align: center; color: var(--white); width: var(--full-width); display: flex; align-items: center; justify-content: center; height: 74px; }
.provider-box .provides { display: flex; justify-content: center; align-items: center; padding: 10px 0 10px; }
.provider-box .provides img { margin: 0 10px; }
.provider-box .provides .count { width: auto; font-weight: 600; font-size: 16px; line-height: 10px; color: var(--white); }
.provider-box .provides .count span { width: var(--full-width); color: var(--white); font-size: 11px; margin: 0; }
.provider-box span.sub-text { font-weight: normal; font-size: 12px; line-height: 15px; text-align: center; color: var(--white); width: var(--full-width); /* display: block; margin: 0 0 24px; */ display: flex; align-items: center; justify-content: center; height: 60px; }
.provider-box .promotion-btn { width: var(--full-width); border-radius: 5px; border: 1px solid var(--white); line-height: 35px; font-weight: 500; font-size: 14px; text-align: center; color: var(--white); display: block; }
.provider-box .promotion-btn:hover { background-color: var(--green); }
.suggest-category-row { width: var(--full-width); }
.suggest-category-row ul { display: flex; justify-content: space-between; }
.suggest-category-row ul li { position: relative; width: 19%; border-radius: 5px; }
.suggest-category-row ul li .category-imgs { width: var(--full-width); height: var(--full-height); border-radius: 5px; overflow: hidden; position: relative; display: block; }
.suggest-category-row ul li .category-imgs img { width: var(--full-width); border-radius: 5px; display: block; }
.suggest-category-row ul li .category-imgs span.category-title { position: absolute; bottom: 0; left: 0; width: var(--full-width); padding: 12px 10px; font-weight: 600; font-size: 14px; line-height: 17px; color: var(--white); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); /* IE6-9 */ }
.suggest-category-row ul li .category-count { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 18px; line-height: 22px; color: var(--white); background-color: var(--green); border-radius: 50%; }
.employee-result h4 { font-weight: 600; margin: 0 0 -27px; }

/*---------- Employer home--*/

.favourites { position: absolute; right: 8px; top: 26px; display: flex; align-items: center; width: auto; font-weight: 600; font-size: 18px; line-height: 22px; color: var(--green); text-align: right; }
.favourites a { width: auto; margin: 0 10px; }
.profile-loged p span.yellow { color: var(--yellow); }
.start-job-bg { width: var(--full-width); background: url(../img/startjob-bg.svg) 0 0 no-repeat; height: 200px; border-radius: 5px; margin: 30px 0 0; position: relative; display: flex; align-items: flex-start; flex-flow: column; justify-content: center; padding: 0 0 0 28%; overflow: hidden; }
.start-job-bg h2 { font-size: 34px; line-height: 41px; font-weight: 700; color: var(--dark-grey); margin: 0 0 16px; text-align: left; }
.start-job-bg p { font-weight: 400; font-size: 16px; line-height: 24px; text-align: left; width: 50%; }
.hand-img { position: absolute; left: 15%; bottom: 0; width: 200px; }
.startjob-bttn { font-weight: 600; font-size: 20px; text-align: center; color: var(--white); border-radius: 5px; background-color: var(--dark-grey); height: 66px; line-height: 66px; min-width: 259px; position: absolute; right: 65px; }
.startjob-bttn:hover { background-color: var(--green); }

.employer-result-page { width: var(--full-width); }
.results-row { width: var(--full-width); margin: 0 0 32px; position: relative; }
.results-row ul li:nth-child(even) { background-color: var(--light-grey); }
.results-row ul li { margin: 15px 0; }
.results-row h4 { margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; }
.results-row h4 a { font-weight: normal; font-size: 16px; line-height: 20px; color: var(--dark-grey); }
.create-results-box  { width: var(--full-width); background-color: var(--light-grey); border-radius: 5px; padding: 30px; display: flex; align-items: center; justify-content: center; flex-flow: column; }
.create-results-box p { font-weight: 500; font-size: 20px; line-height: 24px; margin: 0 0 24px; text-align: center; }
.create-post-bttn { min-width: 258px; height: 66px; line-height: 66px; background-color: var(--light-orange); font-weight: 600; font-size: 20px; text-align: center; border-radius: 5px; color: var(--white); cursor: pointer; }
.create-post-bttn:hover { background-color: var(--yellow); color: var(--dark-grey); }
.suggest-profile-row { display: flex; justify-content: space-between; flex-wrap: wrap; }
.suggest-profile-box { width: 14%; margin: 0 0 10px; padding: 18px 22px; border-radius: 5px; cursor: pointer; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.suggest-profile-box:hover { background-color: var(--light-grey); }
.suggest-profile-box:hover .suggest-img { border-color: var(--white); }
.suggest-profile-box .suggest-img { width: 155px; height: 155px; border-radius: 50%; overflow: hidden; border: 2px solid var(--light-grey); position: relative; padding: 3px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.suggest-profile-box .suggest-img img { width: 100%; height: 100%; position: relative; z-index: 5; }
.sugg-pro-info { display: flex; flex-flow: column; align-items: center; margin: 10px 0 0; }
.sugg-pro-info h6 { font-weight: 600; font-size: 22px; line-height: 27px; text-align: center; margin: 0 0 8px; }
.sugg-pro-info span { font-weight: 600; font-size: 15px; line-height: 18px; text-align: center; margin: 0 0 8px; }
.sugg-pro-info p { font-weight: 400; font-size: 16px; line-height: 20px; text-align: center; margin: 0 0 5px; }

.verification-round { position: absolute; top: 0%; right: 0px; width: 50%; height: 50%; background: var(--green); }
.inner-footer { width: var(--full-width); background-color: var(--dark-grey); padding: 45px;}
.inner-page-content.profile-home-inner.employer-home { margin: 0; }
/* .employer-home .sortby-row { margin: -25px 0 15px; } */
.employer-home .result-list li .button-row { width: calc(100% - 41%); position: absolute; right: 20px; }
.results-row h4 a.advnce-search { display: flex; align-items: center; }
.results-row h4 a.advnce-search img { margin: 0 0 0 14px; }

footer.inner-footer .center { display: flex; align-items: flex-start; justify-content: space-between; }
.footer-block { width: 15%; }
.footer-block h5 { color: var(--orange); margin: 0 0 18px; text-transform: uppercase; }
.footer-block ul { padding: 0; width: var(--full-width); }
.footer-block ul li { padding: 0; width: var(--full-width); padding: 0; }
.footer-block ul li a:after { display: none; }
.footer-block ul li a { font-size: 14px; font-weight: 500; color: var(--white); padding: 0; }
.footer-block ul li a span { color: rgba(255, 255, 255, 0.3); }
.footer-block ul li.others-link a { color: var(--orange); }
.footer-block ul li a:hover { color: var(--green); }
.footer-block label { font-weight: 500; font-size: 14px; line-height: 32px; color: var(--white); margin: 0 0 12px; display: block; }
.footer-block p { display: flex; align-items: flex-start; line-height: 1; font-weight: 500; font-size: 14px; color: var(--white); margin: 0 0 20px; }
.footer-block p.address { line-height: 25px; }
.footer-block p img { margin: 0 10px 0 0; }
.footer-block p a { color: var(--white); }
.footer-block p a:hover { color: var(--green); }
.footer-block:first-child { width: 30%; }
.footer-block:last-child { width: 20%; }
footer.inner-footer .center.bottom-footer { border-top: 1px solid #5C5C5C; align-items: center; padding: 30px 0 0; justify-content: space-between; margin: 25px auto 0; }
footer.inner-footer .center.bottom-footer p { font-size: 14px; font-weight: 500; color: var(--white); width: auto; margin: 0; }
.results-row .result-list li { color: var(--dark-grey); background-color: var(--light-grey); }
.results-row .result-list li h3 { color: var(--darkl-grey); }

/*-------------employee-result ------------*/

.result-employee .result-employee-infos { display: flex; flex-flow: column; margin: 0 0 0 10px; }
.result-employee .result-employee-infos .inner-infos { display: flex; align-items: center; justify-content: center; margin: 0 0 0 0; }
.result-employee .result-employee-infos span.pro-name { font-weight: 600; font-size: 20px; line-height: 24px; margin: 0 0 8px; }
.result-employee .result-employee-infos .inner-infos .profile-info { margin: 0 30px 0 0; }
.result-employee .bottom-row { margin: 0 0 22px; }
.result-employee .button-row { position: absolute; right: 20px; }
.result-list.result-employee li .rate-addres { margin: 0 0 10px; }
.about-me { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.about-me ul { display: flex; align-items: center; justify-content: space-between; }
.about-me ul li { width: auto; margin: 0 0 0 8px; padding: 0 8px; border-radius: 5px; height: 35px; line-height: 35px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 14px; background-color: var(--black); }
.about-me ul li.selected { border: 1px solid var(--white); }
.about-me ul li img { margin: 0 6px 0 0; }
.about-me ul li img.batch { margin: 0 0 0 14px; }
.about-me ul li label { font-size: 20px; font-weight: 600; color: var(--white); }
.about-me ul li span { font-size: 13px; color: var(--white); }
.about-me ul li.category-more:hover { background-color: var(--green); }

/* .aside-map { position: sticky; top: 0; } */
#sidebar { width: 100%; float: left; }

.jobs-icon .changed-search { position: absolute; left: -10px; top: 50px; background-color: var(--white); padding: 12px; border-radius: 5px; width: 200px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; }
.jobs-icon .changed-search img { margin: 0 10px 0 0; }
.jobs-icon .changed-search a { display: flex; align-items: center;  font-weight: 500; font-size: 14px; line-height: 17px; color: var(--dark-grey); }
.jobs-icon.changed .changed-search { opacity: 1; visibility: visible; top: 40px }


/*---------profile employee ----------------*/

.inner-page-content.employee-profile .center { padding: 30px 7% 0; }
.employee-profile-inner { display: flex; justify-content: space-between; width: var(--full-width); }
aside.profile-aside { background-color: var(--dark-grey); padding: 25px 16px; width: 30%; border-radius: 5px 5px 0 0; }
.employee-profile-inner .main-inner.profile-main { width: 69%; }
.employee-green { background-color: var(--green); color: var(--white); }
.employer-yellow { background-color: var(--yellow); color: var(--dark-grey); }
.about-info { border-radius: 5px; padding: 0; width: var(--full-width); margin: 0 0 16px; overflow: hidden; position: relative; }
.headings { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.headings-l { font-weight: 500; font-size: 14px; display: flex; align-items: center; }
.headings-l img { margin: 0 6px 0 0; }
.headings-r { font-weight: bold; font-size: 30px; }
.languages-list { width: var(--full-width); margin: 0 0 15px; padding: 0 18px; }
.languages-list ul li { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.languages-list ul li span.langs { font-weight: 600; font-size: 16px; width: 23%; }
.languages-list ul li span.level { font-weight: 400; font-size: 16px; width: 27%; }
.languages-list ul li span.level-bar { font-weight: 400; font-size: 16px; width: 35%; padding: 0; position: relative; background-color: var(--dark-green); height: 8px; border-radius: 5px; overflow: hidden; }
.languages-list ul li span.level-bar .process-bar { background-color: var(--white); height: 100%; position: absolute; left: 0; top: 0; border-radius: 5px; }
.education-list { width: var(--full-width); margin: 0 0 15px; }
.education-list label { font-weight: normal; font-size: 12px; line-height: 15px; color: var(--light-green); }
.education-list p { font-weight: 600; font-size: 16px; line-height: 20px; }
.education-list span { font-weight: normal; font-size: 14px; line-height: 17px; }
.about-toggle { padding: 0 18px 0; }
.about-toggle.show-more-height { padding: 0 18px 45px; }

/* .show-more-height { height: 170px; overflow: hidden; } */
.about-info .more { background: #3A886D url(../img/more-arrow-w.svg) 58% 18px no-repeat; display: flex; align-items: center; justify-content: center; line-height: 40px; font-weight: 500; font-size: 14px; cursor: pointer; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; position: absolute; bottom: 0; left: 0; width: var(--full-width); color: var(--white); }
.about-info .more img { margin: 0 5px; }
.about-info .more:hover { background-color: var(--dark-green); }
.involved-category .suggest-category-row { width: 78%; }
.involved-category .suggest-category-row ul { justify-content: flex-start; }
.involved-category .suggest-category-row ul li { margin: 0 0 0 20px; width: 24%; }
.involved-category .suggest-category-row ul li:first-child { margin: 0; }
.involved-category .suggest-category-row ul li .category-box { margin: 0; width: 100%; }
.about-description { background-color: var(--light-grey); padding: 16px; border-radius: 5px; }
.about-description p { font-size: 16px; font-weight: 400; line-height: 24px; }
.about-description .more, .about-description .less { color: var(--orange); text-decoration: none; font-weight: 600; font-size: 16px; text-transform: uppercase; padding: 0 5px; }

.profile-button-row { display: flex; align-items: center; justify-content: space-between; background-color: var(--light-grey); border-radius: 5px; padding: 15px; margin: 0 0 40px; }
.profile-button-row .profile-button-left { width: auto; }
.profile-button-row .profile-button-right { width: auto; }
.profile-button-row .profile-button-left .bttn { font-size: 18px; color: var(--white); font-weight: 500; text-transform: none; height: 50px; line-height: 50px; padding: 0 12px; min-width: auto; margin: 0 10px 0 0; }
.profile-button-row .profile-button-left .bttn span { display: flex; align-items: center; justify-content: center; }
.profile-button-row .profile-button-left .bttn span img { margin: 0 0 0 8px; }
.profile-button-row .profile-button-right .bttn.promote-btn { font-size: 18px; color: var(--dark-grey); font-weight: 500; text-transform: none; height: 50px; line-height: 50px; padding: 0 12px; min-width: auto; margin: 0 10px 0 0; }
.profile-button-row .profile-button-right .bttn.edit-btn { font-size: 18px; color: var(--white); font-weight: 500; text-transform: none; height: 50px; line-height: 50px; padding: 0 12px; min-width: auto; margin: 0 10px 0 0; background-color: var(--dark-grey); }
.profile-button-row .profile-button-right .bttn.edit-btn:hover { background-color: var(--black); }

.promotions-btns { width: auto; }
.promotions-btns .bttn.promote-btn { font-size: 14px; color: var(--dark-grey); font-weight: 500; text-transform: none; height: 40px; line-height: 40px; padding: 0 12px; min-width: auto; margin: 0 10px 0 0; }
.promotions-btns .bttn.promote-btn img { width: 16px; }
.promotions-link { font-weight: 500; font-size: 14px; color: var(--dark-grey); margin: 0 10px 0 0; }
.involved-row h4 { display: flex; align-content: center; justify-content: space-between; }

.profile-information { display: flex; align-items: center; color: var(--white); }
.profile-information .prof-img { width: 130px; height: 130px; padding: 5px; border-radius: 50%; border: 4px solid rgb(236, 237, 239, 0.4); margin: 0 18px 0 0; }
.profile-information .prof-img img { border-radius: 50%; width: 100%; height: 100%; }
.profile-information .prof-basic-info { width: auto; }
.profile-information .prof-basic-info h5 { font-weight: 800; font-size: 20px; line-height: 24px; margin: 0 0 10px; }
.profile-information .prof-basic-info p { display: flex; align-items: center; font-weight: 500; font-size: 14px; line-height: 17px; margin: 0 0 8px; }
.profile-information .prof-basic-info p img { margin: 0 5px 0 0; }
.profile-map { border: 0; margin: 0 0 40px; }
.profile-map img { width: 100%; display: block; }
.profile-map .map-link-btn { color: var(--white); min-width: 100%; width: var(--full-width); height: 45px; line-height: 45px; }
.profile-map .map-link-btn span { display: flex; align-items: center; justify-content: center; }
.profile-map img { display: initial; width: auto; margin: 0 0 0 10px; }

.employer-profile .education-list label { color: var(--dark-yellow); }
.employer-profile .about-info .more { background: var(--light-yellow) url(../img/more-arrow-b.svg) 58% 18px no-repeat; color: var(--dark-grey); }
.employer-profile .languages-list ul li span.level-bar { background-color: var(--medium-yellow); }
.employer-profile .languages-list ul li span.level-bar .process-bar { background-color: var(--dark-grey); }
.employer-profile .provide-service-row .new-provide { background-color: var(--yellow); }
.employer-profile .provide-service-row .new-provide a { color: var(--dark-grey); }
.profile-start-job .hand-img { left: 5%; }
.profile-start-job .start-job-bg { padding: 0 0 0 25%; }
.profile-start-job .start-job-bg h2 { font-size: 26px; }
.profile-start-job .start-job-bg p { font-weight: 500; }
.profile-start-job .startjob-bttn { line-height: 1; width: 150px; right: 50px; display: flex; align-items: center; justify-content: center; padding: 0 15px; min-width: auto; }