@charset "UTF-8";

:root {
	--br10: 10px;
	--color-main: #2A3C4A;
	--color-dop: #74808c;
}

html {
	height: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}

.transition-fade {
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;
	opacity: 1;
}

html.is-animating .transition-fade {
	opacity: 0;
	-webkit-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform: translateY(100px);
}

*,
:before,
:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::-webkit-input-placeholder {
	color: var(--color-dop);
}

#input_mileage::-webkit-input-placeholder {
	color: var(--color-dop);
}

::-moz-placeholder {
	color: var(--color-dop);
	opacity: 1;
}

:-ms-input-placeholder {
	color: var(--color-dop)8 !important;
}

:focus::-webkit-input-placeholder {
	color: transparent
}

:focus::-moz-placeholder {
	color: transparent
}

:focus:-moz-placeholder {
	color: transparent
}

:focus:-ms-input-placeholder {
	color: transparent
}

body {
	font: 16px/1.4rem Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: var(--color-main);
	letter-spacing: .5px;
	padding: 0;
	margin: 0;
	min-width: 320px;
	height: 100%;
	/*! overflow-X: hidden; */
}

h1,
h2,
h3,
h4 {
	font: 100%/1.8rem Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	display: inline-block;
	color: var(--color-main);
	letter-spacing: 1px;
	line-height: 1.2;
}

h1 {
	margin: .5em 0;
	font-size: calc(26px + 10 * ((100vw - 320px) / 960));
}

h2 {
	font-size: 1.3rem;
	margin: 0.4em 0;
}

h3 {
	font-size: 1.1rem;
	margin: 0.7em 0;
}

h4 {
	font-size: 1rem;
	margin: 0.7em 0;
}

p {
	font-size: 1rem;
	line-height: 1.8;
}

