@charset "UTF-8";
/*----------------------------------------------------------
  Home Page styles.
------------------------------------------------------------
 >>> TABLE OF CONTENTS:
------------------------------------------------------------
* General
* Homescreen
* About
* Services
* Development
* Steps
* Feedback
----------------------------------------------------------*/


/********************  GENERAL  ********************/

h1 {font-size: 72px; text-transform: uppercase;}
@media all and (max-width: 1279px){ h1 {font-size: 66px;} }
@media all and (max-width: 1023px){ h1 {font-size: 56px;} }
@media all and (max-width: 767px){ h1 {font-size: 46px;} }
@media all and (max-width: 599px){ h1 {font-size: 38px;} }
@media all and (max-width: 479px){ h1 {font-size: 36px;} }
@media all and (max-width: 359px){ h1 {font-size: 32px;} }

h2 {text-transform: uppercase;}
@media all and (min-width: 1280px){ h2 {font-size: 48px;} }

#navigation {}
	@media all and (min-width: 1024px){ #navigation .logo-2 {display: inline-block;} }


/********************  HOMESCREEN  ********************/

#homescreen {display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 70px); background-color: #252932; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; color: #fff; position: relative; overflow: hidden;}
	@media all and (min-height: 1600px){ #homescreen {min-height: calc(1600px - 70px);} }
	#homescreen::before {content: ''; display: block; width: 100%; height: 100%; background: rgba(37,41,50,0.85); margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;}
#homescreen .wrapper {flex: 0 0 auto; z-index: 2;}
	#homescreen .content {max-width: 1060px; margin: 0 auto;}
		#homescreen h1 {max-width: 845px; text-align: left; margin: 0 0 20px;}
		#homescreen h1 + .sub-title {max-width: 845px; margin: 0;}
		#homescreen .buttons {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 500px; margin: 75px 0 0;}
			#homescreen .buttons .button {flex: 0 0 auto; min-width: calc(50% - 10px);}


/*------ 1024 ------*/
@media all and (max-width: 1279px){
	#homescreen .wrapper {padding-left: 30px; padding-right: 30px;}
		#homescreen .content {max-width: 100%;}
			#homescreen .buttons {margin-top: 60px;}
}

/*------ 768 ------*/
@media all and (max-width: 1023px){
	#homescreen {min-height: calc(100vh - 60px);}
		#homescreen h1 {max-width: 100%; text-align: center; margin: 0 auto 20px;}
		#homescreen h1 + .sub-title {max-width: 70%; text-align: center; margin: 0 auto;}
		#homescreen .buttons {max-width: 440px; margin: 50px auto 0;}
}

/*------ 600 ------*/
@media all and (max-width: 767px){
	#homescreen .wrapper {padding-left: 20px; padding-right: 20px;}
		#homescreen h1 {margin-bottom: 15px;}
}

/*------ 480 ------*/
@media all and (max-width: 599px){
	#homescreen {}
		#homescreen h1 + .sub-title {max-width: 80%;}
}

/*------ 360 ------*/
@media all and (max-width: 479px){
	#homescreen .wrapper {padding-left: 15px; padding-right: 15px;}
		#homescreen h1 + .sub-title {max-width: 100%;}
		#homescreen .buttons {}
			#homescreen .buttons .button {min-width: calc(50% - 5px); font-size: 15px;}
}

/*------ 320 ------*/
@media all and (max-width: 359px){
	#homescreen {}
		#homescreen .buttons {}
			#homescreen .buttons .button {flex: 1 1 auto; min-width: 1px; margin-right: 10px;}
			#homescreen .buttons .button:last-child {margin-right: 0;}
}


/********************  ABOUT  ********************/

#about {}
#about .wrapper {}
	#about h2 {}
		#about h2 .heading-text {font-size: 125%;}
		#about h2 b {color: #10dd63;}
	#about .content {max-width: 1060px; font-size: 140%; text-align: center; margin: 0 auto;}


/*------ 1024 ------*/
@media all and (max-width: 1279px){
	#about {}
		#about .content {font-size: 125%;}
}

/*------ 768 ------*/
@media all and (max-width: 1023px){
	#about {}
		#about h2 {}
			#about h2 .heading-text {font-size: 115%;}
		#about .content {font-size: 110%;}
}


/********************  DEVELOPMENT  ********************/

#development {background: #f5f5f5;}


/********************  STEPS  ********************/

#steps {}
#steps .wrapper {}
	#steps .items {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto;}
		#steps .item {flex: 1 1 0%; min-width: 20%; max-width: 25%; background: #fff; font-size: 125%; line-height: 1.2; text-align: center; padding: 15px; position: relative;}
			#steps .item::before {content: ''; display: none; width: 100%; height: 1px; background: #d8d8d8; position: absolute; top: calc(15px + 90px / 2); right: 50%; z-index: 1;}
				#steps .item[data-fanimated="1"]::before {display: block;}
				#steps .item:nth-child(5n+1)::before {display: none;}
			#steps .item .icon-container {width: 90px; height: 90px; background: #fff; margin: 0 auto 20px; position: relative; z-index: 2;}
				#steps .item .icon {width: auto; height: auto; max-width: 70px; max-height: 70px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
					#steps .item:hover .icon {-webkit-animation: buzz-out 0.75s linear 1; animation: buzz-out 0.75s linear 1;}
				#steps .item .counter {display: block; width: 24px; height: 24px; background: #d8d8d8; border-radius: 50%; font-weight: 700; font-size: 12px; line-height: 24px; text-align: center; margin: auto 0; position: absolute; top: 0; bottom: 0; left: calc(100% - 12px);}
			#steps .item .description {padding: 15px 0; position: relative;}
				#steps .item .description::before {content: ''; display: block; width: 25px; height: 4px; background: #10dd63; border-radius: 4px;; margin: 0 auto; position: absolute; left: 0; right: 0; top: 0;}


/*------ 1024 ------*/
@media all and (max-width: 1279px){
	#steps {}
		#steps .items {}
			#steps .item {font-size: 115%; padding: 10px;}
}

/*------ 768 ------*/
@media all and (max-width: 1023px){
	#steps {}
		#steps .items {max-width: 800px; margin-bottom: -30px;}
			#steps .item {min-width: 33%; max-width: 100%; font-size: 110%; padding: 0 15px; margin: 0 0 30px;}
			#steps .item::before {display: none !important;}
				#steps .item .icon-container {width: 70px; height: 70px;}
					#steps .item .icon {max-width: 100%; max-height: 100%;}
				#steps .item .description {padding: 20px 0 0;}
}

/*------ 480 ------*/
@media all and (max-width: 599px){
	#steps {}
		#steps .items {}
			#steps .item {font-size: 100%;}
				#steps .item .icon-container {width: 55px; height: 55px;}
}

/*------ 360 ------*/
@media all and (max-width: 479px){
	#steps {}
		#steps .items {margin-bottom: -25px;}
			#steps .item {min-width: 50%; padding: 0 10px; margin-bottom: 25px;}
				#steps .item .icon-container {width: 50px; height: 50px;}
}


/********************  FEEDBACK  ********************/

#feedback {}
#feedback .wrapper {display: flex; max-width: 1280px;}
	/* Contacts */
	#feedback .contacts {display: block; flex: 0 0 auto; width: 32%; background: #252932; color: #fff; padding: 90px 20px; position: relative;}
		#feedback .contacts::before {content: ''; display: block; width: 9999px; height: 100%; background: #252932; margin: auto 0; position: absolute; top: 0; bottom: 0; right: 100%;}
		#feedback .contacts .heading {font-weight: 700; font-size: 40px; line-height: 1.2; font-family: Roboto, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 40px;}
		#feedback .contacts .phone {margin-bottom: 5px;}
		#feedback .contacts .social-links {max-width: 370px; margin-top: 20px;}
		#feedback .contacts .requisites {opacity: 0.4; margin-top: 40px;}
	/* Form */
	#feedback form {flex: 1 1 auto;}
		#feedback form::before, #feedback form::after {content: ''; display: block; width: 9999px; height: 100%; margin: auto 0; position: absolute; top: 0; bottom: 0; left: 100%;}
			#feedback form::before {background: #10dd63;}
			#feedback form::after {opacity: 0; visibility: hidden; background: rgba(0,0,0,0.7); transition: all 0.3s ease-out 0s;}
			#feedback form.disabled::after {opacity: 1; visibility: visible;}
		#feedback form .form-content {padding: 90px 20px;}
			#feedback form .form-heading {text-align: left; text-transform: uppercase; letter-spacing: 0.05em;}
			#feedback form .submit-row {display: flex; align-items: flex-start;}
				#feedback form .privacy {order: 2; flex: 1 1 auto; margin: 0 0 0 10px;}
				#feedback form .submit {order: 1; flex: 0 0 auto; margin: 0;}


/*------ 1024 ------*/
@media all and (max-width: 1279px){
	#feedback {}
		#feedback .contacts {width: 35%; padding: 60px 20px;}
		#feedback form {}
			#feedback form .form-content {padding: 60px 20px;}
}

/*------ 768 ------*/
@media all and (max-width: 1023px){
	#feedback .wrapper {flex-wrap: wrap;}
		#feedback .contacts {width: 100%; text-align: center; padding: 40px 15px;}
			#feedback .contacts::before {display: none;}
			#feedback .contacts .heading {font-size: 36px; margin-bottom: 30px;}
				#feedback .contacts .heading .break-line {display: none;}
			#feedback .contacts .social-links {justify-content: center; margin: 15px auto 0;}
			#feedback .contacts .requisites {margin-top: 30px;}
		#feedback form {flex: 0 0 auto; width: 100%;}
			#feedback form::before, #feedback form::after {display: none;}
			#feedback form .form-content {padding: 40px 15px;}
				#feedback form .form-heading {text-align: center;}
				#feedback form .submit-row {display: block;}
					#feedback form .privacy {margin: 0;}
					#feedback form .submit {margin: 20px auto 0;}
}

/*------ 600 ------*/
@media all and (max-width: 767px){
	#feedback {}
		#feedback .contacts {display: none;}
}

/*------ 320 ------*/
@media all and (max-width: 479px){
	#feedback {}
		#feedback form {}
			#feedback form .form-content {padding: 30px 10px;}
}