@import url("animate.css");

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong {
	font-weight: 600;
}

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

:root {
	--orange: #FFC700;
	--gray: #191919;
}

::selection {
	background: var(--orange);
	color: #000;
}

::-moz-selection {
	background: var(--orange);
	color: #000;
}

::-webkit-scrollbar {
	width: 6px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--orange);
	border-radius: 10px;
}

::-webkit-scrollbar-track-piece {
	background: transparent;
}

html, body {
	width: 100%;
	min-height: 100%;
	background: #fff;
	-webkit-text-size-adjust: none;
	font-weight: 400;
}

html, body, textarea, input, button, select {
	font-size: 16px;
	font-family: 'Circe', sans-serif;
	color: var(--gray);
	outline: 0px;
}

input[type=text], input[type=email], 
input[type=search], 
input[type=submit], textarea {
	-webkit-appearance: none;
} 

body {
	-webkit-overflow-scrolling: touch;
	min-height: 100vh;
	overflow: overlay;
	background: var(--gray);
	color: #fff;
}

ul { 
	padding-left: 40px; 
	list-style: disc outside;
	margin-top: 1em;
	margin-bottom: 1em;
}

ol { 
	padding-left: 40px;
	list-style: decimal outside;
	margin-top: 1em;
	margin-bottom: 1em;
}

img {
	max-width: 100%;
	height: auto;
	border: 0px;
	vertical-align: bottom;
}

a {
	color: var(--gray);
	text-decoration: none;
}

@media (hover){
	a:hover, .link:hover {
		color: var(--orange);
	}
}

.clr::after {
	content: '';
	display: block;
	clear: both;
}

ul.noli, ul.noli ul, ul.noli li {
	display: block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}


h1, h2, h3 {
	display: block;
	font-weight: 600;
	color: var(--gray);
	margin: 0px 0px 15px 0px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 20px;
}

.max {
	display: block;
	position: relative;
	margin: 0px auto;
    max-width: 1170px;
    width: calc(100% - 40px);
}


/********************************* Buttons default ********************************/
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	height: 75px;
	border-radius: 100px;
	background: var(--orange);
	color: #212121;
	font-size: 21px;
	font-weight: bold;
	transition: all 0.1s;
	box-shadow: 0px 10px 30px rgb(255 199 0 / 50%);
}

.btn:hover {color: #000;box-shadow: 0px 10px 30px rgb(255 199 0 / 73%);}

.btn:active {color: #000;box-shadow: 0px 10px 30px rgb(255 199 0 / 73%), inset 0px 5px 10px rgb(0 0 0 / 26%);}
/********************************* END Buttons default ********************************/








/********************************* Loading ********************************/
.loading {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 89%);
	z-index: 9999;
}

.loading> div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading img {
	width: 100px;
}
/********************************* END Loading ********************************/














/********************************* Header ********************************/
.before_background {
	animation: fadeInDown 1.5s ease-in-out 0s forwards;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.before_background.com {
	height: 100vh;
	overflow: hidden;
}

.before_background::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
360deg
, rgba(26, 26, 26, 0.8) 0%, rgba(26, 26, 26, 0.64) 100%);
}

#header {
	display: block;
	position: relative;
	padding: 40px 0 90px;
}

.header {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	height: 64px;
}

.header> .logo {
	display: flex;
	position: relative;
	height: 100%;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.1s forwards;
}

.header> .logo> img {
	margin: 0 20px 0 0;
	width: 136px;
}

.header> .logo> span {
	display: flex;
	align-items: center;
	border-left: 1px solid rgb(255 255 255 / 30%);
	padding: 0 0 0 28px;
	font-size: 16px;
	line-height: 20px;
	max-width: 262px;
}

.header> a.topAddress {
	display: flex;
	align-items: center;
	color: var(--orange);
	margin: 0 50px 0 0;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.15s forwards;
}

.header> a.topAddress> span {
	border-bottom: 1px solid;
	line-height: 16px;
	margin: 0 0 0 11px;
	transition: all 0.1s;
}

.header> a.topAddress:hover> span {
	border-color: transparent;
}

.header> a.topAddress> img {
	position: relative;
	top: -1px;
}

.header> .topPhone {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.2s forwards;
}

.header> .topPhone> a {
	color: #fff;
	font-size: 27px;
	font-weight: 700;
}
/********************************* END Header ********************************/














/********************************* Main ********************************/
#main {
	display: block;
	position: relative;
	overflow: hidden;
	padding: 0 0 90px;
}

