@import url('https://fonts.googleapis.com/css?family=Arsenal:400,400i,700,700i&subset=cyrillic,cyrillic-ext');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');

:root {
	--base-width: 1500px;
	--header-height: 5vmin;
	--footer-height: 10vmin;
	--line-height: .4vmin;
	--bg-color: #26272b;
	--main-color: #ebb666;
	--main-color-dark: #887455;
}

::-webkit-scrollbar {
    width: .5em;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	background-color: var(--main-color-dark);
}
 
::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  outline: 1px solid var(--main-color-dark);
}

/* Change Autocomplete styles in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none 0;
  -webkit-text-fill-color: var(--main-color); 
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  color: var(--main-color); 
  font-size: 1.2em;
}

* { box-sizing: border-box; outline: 0; }

body, html {
	margin: 0; 
	padding: 0;
	background: url(images/bg.jpg) repeat; 
	font-size: 1.2em;
	min-width: 360px;
}

body { 
	font-size: .7em; 
	position: relative;
}

body, input, textarea, button {
	/* font-family: 'Roboto', 'Arsenal', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  */
	font-family: 'Roboto'; 
	color: var(--main-color);
}

a { color: #f0c581; text-decoration: underline; }
a[href^=tel] { color: inherit!important; text-decoration: none!important; }

h1>a, h2>a, h3>a, h4>a, h5>a, h6>a { text-decoration: none; }
p { margin: .3em 0; }

.bold { font-weight: bold; }

/* #header, #footer, #content { max-width: var(--base-width); margin: 0 auto; width: 100%; } */
#header, #footer, #content section, #content .testimonial { padding-left:30px; padding-right: 30px; margin-top: 30px; margin-bottom: 30px;  }
#footer { margin-top: 0; margin-bottom: 0;}


#header { 
	text-align: left; 
	/* padding: 4vmin 0 2vmin 10vmin; 
	height: var(--header-height);  */
	padding-top: 4vmin;
	padding-bottom: 2vmin;
	border-bottom: var(--main-color) solid 3px;
	position: relative; 
}

#header #top-logo { margin-left: 14vmin; }

#content { padding-bottom: 2vmin; }

#footer { 
	text-align: center; 
	padding-top: 3vmin;
	padding-bottom: 3vmin;
	border-top: var(--main-color) solid 3px;
	position: relative; 
	color: #616267;
}

#privacy {
	line-height: 1.4em;
	color: #ffffff;
	text-align: justify;
}

#privacy h1 {
	text-align: center;
	font-size: 2.5em;
}

#privacy h1, #privacy h2 { 
	color: var(--main-color);
 }

#intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

#intro #intro-video { flex-shrink: 0; }
#intro #intro-video video { max-width: 1000px; width: 100%; }
#intro #intro-order { 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
#intro #intro-order div { margin-top: 1em; }	


#intro-site-types, .feature, .testimonial-quote { color: white; }
#intro-slogan h1, .feature h2 { color: var(--main-color); }

#intro-order div { text-align: center; }

#intro-slogan { font-size: 3em; text-transform: uppercase; }
#intro-slogan h1 { margin: 0; padding: 0; font-size: 1.4em; font-weight: normal; }

#intro-site-types { line-height: 1.6em; font-size: 1.4em; }
#intro-order-btn {
	padding: .8em 2em;
	font-size: 1.7em;
	text-transform: uppercase;
	color: #28292d;
	background-color: var(--main-color);
	border-radius: 10px;
	cursor: pointer;
	border: none 0;
	min-width: 360px;
}

#description {
	font-family: 'Roboto';
	text-align: justify;
	font-size: 1.05em;
	line-height: 160%;
	color: #ffffff;
}

#description p {
	margin: .8em 0;
}

#motivation, #what-to-do, #result {
	font-family: 'Arsenal';
	text-align: center;
	font-size: 2.4em;
	color: #65d6e3;
}

#result { color: var(--main-color); }
#result .alt { color: #65d6e3; }

#what-to-do {
	font-size: 2.1em;
	color: var(--main-color);
}

#features {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#features .feature {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	max-width: 750px;
}

#features .feature h2 { 
	width: 1.2em; 
	height: 1.2em;
	border-radius: .6em;
	font-family: 'Arsenal';

	flex-shrink: 0;
	padding: 0;
	margin: 0 .3em 0 .4em;
	font-size: 3em;
	line-height: 1.1em; 
	font-weight: normal; 
	color: #ffffff; 
	text-align: center; 
	border: solid 2px var(--main-color); 
	overflow: hidden; 
	text-align: center;
}

#features .feature p { line-height: 1.6em; font-size: 1.3em; text-align: left; }

/*
#features .feature { width: 30%; text-align: center; }
#features .feature h2 { font-size: 3em; font-weight: normal; padding: 0; margin: 0 0 .5em 0; }
#features .feature h2:before { content: "#"; font-size: 1.5em; position: relative; top: .15em; }
*/

#testimonials {
	/* padding-top: 30px;
	padding-bottom: 30px; */
	padding: 0;
	margin-top: 0px; 
	margin-bottom: 0px;
}

#testimonials .testimonial {
	background: url(images/bg-tstm.jpg) no-repeat center center/100% 100%; 
	margin-bottom: 3em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 2em;
	padding-bottom: 2em;
}

