@media(max-width: 1219px) {

.max {
	max-width: 768px;
}


.header> a.topAddress {
	display: none;
}

.header> .topPhone {
}

.header {}

#header {
	padding: 40px 0 60px;
}

.main> .right {
	display: none;
}

.main> .left {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main> .left> h1 {
	max-width: initial;
	font-size: 60px;
	line-height: 102.9%;
}

.main> .left> .gift {
	font-size: 22px;
	line-height: 125%;
}

.topFeatures> .item {
	font-size: 20px;
	line-height: 125%;
}

#topFeatures {
	padding: 0 0 70px;
}

.quiz> .title {
	height: 130px;
}

.quiz> .title> h2 {
	font-size: 30px;
	padding: 0px 30px;
	line-height: 125%;
	max-width: initial;
}

.quiz> .stepsContent {
	padding: 40px;
}

.quiz> .stepsContent> .giftInfo {
	display: none;
}

.quiz> .stepsContent> form.form {
	width: 100%;
}

.quiz> .stepsContent> form.form> b {
	font-size: 26px;
	line-height: 125%;
	margin: 0 0 25px;
}

.quiz> .stepsContent> form.form> label.item {
	margin: 0 0 15px;
}

.quiz {
	min-height: initial;
}

.quiz> .formInfo {
	border-top: 0;
	padding: 0 40px;
	height: initial;
	flex-direction: column;
}

.quiz> .formInfo> .left {
	width: 100%;
	margin: 0 0 30px;
}

.quiz> .formInfo> .right {
	width: 100%;
	margin: 0 0 30px;
}

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

#quiz {
	padding: 0 0 80px;
}

#projects {
	padding: 0 0 80px;
}

#projects> .max> h2 {
	font-size: 47px;
	line-height: 103%;
	margin: 0 0 20px;
}

#projects> .max> h3 {
	margin: 0 0 40px;
}

.projects {
	flex-direction: column;
}

.projects> .items {
	width: 100%;
}

.projects> .projform {
	width: 100%;
	margin: 80px 0 0;
	text-align: center;
}

.projects> .items> a.fullProjects {position: relative;top: initial;left: initial;margin: 0 0 0 20px;}

.sticky> img {
}

.projects> .projform> .sticky {
}

form.formProjects {
	text-align: left;
}

#features> .max> h2 {
	font-size: 47px;
	line-height: 103%;
	margin: 0 0 20px;
}

.features> .item.title {
	font-size: 23px;
	white-space: nowrap;
}

.features> .item> .left, .features> .item> .right {
	width: calc(50% - 15px);
}

.featuresPosition {
	margin: 0 -20px;
	padding: 0 20px;
	overflow-x: overlay;
	-webkit-overflow-scrolling: touch;
}


.featuresPosition::-webkit-scrollbar { width: 0; height: 0 }

.featuresPosition { -ms-overflow-style: none; }

.featuresPosition { overflow: -moz-scrollbars-none; }




.features> .item> .left> .ico, .features> .item> .right> .ico {
	display: none;
}

.features> .item> .left> b, .features> .item> .right> b {
	width: 100%;
	font-size: 20px;
	line-height: 125%;
	font-weight: 400;
}

.features> .item.title> .left> b, .features> .item.title> .right> b {
	font-size: 23px;
}

.features {
	min-width: 780px;
}

.features> .item {
	padding: 25px 0;
}

#features {
	padding: 0 0 80px;
}

.bottomForm {
	background: transparent;
	min-height: initial;
}

.bottomForm> .left {
	display: none;
}

.bottomForm> .right {
	width: 100%;
}

.footer> a.topAddress {position: absolute;bottom: -50px;right: 0;margin: 1px;}

.footer> .logo {
	margin: 60px 0 0;
}

.lastquiz {
	padding: 50px;
}

.lastquiz> h2 {
	font-size: 36px;
	line-height: 103%;
}

form.lastForm {
	flex-direction: column;
}

form.lastForm> .input {
	width: 100%;
	margin: 0 0 20px;
}


	
} /************** END max-width 1279px **************/











@media(max-width: 767px) {
	
.max {
	max-width: 480px;
}
	
#header {
	padding: 30px 0 40px;
}

.header> .topPhone {position: absolute;top: 480px;}

.header {
	justify-content: center;
}

.header> .logo> span {
	border: 0;
	padding: 0;
	font-size: 14px;
	line-height: 125%;
	max-width: 204px;
}