.main {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: space-between;
}

.main> .left {
	width: calc(100% - 480px);
}

.main> .right {
	width: 480px;
}

.main> .left> h1 {
	display: block;
	color: #fff;
	font-size: 70px;
	line-height: 72px;
	max-width: 600px;
	margin: 0 0 25px;
	opacity: 0;
	animation: fadeInLeft 0.5s ease-in-out 0.3s forwards;
}

.main> .left> h1> span {
	color: var(--orange);
}

.main> .left> .gift {
	display: flex;
	align-items: center;
	margin: 0 0 40px;
	position: relative;
	font-size: 24px;
	line-height: 30px;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeInLeft 0.5s ease-in-out 0.35s forwards;
}

.main> .left> .gift> .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 25px 0 0;
	background: rgba(255, 199, 0, 0.2);
	border: 1px solid #FFC700;
	border-radius: 100%;
}

.main> .left> .gift> span {
	display: block;
	width: calc(100% - 109px);
	max-width: 400px;
}

.main> .left> .button {
	display: inline-flex;
	position: relative;
	opacity: 0;
	animation: fadeInLeft 0.5s ease-in-out 0.4s forwards;
}

.main> .left> .button> a {
	width: 262px;
}

.main> .left> .button::after {
	display: block;
	content: '';
	position: absolute;
	width: 45px;
	height: 52px;
	background: url('../images/strelka.svg') center no-repeat;
	background-size: 100%;
	left: calc(100% + 20px);
	top: -5px;
}

.main> .right> .cricle {
	display: block;
	position: relative;
	padding: 20px 0;
}

.main> .right> .cricle::before {
	content: '';
	display: block;
	width: 434px;
	height: 434px;
	background: var(--orange);
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: topCricle 0.5s ease-in-out 0.8s forwards;
}

@keyframes topCricle {   
	0% {     
		transform: translate(-50%, -50%) scale(0);
	}
	100% {     
		transform: translate(-50%, -50%) scale(1);
	}
}

.main> .right> .cricle> .home {
	display: block;
	position: relative;
	z-index: 2;
	opacity: 0;
	animation: fadeIn 0.5s ease-in-out 0.4s forwards;
}

.main> .right> .cricle> .befor {
	position: absolute;
	z-index: 3;
}

.main> .right> .cricle> .befor> .giftItem {
	display: flex;
	background: #fff;
	align-items: center;
	justify-content: center;
	width: 276px;
	height: 102px;
	color: var(--gray);
	border-radius: 20px;
	font-size: 21px;
	line-height: 24px;
	transition: all 0.3s linear;
}

.main> .right> .cricle> .befor> .giftItem> span {
	margin: 0 0 0 15px;
}

.main> .right> .cricle> .befor> .giftItem> span> b {
	color: #000;
	display: block;
}



.main> .right> .cricle> .befor.gi1 {
	top: calc(50% - 150px);
	left: calc(50% - 70px);
	opacity: 0;
	animation: fadeInLeft 0.5s ease-in-out 0.5s forwards;
}

.main> .right> .cricle> .befor.gi2 {
	top: 50%;
	left: calc(50% - 140px);
	opacity: 0;
	animation: fadeInRight 0.5s ease-in-out 0.55s forwards;
}
/********************************* END Main ********************************/














/********************************* topFeatures ********************************/
#topFeatures {
	display: block;
	position: relative;
	padding: 0 0 100px;
}

.topFeatures {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	margin: 0 -20px;
}

.topFeatures> .item {
	display: flex;
	position: relative;
	flex-direction: column;
	margin: 0 20px;
	width: calc(25% - 40px);
	font-size: 22px;
	line-height: 27px;
	opacity: 0;
}

.topFeatures> .item:nth-child(1) {
	animation: fadeInLeft 0.5s ease-in-out 0.6s forwards;
}

.topFeatures> .item:nth-child(2) {
	animation: fadeInLeft 0.5s ease-in-out 0.7s forwards;
}

.topFeatures> .item:nth-child(3) {
	animation: fadeInLeft 0.5s ease-in-out 0.8s forwards;
}

.topFeatures> .item:nth-child(4) {
	animation: fadeInLeft 0.5s ease-in-out 0.9s forwards;
}

.topFeatures> .item> .ico {
	display: flex;
	height: 70px;
	align-items: flex-end;
	margin: 0 0 23px;
}

.topFeatures> .item> b {
	display: block;
	font-weight: 400;
	color: var(--orange);
	margin: 0 0 23px;
}
/********************************* END topFeatures ********************************/