a {
	background-color: transparent;
	display: inline-block;
	color: var(--color-main);
	text-decoration: none;
	-webkit-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

.icon {
	display: inline-block;
	position: relative;
	height: 20px;
	width: 20px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

ul {
	list-style: none;
	display: inline-block;
}

img {
	position: relative;
	width: 100%;
}

input,
textarea {
	border: medium none;
	border-radius: 10px;
	padding: 10px;
	font-size: 0.9rem;
}

.form-input select {
	outline: none;
	width: 100%;
	-webkit-appearance: none;
	resize: vertical;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

button {
	border-radius: 10px;
	border: none;
	display: inline-block;
	padding: 5px 10px;
}

.di,
span {
	display: inline-block;
}

.db {
	display: block;
}

.dn {
	display: none;
}

.pa {
	position: absolute;
}

.pr {
	position: relative;
}

.tc {
	text-align: center;
}

.cp {
	cursor: pointer;
}

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.j-st {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.j-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.jc {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.ja {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.jb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.je {
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}

.as {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.ac {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.ae {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

/* END ClleoWeb =============================================== */

/* Content */
body {
	background: #fff;
}

body.fixed_body {
	min-height: 100%;
	overflow: hidden;
}

.main-page {
	padding: 60px 0 0
}

.content-wrap {
	width: 100%;
	margin: 0 auto;
	min-width: 320px;
	max-width: 1400px;
	padding: 0 20px;
}

.header {
	background: rgba(0, 0, 0, 0.9);
	position: fixed;
	width: 100%;
	z-index: 2;
}

.header:after {
	content: "";
	background: rgba(13, 17, 21, 0.76);
	position: absolute;
	top: 0;
	height: 100vh;
	width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
}

.header.header-fixed {
	height: auto
}

.fixed_body .header:after {
	opacity: 1;
	visibility: visible;
}

.header-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative;
	padding: 20px 20px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.header-content .logo-wrap {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	max-width: 270px;
}

.header-content .logo-wrap .main-logo {
	position: relative;
	width: 140px;
	height: 40px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	z-index: 1;
}

.header-content .logo-wrap .main-logo svg {
	width: 100%;
	height: 100%;
	fill: #fff;
}

.header-content .top-nav {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 25px;
}

.header-content .top-nav .top-nav--item {
	display: inline-block;
	position: relative;
	padding: 10px 15px;
	font-size: 0.85rem;
	font-weight: bold;
	color: #aaa;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.header-content .top-nav .top-nav--item:hover {
	color: #fff;
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
}

.header-content .top-element {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 70px;
	flex: 0 0 70px;
	position: relative;
	top: -9px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.header-content .top-element .i-autoprofe_2020 {
	position: absolute;
	width: 70px;
	height: 150px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.header-fixed .header-content {
	padding: 12px 20px 10px;
}

.header-fixed .logo-wrap .main-logo {
	height: 28px;
}

.header-fixed .left-bar--open-btn {
	top: 1px;
}

.header-fixed .top-nav .top-nav--item {
	padding: 5px 15px;
}

.header-fixed .top-element {
	top: -8px;
}

/* Scroll Animation */
.anim_items {
	transform: translate(0, 20%);
	opacity: 0;
	transition: 0.8s ease-in-out 0s;
}

.anim_items.anim_top {
	transform: translate(0, -20%);
}

.anim_items.anim_bottom {
	transform: translate(0, 20%);
}

.anim_items.anim_left {
	transform: translate(-20%, 0);
}

.anim_items.anim_right {
	transform: translate(20%, 0);
}

.anim_items.animation {
	opacity: 1;
	transform: translate(0, 0);
}

/* END Scroll Animation */


/* Left bar */
.left-bar--open-btn {
	display: block;
	position: relative;
	padding: 2px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	top: 5px;
	left: 0;
	width: 40px;
	cursor: pointer;
	z-index: 1;
}

.left-bar--open-btn span {
	background: #a2a5a8;
	border-radius: 10px;
	display: block;
	position: relative;
	height: 4px;
	margin-bottom: 6px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
}

.left-bar--open-btn .m-1 {
	width: 50%;
}

.left-bar--open-btn .m-2 {
	width: 100%;
}

.left-bar--open-btn .m-3 {
	width: 80%;
}

.left-bar--open-btn:hover .m-1 {
	width: 100%;
}

.left-bar--open-btn:hover .m-2 {
	width: 55%;
}

.left-bar--open-btn:hover .m-3 {
	width: 65%;
}

.left-bar {
	background: rgba(11, 14, 17, 0.96);
	position: fixed;
	padding: 10px 15px 50px 30px;
	top: 0;
	height: 100vh;
	width: 420px;
	left: -1px;
	opacity: 0;
	overflow: hidden;
	-webkit-transform: translateX(-105%);
	-ms-transform: translateX(-105%);
	transform: translateX(-105%);
	-webkit-transition: opacity 0.5s, -webkit-transform 0.6s;
	transition: opacity 0.5s, -webkit-transform 0.6s;
	-o-transition: transform 0.6s, opacity 0.5s;
	transition: transform 0.6s, opacity 0.5s;
	transition: transform 0.6s, opacity 0.5s, -webkit-transform 0.6s;
	pointer-events: none;
	z-index: 102;
}

.left-bar.opened {
	pointer-events: auto;
	opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.left-bar--header {
	margin-bottom: 20px;
}

.left-bar--header .left-bar--logo {
	position: relative;
	top: 10px;
	width: 150px;
	height: 50px;
}

.left-bar--header .i-close-wrap {
	position: absolute;
	padding: 2px;
	right: 15px;
	top: 15px;
	width: 35px;
	height: 35px;
	z-index: -1;
	opacity: 0;
	cursor: pointer;
	transform: translateY(-100%) rotate(120deg);
	transition: transform 0.25s ease-out 0.6s, opacity 0.25s ease-out 0.6s, background .2s, rotate .3s;
}

.left-bar--header .i-close-wrap .i-close {
	fill: #fff;
	width: 100%;
	height: 100%;
}

.opened .left-bar--header .i-close-wrap {
	opacity: 1;
	transform: translate(0);
}

.opened .left-bar--header .i-close-wrap:hover {
	transform: rotate(45deg);
}

.left-bar-scroll {
	overflow-x: auto;
	max-height: 100vh;
	margin-right: -32px;
	-ms-overflow-style: none;
	scrollbar-width: none;

}

.left-bar-links {
	padding: 50px 6px;
}

.left-bar-links .left-bar--link {
	display: block;
	position: relative;
	margin: 0 0 45px;
	left: 0;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
	color: #a2a5a8;
	cursor: pointer;
	white-space: nowrap;
	opacity: 0;
	-webkit-transform: translateX(-20vw);
	-ms-transform: translateX(-20vw);
	transform: translateX(-20vw);
	-webkit-transition: opacity 0.5s ease 0.1s, left 0.3s ease 0s, color 0.3s ease 0s, -webkit-transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
	transition: opacity 0.5s ease 0.1s, left 0.3s ease 0s, color 0.3s ease 0s, -webkit-transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
	-o-transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s, opacity 0.5s ease 0.1s, left 0.3s ease 0s, color 0.3s ease 0s;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s, opacity 0.5s ease 0.1s, left 0.3s ease 0s, color 0.3s ease 0s;
	transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s, opacity 0.5s ease 0.1s, left 0.3s ease 0s, color 0.3s ease 0s, -webkit-transform 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
}

.left-bar-links .left-bar--link.active {
	color: #fff;
}

.left-bar-links .left-bar--link:after {
	content: "";
	background: #fc0b39;
	border-radius: 2px;
	position: absolute;
	left: -10px;
	bottom: 0;
	height: 0;
	opacity: 0;
	width: 2px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.opened .left-bar-links .left-bar--link:hover {
	left: 5px;
	color: #fff;
	-webkit-transition-delay: 0s !important;
	-o-transition-delay: 0s !important;
	transition-delay: 0s !important;
}

.opened .left-bar-links .left-bar--link:hover:after {
	opacity: 1;
	height: 95%;
}

.opened .left-bar-links .left-bar--link {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

.opened .left-bar-links .left-bar--link:nth-child(2) {
	-webkit-transition-delay: 0.18s;
	-o-transition-delay: 0.18s;
	transition-delay: 0.18s;
}

.opened .left-bar-links .left-bar--link:nth-child(3) {
	-webkit-transition-delay: 0.24s;
	-o-transition-delay: 0.24s;
	transition-delay: 0.24s;
}

.opened .left-bar-links .left-bar--link:nth-child(4) {
	-webkit-transition-delay: 0.32s;
	-o-transition-delay: 0.32s;
	transition-delay: 0.32s;
}

.opened .left-bar-links .left-bar--link:nth-child(5) {
	-webkit-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.opened .left-bar-links .left-bar--link:nth-child(6) {
	-webkit-transition-delay: 0.48s;
	-o-transition-delay: 0.48s;
	transition-delay: 0.48s;
}

.opened .left-bar-links .left-bar--link:nth-child(7) {
	-webkit-transition-delay: 0.56s;
	-o-transition-delay: 0.56s;
	transition-delay: 0.56s;
}

.left-bar-cotacts {
	padding: 20px 6px;
}

.left-bar-cotacts .lb-cotacts--title {
	color: #656f79;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0 0 20px;
}

.left-bar-cotacts .lb-cotacts--info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	position: relative;
	padding: 10px 0;
	color: #a2a5a8;
}

.left-bar-cotacts .lb-cotacts--info svg {
	width: 22px;
	height: 22px;
	margin-right: 10px;
	fill: #656f79;
}

.left-bar-cotacts .lb-cotacts--info a {
	color: #a2a5a8;
}

.left-bar-cotacts .lb-cotacts--info:last-child {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: 20px;
	padding: 0 0 250px;
}

/* END Left bar */

/*** Main section One ***/
.section-content {
	padding: 10vh 20px;
}

.section-title {
	margin: 0 0 80px;
	text-align: center;
}

.main-section-one {
	background: url(/project/autoprofe/images/main-bg-big__load.jpg) no-repeat 50% 0/100% #2e2d33;
	background-size: cover;
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.main-section-one.visible_img {
	background-image: url(/project/autoprofe/images/main-bg-big.jpg);
}

.main-section-one:after {
	content: "";
	display: block;
	padding-top: 100vh;
}

.section-one--content {
	position: relative;
	top: 100px;
}

.section-one--text {
	display: inline-block;
	position: relative;
	left: 3%;
	top: 14vh;
}

.section-one--title {
	display: block;
	font-size: calc(30px + 6 * ((100vw - 320px) / 960));
	font-weight: bold;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 20px;
	max-width: 730px
}

.section-one--descript {
	margin-bottom: 40px;
	max-width: 500px;
	font-size: calc(18px + 4 * ((100vw - 320px) / 960));
	font-weight: bold;
	line-height: 1.5;
	color: #aaa;
}

.section-one--btn.btn {
	background: #206ca4;
	position: relative;
	max-width: 180px;
}

/*** END Main section One ***/

/*** Main section Cars ***/
.main-page--section-cars {
	15px 25px 25pxbackground: #f5f5f5;
	overflow: hidden;
	position: relative;
}

.section-cars--content {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
	position: relative;
}

.section-cars--left {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 70%;
	flex: 0 1 70%;
	position: relative;
}

.section-cars--left .section-cars--left-info {
	background: url(/project/autoprofe/images/section-two-car-big__load.jpg) no-repeat 0 100%/100%;
}

.section-cars--left .section-cars--left-info.visible_img {
	background-image: url(/project/autoprofe/images/section-two-car-big.jpg);
}

.section-cars--left .section-cars--left-info:after {
	content: "";
	display: block;
	padding-top: 48%;
}

.section-cars--left .section-cars--left-info {
	position: relative;
}

.section-cars--title h1 {
	max-width: 570px;
	line-height: 1.1;
}

.section-cars--title h2 {
	max-width: 500px;
	margin: 0 0 50px;
	font-size: calc(16px + 6 * ((100vw - 320px) / 960));
	font-weight: bold;
	line-height: 1.3;
	color: var(--color-dop);
}

.section-cars--left .section-cars--left-element {
	position: relative;
	width: 100%;
	max-width: 320px;
	line-height: 1.2;
	left: 15%;
	top: 100%;
	font-size: 1.6rem;
	font-weight: bold;
}

.section-cars--left .section-cars--left-element:before {
	content: "";
	background: url("/icon/line_45_right.svg") no-repeat 0 0/100%;
	display: block;
	position: absolute;
	bottom: 100%;
	left: -15%;
	width: 90px;
	height: 40px;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	z-index: 1;
}

.section-cars--right {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 20%;
	flex: 0 1 20%;
	padding: 10px 0 0;
}

.car-example-name {
	padding: 0 0 30px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
}

.car-example {
	position: relative;
	padding: 10px;
	max-width: 270px;
	margin: 0 0 15px;
	text-align: center;
	transition: .3s
}

.car-example:hover {
	transform: scale(1.05);
}

.car-example:before {
	content: "";
	background: #fff;
	border-radius: 10px;
	position: absolute;
	display: block;
	width: 95%;
	height: 90%;
	top: 10%;
	z-index: -1;
}

.car-example .car-example--icon {
	width: 95%;
	max-width: 160px;
	position: relative;
}

.car-example .car-example--title {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	max-width: 80%;
	margin: 0 auto;
}

/*** END Main section Two ***/

/*** Section Text ***/
.section-text {
	background: #f7f7f7;
}

.section-text--content {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
	overflow: hidden;
}

.section-text--content:after {
	content: "";
	background: rgba(0, 0, 0, 0.9);
	border-radius: 0 0 15px 15px;
	position: absolute;
	right: 14px;
	top: 0;
	width: 20px;
	height: 40%;
}

.section-text--left-img {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 400px;
	flex: 0 1 400px;
	background: #eee;
	background-size: cover;
	border-radius: 10px;
	position: -webkit-sticky;
	position: sticky;
	overflow: hidden;
	top: 100px;
	line-height: 0;
}

.section-text--left-img.visible_img {
	background: url(/project/autoprofe/images/main-text-big.jpg) no-repeat 0 0/100%;
}

.section-text--left-img:after {
	content: "";
	display: block;
	padding-top: 150%;
}

.preload-img.visible_img:after {
	opacity: 0;
}

.section-text--right-text {
	-webkit-box-flex: 0;
	-ms-flex: 0 2 650px;
	flex: 0 2 650px;
	position: relative;
	padding: 0 3% 0 5%;
}

.section-text--right-text h1 {
	font-size: calc(20px + 14 * ((100vw - 320px) / 960));
	font-weight: bold;
	line-height: 1.2;
	margin: 0 0 1em;
}

.section-text--right-text p {
	font-size: calc(15px + 3 * ((100vw - 320px) / 960));
	line-height: 1.5;
	margin-bottom: 15px;
}

.section-text--right-btn {
	position: relative;
	padding: 20px 0 0;
	text-align: right;
}

.section-text--right-btn:before {
	content: "";
	background: url("/icon/line_45_right.svg") no-repeat 0 0/100%;
	display: inline-block;
	position: relative;
	top: -20px;
	right: 5%;
	width: 115px;
	height: 45px;
	vertical-align: middle;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	z-index: 1;
}

.section-text--right-btn .btn {
	display: inline-block;
}

/*** END Section text ***/

/*** Section form ***/
.section-form {
	background: #fff;
	position: relative;
	overflow: hidden;
}

.section-form--wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.form-title h2 {
	font-size: calc(24px + 14 * ((100vw - 320px) / 960));
	font-weight: bold;
}

.form-title p {
	font-size: 1rem;
	color: var(--color-dop);
}

.form-left {
	background: #fff;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 30%;
	flex: 0 1 30%;
	max-width: 360px;
	min-width: 300px;
	padding: 0 15px 0 0;
	z-index: 1;
}

.form-input--wrap {
	position: relative;
	margin: 0 0 20px;
	align-items: flex-start;
}

.form-input--wrap:after {
	content: "";
	background: url(/project/autoprofe/icon/form-elements.svg) no-repeat 50% 30%/100%;
	position: absolute;
	width: 50px;
	height: 17px;
	top: 50%;
}

.form-input {
	background: #f5f5f5;
	border: 1px solid #f5f5f5;
	border-radius: 10px;
	position: relative;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	font-size: .9rem;
	font-weight: bold;
}

.form-input.need:before {
	content: "*";
	position: absolute;
	font-size: 16px;
	color: #ff4d45;
	top: 3px;
	left: 5px;
}

.form-input.open:after {
	content: '';
	border-top: 2px solid #24394B;
	border-right: 2px solid #24394B;
	border-radius: 0 2px 0 0;
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	transform: rotate(135deg);
	top: calc(50% - 6px);
	right: 10px;
}

.form-input:hover,
.form-input:focus {
	border: 1px solid #333;
}

.form-input select,
.form-input input,
.form-input textarea {
	background: #f5f5f5;
	border-radius: 10px;
	border: 0;
	padding: 18px 10px;
	width: 100%;
	font-weight: bold;
	outline: none;
	line-height: 1.2;
	letter-spacing: .5px;
	-webkit-appearance: none;
}

.form-input select,
.form-input input {
	padding: 21px 10px;
}

.form-input-2 {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.form-input-2 .form-input {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 48%;
	flex: 0 1 48%
}

.form-input-2 .form-input:nth-child(1) {
	margin-right: 15px;
}

.form-input.err {
	border: 1px solid #ff5b5b;
}

.form-input.succ {
	border: 1px solid #2eb03f;
}

.chosen-container {
	width: 100% !important;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.chosen-select {}

.chosen-container .chosen-drop {
	background: #e3e3e3;
	position: absolute;
	top: 85%;
	left: -6px;
	width: calc(100% + 12px);
	border-top: 0;
	-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
	max-height: 0px;
	overflow: hidden;
	z-index: 2;
}

.chosen-container.chosen-with-drop .chosen-drop {
	max-height: 999px;
}

.chosen-container .chosen-results {
	position: relative;
	padding: 6px;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 260px;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
	line-height: 2;
	padding: 4px 8px;
	border-radius: 8px;
}

.chosen-container .chosen-results li.highlighted {
	background-color: #3875d7;
	color: #fff;
}

.chosen-container .chosen-results a {
	cursor: pointer;
}

.chosen-container-single .chosen-single {
	position: relative;
	display: block;
	padding: 19px 10px;
	overflow: hidden;
	white-space: nowrap;
	color: #24394B;
}

.chosen-container-single span {
	display: block;
	overflow: hidden;
	margin-right: 20px;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chosen-container-single .chosen-default.chosen-single span,
.chosen-container.chosen-container-single .chosen-single span {
	color: var(--color-main);
}

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

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

.chosen-search {
	position: relative;
	margin: 5px 0 10px;
	padding: 3px 4px;
	white-space: nowrap;
}

.no-sirch .chosen-search {
	display: none;
}

.chosen-search input[type=text] {
	background: url(..//icon/search.svg) no-repeat 98% 50%/20px #fff;
	border: 1px solid #aaa;
	border-radius: 8px;
	padding: 12px 20px 12px 5px;
	width: 100%;
	height: auto;
	outline: 0;
	font-size: 1em;
	font-family: sans-serif;
	line-height: normal;
}

.chosen-single abbr {
	position: absolute;
	top: 6px;
	right: 26px;
	display: block;
	width: 12px;
	height: 12px;
	background: url("chosen-sprite.png") -42px 1px no-repeat;
	font-size: 1px;
}

.chosen-single abbr:hover,
.chosen-disabled .chosen-single abbr:hover {
	background-position: -42px -10px;
}

.chosen-container-single-nosearch .chosen-search {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	-webkit-clip-path: inset(100% 100%);
	clip-path: inset(100% 100%);
}

.chosen-container-single .chosen-drop {
	margin: -1px -2px 0;
	border-radius: 10px;
	background-clip: padding-box;
}

.upload-photo svg {
	position: absolute;
	width: 25px;
	height: 25px;
	right: 12px;
	top: 18px;
	z-index: 1;
}

.form--center {
	background: url(/project/autoprofe/images/form-car-big__load.jpg) no-repeat 50% 50%/90%;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 25%;
	flex: 0 1 25%;
	max-width: 320px;
	min-width: 280px;
}

.form--center.visible_img {
	background-image: url(/project/autoprofe/images/form-car-big.jpg);
}

.form--center:after {
	content: "";
	display: block;
	padding-top: 170%;
}

.form--center .center-element {
	position: absolute;
	display: none;
}

.form--right {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 30%;
	flex: 0 1 30%;
	max-width: 360px;
	min-width: 300px;
	padding: 0 10px 0 0;
}

.btn-send--wrap {
	position: relative;

}

.send-form--btn {
	border: 1px solid #0e1921;
	margin: 35px 0 15px;
	width: 100%;
}

.btn-send--wrap .tip-err {
	background: #fe6468;
	border-radius: 8px;
	position: absolute;
	padding: 3px 15px;
	width: 70%;
	left: 50%;
	opacity: 0;
	color: #fff;
	visibility: hidden;
	font-size: .8rem;
	text-align: center;
	line-height: 1.3;
	-webkit-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
	top: -50px;
	-webkit-transition: opacity .3s ease-in-out .05s, top .4s ease-in-out 0s;
	-o-transition: opacity .3s ease-in-out .05s, top .4s ease-in-out 0s;
	transition: opacity .3s ease-in-out .05s, top .4s ease-in-out 0s;
}

.btn-send--wrap.err .tip-err {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
	top: -30px;
}

.form--right .sign-info {
	padding: 0 6px;
	font-size: 0.8rem;
	color: #999;
	line-height: 1.4;
}

.left-input-top:after {
	right: -60px;
}

.left-input-center:after {
	background-position: 50% 120%;
	right: -60px;
}

.left-input-bottom:after {
	background-position: 50% -1%;
	right: -60px;
	top: 38%;
}

.right-input-top:after {
	background-position: 50% 88%;
	left: -60px;
}

.right-input-center:after {
	background-position: 50% 120%;
	left: -60px;
	top: 38%;
}

.form-bottom-sign {
	margin: 50px auto 0;
	max-width: 420px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: bold;
}


/* Загрузка фото в форму */
.upload-photo {
	padding: 18px 10px 16px;
}

.upload-photo label {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.img-upload-list {
	background: #f5f5f5;
	border-radius: 0 0 10px 10px;
	position: relative;
	padding: 5px 0 0;
	width: 98%;
	top: 10px;
	margin: 0 auto;
}

.img-upload-list ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.img-upload-list li {
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 31%;
	flex: 0 1 31%;
	max-width: 100px;
	margin: 0 0 10px;
	line-height: 0;
}

.img-upload-list li a {
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}

.img-upload-list .progress {
	background-color: rgba(0, 0, 0, .8);
	border-radius: 5px;
	position: absolute;
	padding: 0 6px;
	bottom: 3px;
	left: 3px;
	line-height: 1.4;
	font-size: 10px;
	color: #fff;

}

.img-upload-list .remove {
	background: url("/icon/close_red.svg") no-repeat 50% 50%/70% rgba(0, 0, 0, .8);
	border-radius: 50%;
	position: absolute;
	padding: 2px;
	text-align: center;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	bottom: 2px;
	right: 2px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	line-height: 0;
	font-size: 0;
}

.img-upload-list .remove:hover {
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}

/*** END Section form ***/

/* Page styles */
.page--content {
	position: relative;
}

.page--content h1 {
	display: block;
	position: relative;
	text-align: center;
}

/* Page styles */

/* Win */
.win-successful {
	background: #c8ecc8;
	border-radius: 10px;
	-webkit-box-shadow: 0 4px 30px -5px #b0c1b1;
	box-shadow: 0 4px 30px -5px #b0c1b1;
	position: absolute;
	padding: 10px 4% 20px;
	width: 100%;
	max-width: 500px;
	top: 5%;
	left: 50%;
	-webkit-transform: translateX(-50%) scale(0.6);
	-ms-transform: translateX(-50%) scale(0.6);
	transform: translateX(-50%) scale(0.6);
	text-align: center;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
}

.win-successful h3 {
	margin: 5px 0 10px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.4;
}

.win-successful p {
	font-size: 0.9rem;
	line-height: 1.4;
}

.win-successful.show {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateX(-50%) scale(1);
	-ms-transform: translateX(-50%) scale(1);
	transform: translateX(-50%) scale(1);
}

@media (max-width: 920px) {
	.section-form--wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		max-width: 600px;
		margin: 0 auto;
	}

	.form-input--wrap:after {
		display: none;
	}

	.form-left,
	.form--right {
		padding: 0;
	}

	.form--center {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 25%;
		flex: 1 1 25%;
		position: -webkit-sticky;
		position: sticky;
		top: 60px;
		background-size: 100%;
		min-width: 230px;
	}

	.form-bottom-sign {
		margin: 50px auto 30px;
	}
}

@media (max-width: 569px) {
	.section-form--wrap {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.section-form--content {
		padding-top: 30px !important;
	}

	.form-left,
	.form--right {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}

	.form--center {
		background: url(/project/autoprofe/images/form-car-mobile__load.jpg) no-repeat 50% 50%/100%;
		position: relative;
		max-width: 430px;
		top: 0;
	}

	.form--center:before {
		content: "";
		background: url(/project/autoprofe/icon/form-elements.svg) no-repeat 50% 88%/100%;
		position: absolute;
		width: 50px;
		height: 17px;
		top: 5px;
		left: 8%;
		-webkit-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}

	.form--center:after {
		padding-top: 60%;
	}

	.form--center .center-element {
		background: url(/project/autoprofe/icon/form-elements.svg) no-repeat 50% 88%/100%;
		display: block;
		width: 50px;
		height: 17px;
		bottom: 25px;
		right: 8%;
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.form--center.visible_img {
		background-image: url(/project/autoprofe/images/form-car-mobile.jpg);
	}

	.chosen-container-single .chosen-single {
		font-size: 1rem;
	}

	.form-input,
	.form-input select,
	.form-input input,
	.form-input textarea {
		font-size: 1rem;
	}


	.form--right .send-form--btn {
		padding: 18px 15px;
	}

	.win-successful {
		top: 2%;
		width: 95%;
	}
}

@media (max-width: 450px) {
	.form--center:after {
		padding-top: 50%;
	}

	.form--center:before {
		top: 10px;
		left: -1%;
	}

	.form-title p {
		font-size: 0.9rem;
	}

	.form-title p .center-element {
		bottom: 20px;
		right: -1%;
	}

	.form-input--wrap {
		margin: 0 0 12px;
	}
}

/*** END Main Content ***/

/*** Button ***/
.btn {
	background: #0e1921;
	border-radius: 10px;
	border: medium none;
	display: block;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 400;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	padding: 15px 15px;
	-webkit-appearance: none;
	line-height: 1.25;
	letter-spacing: 1.2px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.btn:hover {
	background: #2f92d9;
	-webkit-box-shadow: 0 2px 7px -6px #333;
	box-shadow: 0 2px 7px -6px #333;
}

.btn:hover,
.btn:active,
.btn:focus {
	outline: 0 !important;
}

.btn svg {
	position: relative;
	width: 20px;
	height: 16px;
	fill: #fff;
	right: -5px;
	vertical-align: middle;
	transition: .3s ease-in-out;
}

.btn:hover svg {
	width: 30px;
}

.to-form--btn-main {
	display: block;
}

.to-form--btn-page {
	display: none;
}

/* END Button */

/* Preload image */
.preload-img:after {
	content: "";
	background: -o-linear-gradient(350deg, #eee 30%, #ddd 50%, #eee 70%);
	background: linear-gradient(100deg, #eee 30%, #ddd 50%, #eee 70%);
	background-size: auto;
	background-size: 400%;
	position: absolute;
	font-size: 0.9rem;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-webkit-animation: preload-img 1.5s ease-in-out infinite;
	animation: preload-img 1.5s ease-in-out infinite;
	z-index: -1;
}

@-webkit-keyframes preload-img {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

@keyframes preload-img {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

/* END Preload image */

/* Footer */
footer {
	background: #dee1e3;
}

.footer-content {
	padding: 80px 20px 100px;
	max-width: 1060px;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	overflow: hidden;
}

.footer-content--title {
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom: 15px;
}

.footer-content--info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 8px 0;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-weight: bold;
	font-size: 0.85rem;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.footer-content--info .footer-icon {
	position: relative;
	margin-right: 6px;
	width: 18px;
	height: 18px;
	fill: #24394B;
}

.footer-content--info:hover {
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
}

.footer-content--info:hover .fc-link-mail {
	color: #2082ff;
}

.footer-content--user-info {
	position: relative;
}

.footer-content--user-info .fc-link {
	display: block;
	line-height: 2.3;
	font-size: 0.9rem;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.footer-content--user-info .fc-link:hover {
	-webkit-transform: scale(1.08);
	-ms-transform: scale(1.08);
	transform: scale(1.08);
}

/* subscription-form */
.footer-content--form {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 48%;
	flex: 0 1 48%;
}

.subscription-form {
	background: #eee;
	background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, #f5f5f5), to(#eee));
	background-image: -o-linear-gradient(left, #f5f5f5 20%, #eee 100%);
	background-image: linear-gradient(to right, #f5f5f5 20%, #eee 100%);
	border-radius: 10px;
	position: relative;
	top: -15px;
	padding: 20px;
	max-width: 420px;
	min-height: 220px;
	margin-left: auto;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	overflow: hidden;
	transition-property: top;
}

.subscription-form:after {
	content: "";
	background: url(/project/autoprofe/icon/phone_mobile.svg) no-repeat 0 0/85% #eee;
	position: absolute;
	width: 250px;
	height: 220px;
	top: 2px;
	right: -30px;
	opacity: 0.03;
}

.subscription-form:hover {
	top: -18px;
	-webkit-box-shadow: 0 5px 15px -10px #999;
	box-shadow: 0 5px 15px -10px #999;
}

.sf-title {
	font-size: 1.4rem;
	font-weight: bold;
	padding: 0 0 15px;
}

.sf-descript {
	max-width: 300px;
	font-size: 0.9rem;
	padding: 0 0 30px;
}

.sf-input {
	position: relative;
	z-index: 1;
}

.sf-input input {
	width: 100%;
	padding: 11px 10px 11px 44px;
}

.sf-input .i-phone {
	position: absolute;
	overflow: hidden;
	width: 24px;
	height: 24px;
	top: 9px;
	left: 10px;
}

.sf-input .btn {
	position: absolute;
	border-radius: 0 10px 10px 0;
	bottom: 0;
	right: 0;
	padding: 14px 15px;
	font-size: 0.8rem;
}

/* END Subscription form + Text block section */
.footer-sign {
	background: rgba(11, 14, 17, 0.96);
}

.footer-sign .footer-sign-content {
	max-width: 670px;
	margin: 0 auto;
	padding: 10px 10px;
	font-size: 0.7rem;
	color: #eee;
	line-height: 1.4;
	text-align: center;
}

/* END Footer */


/* Icons */
.i-close {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
	width: 100%;
}

.i-close:hover {
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

/* END Icons */


/* Block text description */
.block-text-description {
	position: relative;
	-webkit-box-flex: 0;
	-ms-flex: 0 1 48%;
	flex: 0 1 48%;
	max-width: 500px;
	padding-right: 10px;
}

.text-description-hide {
	position: relative;
	max-height: 220px;
	overflow: hidden;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.show_text .text-description-hide {
	max-height: 999px;
}

.text-description-hide:after {
	content: "";
	background: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}

.show_text .text-description-hide:after {
	opacity: 0;
}

.block-text-description h1 {
	text-align: left;
	font-size: 1.1rem;
	margin: 0 0 15px;
	padding: 0;
}

.block-text-description h2,
.block-text-description h3 {
	text-align: left;
	font-size: 1rem;
}

.block-text-description p {
	font-size: 0.8rem;
}

.open-text-btn {
	display: inline-block;
	position: relative;
	top: 5px;
	font-size: 0.7rem;
	color: #fff;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer;
}

.open-text-btn:hover {
	color: #1a8bce;
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
}

.block-text-description .сlose-text {
	display: none;
}

.block-text-description.show_text .сlose-text {
	display: block;
}

.block-text-description.show_text .open-text {
	display: none;
}

/* Tips report */
.tip-note {
	background: #0ab574;
	-webkit-box-shadow: 0 10px 10px -10px #666;
	box-shadow: 0 10px 10px -10px #666;
	border-radius: 10px;
	position: absolute;
	padding: 8px 20px 10px;
	text-align: center;
	width: 65%;
	color: #fff;
	top: 10px;
	left: 50%;
	font-size: .8rem;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: ease-in 0.3s;
	-o-transition: ease-in 0.3s;
	transition: ease-in 0.3s;
	z-index: 1;
}

.tip-err {
	background: #f77676;
}

.tip-success {
	background: #0ab574;
	width: 65%;
	top: 20px;
}

/* Section position scroll */
.scroll-position {
	position: absolute;
	top: -20px;
	width: 20px;
	height: 10px;
}

/* Icon move Up */
.icon-move {
	-webkit-animation-name: icon-up;
	animation-name: icon-up;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

@-webkit-keyframes icon-up {
	0% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}

	to {
		-webkit-transform: translate3d(0, 4px, 0);
		transform: translate3d(0, 4px, 0);
	}
}

@keyframes icon-up {
	0% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	}

	to {
		-webkit-transform: translate3d(0, 4px, 0);
		transform: translate3d(0, 4px, 0);
	}
}

/* Css load */
@-webkit-keyframes cssload-spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes cssload-spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* END Css load */

.form-loader {
	position: relative;
}

.form-loader:after {
	border-radius: 10px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="0" fill="none" stroke="%23cc163f" stroke-width="5"> <animate attributeName="r" repeatCount="indefinite" dur="1.1111111111111112s" values="0;41" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s"></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1.1111111111111112s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s"></animate></circle><circle cx="50" cy="50" r="0" fill="none" stroke="%23cc163f" stroke-width="5"> <animate attributeName="r" repeatCount="indefinite" dur="1.1111111111111112s" values="0;41" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.5555555555555556s"></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1.1111111111111112s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.5555555555555556s"></animate></circle></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255, 255, 255, 0);
	background-size: 75px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 3;
	visibility: hidden;
	opacity: 0;
	transition: all .2s ease-out;
}

.form-loader.form-loading:after {
	content: '';
	background-color: rgba(255, 255, 255, .5);
	visibility: visible;
	opacity: 1;
}