#main {
	padding: 0 0 220px;
	overflow: hidden;
}

.main> .left> h1 {
	font-size: 36px;
	line-height: 102.9%;
	text-align: center;
	max-width: 350px;
}

.main> .left> .gift {
	margin: 0 0 30px;
}

.main> .left> .gift> span {
	max-width: 200px;
	font-size: 18px;
	line-height: 125%;
}

.main> .left> .button::after {
	transform: rotate(-25deg);
	top: -30px;
	left: initial;
	bottom: initial;
	right: -50px;
}

.before_background {
	overflow: hidden;
	min-height: 900px;
	width: 100%;
}

.before_background> img {
	max-width: initial;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 1;
}

.before_background::before {
	z-index: 2;
}

#topFeatures {
	display: none;
}

#quiz {
	padding: 0 0 60px;
}

.quiz> .title {
	height: initial;
	padding: 40px 20px 20px;
}

.quiz> .title> h2 {
	font-size: 26px;
	line-height: 102.9%;
}

.quiz> .stepsContent {
	padding: 30px 20px;
}

.quiz> .stepsContent> form.form> b {
	font-size: 22px;
	text-align: center;
}

.quiz> .stepsContent> form.form> label.item> div> span {
	font-size: 20px;
	line-height: 125%;
}

.quiz> .formInfo {
	padding: 0 20px;
}

.quiz> .formInfo> .left> .title {
	font-size: 20px;
	line-height: 103%;
}

.quiz> .formInfo> .right> button, .quiz> .formInfo> .right> a {
	width: calc(50% - 10px);
}

#projects {
	padding: 0 0 60px;
}

#projects> .max> h2 {
	font-size: 36px;
	line-height: 102.9%;
/* or 37px */
	text-align: center;
}

#projects> .max> h3 {
	font-weight: normal;
	font-size: 22px;
	line-height: 125%;
/* or 27px */
	text-align: center;
	max-width: 340px;
	margin: 0px auto 40px;
}

.projects> .items {
	margin: 0;
	flex-direction: column;
	align-items: center;
}

.projects> .items> .item {
	margin: 0 0 40px;
	width: 100%;
	max-width: 360px;
}

.projects> .items> .item> a.image {
	margin: 0 0 20px;
}

.projects> .items> .item> h3 {
	margin: 0 0 17px;
	font-size: 22px;
	line-height: 125%;
}

.projects> .items> .item> .info {
	font-size: 20px;
}

.projects> .items> a.fullProjects {width: 100%;max-width: 360px;margin: 0;}

.projects> .projform {
	max-width: 360px;
	margin: 80px auto 0px;
}

.sticky> img {
	max-width: 298px;
}

#features {
	margin: 0 0 0px;
	padding: 0 0 60px;
}

#features> .max> h2 {
	font-size: 36px;
	line-height: 102.9%;
/* or 37px */
	text-align: center;
	margin: 0;
	padding: 0 0 110px;
	position: relative;
}

#features> .max> h2::after {content: '';display: block;width: 40px;height: 40px;background: url('../images/swipe.svg') center no-repeat;position: absolute;bottom: 40px;left: calc(50% - 20px);}

.features {
	min-width: 620px;
}

.features> .item.title {
	font-size: 22px;
	white-space: inherit;
}

.features> .item:nth-last-child(1), .features> .item:nth-last-child(2) {
	display: none;
}

.features> .item:nth-last-child(3) {
	border-bottom: 0;
}

#bottomForm {
	padding: 0 0 60px;
}

.bottomForm> .right {
	max-width: 360px;
	margin: 0px auto;
	padding: 40px 50px;
}

#footer {
	padding: 0 0 200px;
}

.footer {
	justify-content: center;
}

.footer> .logo {
	margin: 0;
}

.footer> .topPhone {
	position: absolute;
	top: 90px;
}

.footer> .logo> span {
	border: 0;
	padding: 0;
	font-size: 14px;
	line-height: 125%;
	max-width: 204px;
}

.footer> a.topAddress {
	right: initial;
	bottom: initial;
	top: 180px;
}

body {
	overflow-x: hidden;
}
	
#header {
	z-index: 5;
}
.lastquiz> h2 {
	font-size: 28px;
}

.lastquiz {
	padding: 30px;
}

.lastquiz> .gifts {
	flex-direction: column;
	margin: 0 0 10px;
}

.lastquiz> .gifts> .giftItem {
	margin: 0 0 20px;
}