/********************************* quiz ********************************/
#quiz {
	display: block;
	position: relative;
	padding: 0 0 120px;
}

.quiz {
	display: flex;
	position: relative;
	flex-direction: column;
	background: #fff;
	border-radius: 30px;
	min-height: 870px;
	transition: height 0.3s;
	overflow: hidden;
}

.quiz> .title {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	height: 166px;
	border-bottom: 1px solid #C4C4C4;
	color: var(--gray);
}

.quiz> .title> h2 {
	display: block;
	max-width: 968px;
	font-size: 40px;
	font-weight: 700;
	line-height: 42px;
	margin: 0;
}

.quiz> .title> h2> span {
	color: var(--orange);
}

.quiz> .stepsContent {
	display: flex;
	width: 100%;
	padding: 60px;
	flex-grow: 1;
	color: var(--gray);
	font-size: 22px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.quiz> .formInfo {
	display: flex;
	height: 136px;
	border-top: 1px solid #C4C4C4;
	width: 100%;
	justify-content: space-between;
	padding: 0 60px;
	align-items: center;
	flex-wrap: wrap;
}

.quiz> .formInfo> .left {
	display: block;
	width: calc(100% - 342px - 100px);
}

.quiz> .formInfo> .left> .title {
	display: flex;
	justify-content: space-between;
	color: #A7A7A7;
	font-size: 21px;
	margin: 0 0 5px;
}

.quiz> .formInfo> .left> .title> .left {
	color: var(--gray);
	font-weight: bold;
}

.quiz> .formInfo> .left> .title> .left> span {
	color: var(--orange);
}

.quiz> .formInfo> .left> .range {
	display: block;
	position: relative;
	width: 100%;
	height: 7px;
	background: #F4F4F4;
	border-radius: 100px;
}

.quiz> .formInfo> .left> .range> span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--orange);
	border-radius: 100px;
	box-shadow: 0px 3px 10px rgb(255 199 0 / 50%);
}

.quiz> .formInfo> .right {
	display: flex;
	justify-content: space-between;
	width: 342px;
}

.quiz> .formInfo> .right> button, .quiz> .formInfo> .right> a {
	width: 155px;
}

.quiz> .formInfo> .right> button.btn:disabled {
	opacity: 0.5;
	cursor: no-drop;
}

.btn.gray {
	box-shadow: none;
	background: #F4F4F4;
}

.btn.gray:hover {
	background: #f1f1f1;
}

.btn.gray:active {
	background: #e6e6e6;
}

.quiz> .formInfo> .right> a.disabled {
	cursor: no-drop;
	color: #999;
}

.quiz> .stepsContent> form.form {
	display: block;
	width: calc(100% - 342px - 100px);
}

.quiz> .stepsContent> .giftInfo {
	display: flex;
	flex-direction: column;
	width: 342px;
	align-items: center;
	text-align: center;
	justify-content: center;
	background: var(--orange);
	border-radius: 30px;
}

.quiz> .stepsContent> form.form> b {
	display: block;
	font-size: 30px;
	line-height: 32px;
	margin: 0 0 40px;
}

.quiz> .stepsContent> form.form> label.item {
	display: block;
	cursor: pointer;
	margin: 0 0 20px;
}

.quiz> .stepsContent> form.form> label.item:nth-last-child(2) {
	margin: 0;
}

.quiz> .stepsContent> form.form> label.item> input {
	display: none;
}

.quiz> .stepsContent> form.form> label.item> div {
	display: flex;
	position: relative;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 7px 70px 7px 7px;
	border-radius: 20px;
	min-height: 79px;
	box-shadow: inset 0px 0px 0px 1px #D4D4D4;
	transition: all 0.15s;
	line-height: 22px;
}

.quiz> .stepsContent> form.form> label.item> div> span {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	padding: 5px 0 5px 23px;
}

.quiz> .stepsContent> form.form> label.item> div> img + span {
	padding: 5px 0 5px 25px;
	width: calc(100% - 65px);
}

.quiz> .stepsContent> form.form> label.item> div> img {
	border-radius: 15px;
}

.quiz> .stepsContent> form.form> label.item> input:checked + div {
	box-shadow: inset 0px 0px 0px 2px var(--orange), 0px 10px 20px rgb(25 25 25 / 7%);
}

.quiz> .stepsContent> form.form> label.item:hover> div {
	box-shadow: inset 0px 0px 0px 2px var(--orange), 0px 10px 20px rgb(25 25 25 / 7%);
}