#testimonials .testimonial-image img { max-width: 855px; width: 100%; }
#testimonials .testimonial-quote { font-family: 'Arsenal'; font-size: 1.0em; padding: 1em 0 0 0; text-align: justify; max-width: 1000px; }
#testimonials .testimonial-quote>p:first-child { text-indent: 2em; }
#testimonials .testimonial-quote:before { content: '“'; font-size: 4em; line-height: 0; color: var(--main-color); font-weight: bold; position: relative; top: 20px; }
#testimonials .testimonial-quote .tstm-author { color: var(--main-color); margin-top: 1em; font-weight: bold; }

/* Contact form */
#contact-form {
	background: rgba(0, 0, 0, .2);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	
	visibility: hidden;
	opacity: 0;

	transition: opacity, visibility;
	transition-duration: 1s;
}

#contact-form.active {
	visibility: visible;
	opacity: 1;
}

#contact-form h1 { 
	padding: 0;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.9em;
}

#contact-form > form {
	position: absolute;
	left: 50%;
	top: 30vh;
	transform: translate(-50%, 0);

	padding: 20px 30px;
	text-align: center;
	width: calc(100% - 20px);
	max-width: 700px;
	max-height: 100vh;
	overflow: auto;
	background: rgba(0, 0, 0, .9);

	-webkit-box-shadow: 0px 0px 34px 10px rgba(0,0,0,0.8); 
	box-shadow: 0px 0px 34px 10px rgba(0,0,0,0.8);
}

#contact-form > form #contact-submit {
	cursor: pointer;
	border: none 0;

	padding: 10px 30px;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 700;
	border: solid 1px var(--main-color-dark);
	color: var(--main-color-dark);
	background: none;

	-webkit-box-shadow: 0px 0px 9px -1px #000000; 
	box-shadow: 0px 0px 9px -1px #000000;

	border-radius: 9px;

	transition: background, border, color;
	transition-duration: .7s;
}

#contact-form > form #contact-submit:hover {
	border-color: var(--main-color);	
	color: var(--main-color);	
}

#contact-form > form > div {
	margin: 30px 0;
	padding: 0;
	position: relative;
	/* border: solid 1px green; */
}

#contact-form > form label {
	position: absolute;  
	left: 4px;
	top: 8px;
	font-size: 1.2em;
	color: var(--main-color-dark);
	transition: top, left, font-size;
	transition-duration: .6s;
	z-index: -1;
}

#contact-form > form input, #contact-form > form textarea {
	width: 100%;
	margin: 0;
	padding: 8px 4px;
	border: solid 0px var(--main-color-dark);
	border-bottom-width: 1px; 
	background: none;
	/* background: linear-gradient(to right, var(--main-color) 0%, var(--main-color-dark) 0%) transparent left bottom no-repeat;
	background-size: 100% 1px; */
	outline: none 0;

	color: var(--main-color); 
	font-size: 1.2em;

	transition: background-color;
}

#contact-form > form #contact-result {
	color: darkgreen;
	display: none;
	text-align: center;
}

#contact-form > form #contact-result.error {
	color: rgba(255, 0, 0, 0.6);
}

#contact-form > form textarea {
	resize: none;
	height: 150px;
	font-size: 1em;
}

#contact-form > form [data-value] + label, #contact-form > form :focus + label {
	font-size: .8em;
	top: -1em;
}

#contact-form > form [data-value], #contact-form > form :focus {
	border-color: var(--main-color);
	color: var(--main-color); 
}

#contact-form > form :invalid, #contact-form > form :invalid + label {
	color: rgba(255, 0, 0, 0.6);
	border-color: rgba(255, 0, 0, 0.6);
}

#contact-form > form [data-not-visited]:invalid + label, #contact-form > form [data-not-visited]:invalid, #contact-form > form :focus:invalid + label
{
	border-color: var(--main-color-dark); 
	color: var(--main-color-dark); 
}

#contact-form > form :focus:invalid
{
	border-color: var(--main-color);
	color: var(--main-color); 
}


.btn { display: inline-block; padding: .5em 1em; background: #aaa; color: #fff; text-decoration: none; }
.btn:hover { background: #999; }

@media all and (min-width: 560px) {
	body { 
		font-size: 1em; 
	}

	#intro-order-btn {
		font-size: 1.7em;
	}
}

@media all and (min-width: 1260px) {
	#features {
		flex-direction: row;
		justify-content: space-between;
	}
	
	#features .feature {
		width: 33%;
	}	
}	

@media all and (min-width: 1450px) {
	#intro {
		flex-direction: row;
		justify-content: space-between;
	}

	#intro #intro-order {
		margin-top: 0;
		height: 445px;
	}

	#intro #intro-order div { 
		margin-top: 0;
	}	

	#intro #intro-video {
		margin-right: 2em; 
	}

	#testimonials .testimonial {
		flex-direction: row;
		justify-content: space-between;
	}

	#testimonials .testimonial-image { width: 60%; }
	#testimonials .testimonial .testimonial-quote { width: 40%; padding: 0 0 0 2em;  }
	#testimonials .testimonial-alt .testimonial-quote { width: 40%; padding: 0 2em 0 0; order: -1; }
	#testimonials .testimonial-alt .testimonial-quote .tstm-author { text-align: right; }
		
}	

@media all and (min-width: 1500px) {
	#header, #footer, #content section, #content .testimonial { 
		padding-left: calc(30px + 50% - var(--base-width) / 2);
		padding-right: calc(30px + 50% - var(--base-width) / 2);
    }

	#content #testimonials { padding-left: 0; padding-right: 0; }

	/* body { font-size: 1.2em; } */
}	 

	/*body > * { padding-left: calc(50% - 650px); padding-right: calc(50% - 650px); }*/