.lastquiz> .titleLastForm {
	font-size: 20px;
	line-height: 110%;
}


.complete_page {
	padding: 0 20px 50px;
	min-height: calc(100vh - 134px);
}

.complete_page> h1 {
	font-size: 50px;
	line-height: 100%;
}

.complete_page> h2 {
	font-size: 22px;
	line-height: 120%;
}

body.complete .header> .topPhone {
	display: none;
}

.before_background.com {
	min-height: initial;
}

} /************** END max-width 767px **************/







@media(max-width: 400px) {


.header> .logo> img, .footer> .logo> img {
	width: 110px;
}

.header> .logo> span, .footer> .logo> span {
	font-size: 11px;
}

.main> .left> h1 {
	font-size: 30px;
}

.main> .left> .gift> span {
	font-size: 16px;
}

.main> .left> .button::after {
	right: -20px;
	top: -50px;
}

.quiz> .title {
	padding: 20px 15px 15px;
}

.quiz> .title> h2 {
	padding: 0;
	font-size: 21px;
}

#main {
	padding: 0 0 150px;
}

#header {
	z-index: 5;
}

.header> .topPhone {
	top: 450px;
}

.quiz> .stepsContent> form.form> b {
	font-size: 18px;
}

.quiz> .stepsContent {
	padding: 15px;
}

.quiz> .stepsContent> form.form> label.item> div {
	padding: 7px 60px 7px 7px;
	min-height: 50px;
}

.quiz> .stepsContent> form.form> label.item> div> img {
	width: 50px;
	height: 50px;
}

.quiz> .stepsContent> form.form> label.item> div> img + span {
	padding: 5px 0 5px 10px;
	width: calc(100% - 50px);
	font-size: 15px;
}

.quiz> .stepsContent> form.form> label.item {
	margin: 0 0 10px;
}

.quiz> .stepsContent> form.form> label.item> div::before, .quiz> .stepsContent> form.form> label.item> div::after {
	width: 24px;
	height: 24px;
	top: calc(50% - 12px);
	right: 16px;
}

.quiz> .formInfo {
	padding: 15px 15px 0;
}

.quiz> .formInfo> .left {
	margin: 0 0 20px;
}

.quiz> .formInfo> .left> .title {
	font-size: 14px;
}

.quiz> .formInfo> .right {
	margin: 0 0 20px;
}

.quiz> .formInfo> .right> button, .quiz> .formInfo> .right> a {
	width: calc(50% - 7px);
}

.btn {
	height: 60px;
	font-size: 16px;
}

#quiz {
	padding: 0 0 40px;
}

#projects> .max> h2 {
	font-size: 28px;
}

#projects> .max> h3 {
	font-size: 18px;
}

.projects> .items> .item> a.image {
	height: 200px;
}

.projects> .items> .item> h3 {
	font-size: 20px;
}

.projects> .items> .item> .info> span> b {
	font-size: 15px;
}

.projects> .items> .item> a.image> .rating {
	height: 36px;
	font-size: 14px;
}

.projects> .projform {
	margin: 40px auto 0px;
}

form.formProjects {
	padding: 20px;
}

form.conform> b {
	font-size: 24px;
}

form.conform> span {
	font-size: 20px;
	line-height: 110%;
	margin: 0 0 20px;
}

form.conform> .input {
	height: 60px;
}

form.conform> button {
	margin: 10px 0 0;
}

.sticky> img {
	width: 150px;
}

#features> .max> h2 {
	font-size: 27px;
}

#features {
	padding: 0 0 0px;
}

.bottomForm> .right {
	padding: 20px;
}

.lastquiz {
	padding: 15px;
}

.lastquiz> h2 {
	font-size: 20px;
	margin: 0 0 15px;
}

.lastquiz> h3 {
	font-size: 16px;
	line-height: 116%;
}

.lastquiz> .gifts> .giftItem {
	margin: 0 0 10px;
	width: 100%;
}

.lastquiz> .gifts> .giftItem> span {
	font-size: 16px;
}

.lastquiz> .titleLastForm {
	font-size: 18px;
}

form.lastForm> button {
	width: 100%;
}

form.lastForm> .input {
	height: 60px;
	margin: 0 0 10px;
}


.complete_page> .button::after {
	display: none;
}
.complete_page> h1 {
	font-size: 30px;
}

.complete_page> h2 {
	font-size: 18px;
	max-width: 210px;
}


} /************** END max-width 400px **************/