.quiz> .stepsContent> form.form> label.item> div::before, .quiz> .stepsContent> form.form> label.item> div::after {content: '';display: block;width: 28px;height: 28px;position: absolute;top: calc(50% - 14px);right: 24px;border: 2px solid #000;border-radius: 100%;}

.quiz> .stepsContent> form.form> label.item> div::after {
	background: transparent;
	border: 0;
}

.quiz> .stepsContent> form.form> label.item> input:checked + div::before {
	border-color: transparent;
	background-color: var(--orange);
}

.quiz> .stepsContent> form.form> label.item> input:checked + div::after {
	background: url('../images/check_dark.svg') center no-repeat;
}

.quiz> .stepsContent> .giftInfo> .imgs {
	display: block;
	position: relative;
	height: 217px;
	width: 100%;
	margin: 0 0 30px;
}

.quiz> .stepsContent> .giftInfo> .imgs> .giftLoading {
	position: absolute;
}

.quiz> .stepsContent> .giftInfo> .imgs> .giftLoading.giftLoading_1 {
	top: -10px;
	left: calc(30% - 30px);
}

.quiz> .stepsContent> .giftInfo> .imgs> .giftLoading.giftLoading_2 {
	left: calc(30% + 15px);
	top: 40px;
}

.quiz> .stepsContent> .giftInfo> .imgs> .giftLoading> img {
	transition: all 0.3s linear;
}

.quiz> .stepsContent> .giftInfo> .info {
	font-size: 22px;
	line-height: 24px;
	font-weight: 700;
	display: block;
	max-width: 190px;
}

.lastquiz {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 100px 130px 130px;
}

.lastquiz> img {
	margin: 0 0 30px;
}

.lastquiz> h2 {
	display: block;
	max-width: 690px;
	font-size: 40px;
	font-weight: 700;
	line-height: 42px;
	margin: 0;
	margin: 0 0 22px;
}

.lastquiz> h2> span {
	color: var(--orange);
}

.lastquiz> h3 {
	display: block;
	margin: 0 0 25px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	max-width: 520px;
}

.lastquiz> .gifts {
	display: flex;
	align-items: center;
	margin: 0 -15px 60px;
	flex-wrap: wrap;
}

.lastquiz> .gifts> .giftItem {
	display: flex;
	background: #fff;
	align-items: center;
	justify-content: center;
	width: 276px;
	height: 102px;
	color: var(--gray);
	border-radius: 20px;
	font-size: 21px;
	line-height: 24px;
	transition: all 0.3s linear;
	margin: 0 15px;
	text-align: left;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.07);
}

.lastquiz> .gifts> .giftItem> span {
	width: 140px;
	margin: 0 0 0 15px;
	font-size: 20px;
	line-height: 20px;
}

.lastquiz> .titleLastForm {
	display: block;
	max-width: 690px;
	font-size: 30px;
	font-weight: 700;
	line-height: 32px;
	margin: 0px 0 30px;
	color: var(--gray);
}

form.lastForm {
	display: flex;
	align-items: center;
	width: 100%;
	flex-wrap: wrap;
}

form.lastForm> .input {width: calc(50% - 165px - 30px);margin: 0 30px 0 0;position: relative;height: 75px;border: 1px solid #CECECE;border-radius: 10px;}

form.lastForm> button {
	width: 330px;
}

form.lastForm> .input> img {
	position: absolute;
	top: calc(50% - 10px);
	left: 20px;
	z-index: 1;
}

form.lastForm> .input> input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color: #979797;
	font-size: 20px;
	padding: 4px 0 0 50px;
	z-index: 2;
}

form.lastForm> .input> input::placeholder {
	color: #979797;
}
/********************************* END quiz ********************************/









/********************************* projects ********************************/
#projects {
	display: block;
	position: relative;
	padding: 0 0 250px;
}

#projects> .max> h2 {
	font-weight: bold;
	font-size: 70px;
	line-height: 102.9%;
	color: #fff;
	max-width: 1100px;
	margin: 0 0 24px;
}

#projects h2 span, #projects h3 span {
	color: var(--orange);
}

#projects> .max> h3 {
	font-weight: normal;
	font-size: 24px;
	line-height: 125%;
	color: #fff;
	margin: 0 0 50px;
}

.projects {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	justify-content: space-between;
}

.projects> .items {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
	width: calc(100% - 380px);
}

.projects> .projform {
	width: 360px;
}

.projects> .items> .item {
	margin: 0 20px 50px;
	width: calc(50% - 40px);
}

.projects> .items> .item> a.image {
	display: block;
	position: relative;
	width: 100%;
	height: 240px;
	overflow: hidden;
	border-radius: 30px;
	margin: 0 0 30px;
}

.projects> .items> .item> a.image> img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(1) translate3d(-50%, -50%, 0px);
	min-height: 100%;
	max-width: calc(100% + 50px);
}

.projects> .items> .item> a.image:hover> img {
	transform: scale(2);
	transition: all 25s linear;
}

.projects> .items> .item> a.image> .rating {
	display: flex;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	align-items: center;
	height: 40px;
	background: #fff;
	padding: 0 17px;
	font-size: 17px;
	border-radius: 30px;
	box-shadow: 0px 5px 10px rgb(0 0 0 / 5%);
	color: #000;
}

.projects> .items> .item> a.image> .rating> span {
	margin: 0 6px 0 0;
}

.projects> .items> .item> a.image> .rating> img {
	margin: 0 1px 0 0;
}

.projects> .items> .item> h3 {
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	line-height: 125%;
	margin: 0 0 22px;
}

.projects> .items> .item> .info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 22px;
}

.projects> .items> .item> .info> span {
	display: flex;
	align-items: center;
}

.projects> .items> .item> .info> span> img {
	margin: -2px 5px 0 0;
}

.projects> .items> .item> .info> span> b {
	font-weight: 400;
}

.projects> .items> a.fullProjects {
	position: absolute;
	top: 100%;
	left: 0;
	width: 263px;
}

form.formProjects {
	display: block;
	position: relative;
	background: #fff;
	border-radius: 30px;
	padding: 45px 50px 50px;
	color: var(--gray);
	margin: 0 0 30px;
}

form.conform> b {
	font-weight: bold;
	font-size: 28px;
	line-height: 115%;
	display: block;
	margin: 0 0 16px;
}

form.conform> span {
	display: block;
	margin: 0 0 36px;
	font-size: 22px;
	line-height: 125%;
}

form.conform> .input {width: 100%;margin: 0 0 10px;position: relative;height: 75px;border: 1px solid #CECECE;border-radius: 10px;}

form.conform> button {
	width: 100%;
	margin: 20px 0 0;
}

form.conform> .input> img {
	position: absolute;
	top: calc(50% - 10px);
	left: 20px;
	z-index: 1;
}

form.conform> .input> input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	color: #979797;
	font-size: 20px;
	padding: 4px 0 0 50px;
	z-index: 2;
}

form.conform> .input> input::placeholder {
	color: #979797;
}
/********************************* END projects ********************************/









/********************************* features ********************************/
#features {
	display: block;
	position: relative;
	padding: 0 0 100px;
}

#features> .max> h2 {
	font-weight: bold;
	font-size: 70px;
	line-height: 102.9%;
	color: #fff;
	margin: 0 0 74px;
}

.featuresPosition {
	display: block;
	position: relative;
}

.features {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
}

.features> .item {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	border-bottom: 1px solid #313131;
	padding: 35px 0;
	font-size: 22px;
	line-height: 125%;
	justify-content: space-between;
}

.features> .item> .left, .features> .item> .right {
	width: calc(50% - 20px);
	display: flex;
	position: relative;
	flex-wrap: wrap;
}

.features> .item:last-child {
	border: 0;
}

.features> .item> .left> .ico, .features> .item> .right> .ico {
	width: 40px;
	height: 40px;
	margin: 0 20px 0 0;
	background: #fff;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	bottom: -4px;
}

.features> .item> .left> b, .features> .item> .right> b {
	display: block;
	width: calc(100% - 60px);
	font-weight: 400;
}

.features> .item> .right {
	color: var(--orange);
}

.features> .item> .right> .ico {
	background: var(--orange);
}

.features> .item.title {
	padding-top: 0;
	align-items: center;
	font-weight: bold;
	font-size: 34px;
	line-height: 125%;
	padding-bottom: 20px;
}

.features> .item.title> .left> b, .features> .item.title> .right> b {
	font-weight: bold;
	width: calc(100% - 45px);
}

.features> .item.title> .left> img, .features> .item.title> .right> img {
	margin: 0 14px 0 0;
	top: -2px;
	position: relative;
}
/********************************* END features ********************************/









/********************************* bottomForm ********************************/
#bottomForm {
	display: block;
	position: relative;
	padding: 0 0 100px;
}

.bottomForm {
	display: flex;
	position: relative;
	flex-wrap: wrap;
	background: var(--orange);
	border-radius: 30px;
	width: 100%;
	max-width: 966px;
	margin: 0px auto;
	min-height: 625px;
}

.bottomForm> .left {
	display: flex;
	width: calc(100% - 440px);
	align-items: flex-end;
	justify-content: center;
}

.bottomForm> .right {
	width: 440px;
	display: flex;
	flex-direction: column;
	position: relative;
	background: #fff;
	border-radius: 30px;
	padding: 45px 90px 50px;
	color: var(--gray);
	justify-content: center;
}
/********************************* END bottomForm ********************************/









/********************************* footer ********************************/
#footer {
	display: block;
	position: relative;
	padding: 0px 0 100px;
}

.footer {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	height: 64px;
}

.footer> .logo {
	display: flex;
	position: relative;
	height: 100%;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.1s forwards;
}

.footer> .logo> img {
	margin: 0 20px 0 0;
	width: 136px;
}

.footer> .logo> span {
	display: flex;
	align-items: center;
	border-left: 1px solid rgb(255 255 255 / 30%);
	padding: 0 0 0 28px;
	font-size: 16px;
	line-height: 20px;
	max-width: 262px;
}

.footer> a.topAddress {
	display: flex;
	align-items: center;
	color: var(--orange);
	margin: 0 50px 0 0;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.15s forwards;
}

.footer> a.topAddress> span {
	border-bottom: 1px solid;
	line-height: 16px;
	margin: 0 0 0 11px;
	transition: all 0.1s;
}

.footer> a.topAddress:hover> span {
	border-color: transparent;
}

.footer> a.topAddress> img {
	position: relative;
	top: -1px;
}

.footer> .topPhone {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.2s forwards;
}

.footer> .topPhone> a {
	color: #fff;
	font-size: 27px;
	font-weight: 700;
}
/********************************* END footer ********************************/







/********************************* Complete page ********************************/
.complete_page {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 0px 50px 150px;
	min-height: calc(100vh - 194px);
	flex-direction: column;
	text-align: center;
}

.complete_page> img {
	margin: 0 0 15px;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.3s forwards;
}

.complete_page> h1 {
	display: block;
	font-size: 90px;
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--orange);
	line-height: 92px;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.45s forwards;
}

.complete_page> h2 {
	color: #fff;
	font-weight: 400;
	max-width: 400px;
	display: block;
	font-size: 34px;
	line-height: 37px;
	margin: 0 0 34px;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.6s forwards;
}

.complete_page> .button {
	display: inline-flex;
	position: relative;
	opacity: 0;
	animation: fadeInDown 0.5s ease-in-out 0.75s forwards;
}

.complete_page> .button::after {
	display: block;
	content: '';
	position: absolute;
	width: 45px;
	height: 52px;
	background: url(../images/strelka.svg) center no-repeat;
	background-size: 100%;
	left: calc(100% + 20px);
	top: -5px;
}

.complete_page> .button> a {
	width: 292px;
}
/********************************* END Complete page ********************************/
















/********************************* Adaptive fix ********************************/

/********************************* END Adaptive fix ********************************/



















/*************************************** Fonts Cricle *********************************/
@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-Regular.eot');
	src: local('Circe'), local('Circe-Regular'),
		url('../fonts/Circe-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-Regular.woff') format('woff'),
		url('../fonts/Circe-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-ExtraLight.eot');
	src: local('Circe ExtraLight'), local('Circe-ExtraLight'),
		url('../fonts/Circe-ExtraLight.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-ExtraLight.woff') format('woff'),
		url('../fonts/Circe-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-Thin.eot');
	src: local('Circe Thin'), local('Circe-Thin'),
		url('../fonts/Circe-Thin.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-Thin.woff') format('woff'),
		url('../fonts/Circe-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-Light.eot');
	src: local('Circe Light'), local('Circe-Light'),
		url('../fonts/Circe-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-Light.woff') format('woff'),
		url('../fonts/Circe-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-Bold.eot');
	src: local('Circe Bold'), local('Circe-Bold'),
		url('../fonts/Circe-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-Bold.woff') format('woff'),
		url('../fonts/Circe-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: url('../fonts/Circe-ExtraBold.eot');
	src: local('Circe ExtraBold'), local('Circe-ExtraBold'),
		url('../fonts/Circe-ExtraBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Circe-ExtraBold.woff') format('woff'),
		url('../fonts/Circe-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}