@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Suez+One&display=swap');

*{
	margin: 0;
	padding: 0;
	outline: none;
}

body,html{
	width: 100%;
	height: 100%;
}

body{
	background-color: #fafafa;
	font-family: Trebuchet MS, Helvetica;
}
/* Шапка */
header{
	width: 100%;
	padding: 10px 0.5% 0px 0.5%;
	background: transparent;
	float: left;
	position: fixed;
}

header #logo{
	color: #fff;
	cursor: pointer;
}

header #logo span {
	font-size: 1.7em;
	line-height: 45px;
	margin-left: 40px;
	font-family: 'Suez One', serif;
}

@media (min-width: 701px) {
	#logo{
		float: left;
		width: 30%;
		font-size: 1.1em;
	}

	#about {
		float: right;
		width: 67%;
	}
}

@media (max-width: 700px) {
	#logo{
		margin-top: 15px;
		width: 100%;
		font-size: 1.5em;
	}

	#about {
		float: left;
		width: 100%;
	}
}

#about{
	text-align: center;
	font-size: 1em;
	line-height: 40px;
	margin-bottom: 10px;
}

#about > a {color: #fff;}

#about > a:hover {
	color: #b0b0b0;
	text-decoration: underline;
}

#about > a:not(:last-child) {
	margin-right: 7%;
}

/* Стили для фиксированной шапки */
.fixed {
	z-index: 5000;
	background-color: #fff;
	border-bottom: 1px solid silver;
}

header.fixed #logo {
	color:#343434;
}

.fixed #about a{color:#343434;}
.fixed #about a:hover{color:#7c7c7c;}



/* Главный блок на сайте */

#top{
	width: 100%;
	height: 1000px;
	background-image: url(bg.jpg);
	background-blend-mode: multiply;
	background-color: #005ba7;
	background-size: cover;
	text-align: center;
	color: #fff;
}

@media (max-width: 1000px) and (min-width: 651px) {
	#top{
		font-size: 2em;
	}
}
@media (min-width: 1001px) {
	#top{
		font-size: 3em;
		height: 600px;
	}
}

@media (max-width: 650px) {
	#top{
		font-size: 1.3em;
		padding-top: 50%;
		height: 5000px;
	}
}
#top h1{
	padding-top: 20%;
}

#top h3{
	color: #ccc;
}

/* блок с возможностями */

#main{
	float: left;
	background-color: #f6f6f6;
	border-top: 2px solid silver;
	color: #484848;
	font-size: 1.3em;
	height: 220px;
}



@media (min-width: 1401px) {
	#main{
		padding: 100px 20%;
		width: 60%;
	}
}

@media (max-width: 1400px) {
	#main{
		padding: 100px 10%;
		width: 80%;
	}
}

@media (max-width: 700px) {
	#main div{
		width: 98% !important;
		margin-bottom: 20px;
	}
}

#main div{
	width: 48%;
	margin-right: 2%;
	float: left;
}

#main h2{font-size: 3em}
#main span{color: #a0a0a0}

/* блок с преимуществами */

#overview{
	float: left;
	background-image: url(https://c0.wallpaperflare.com/preview/492/652/36/lines-of-html-codes.jpg);
	background-blend-mode: multiply;
	background-color: #4f1c75;
	background-size: cover;
	background-attachment: fixed;
	cursor: pointer;
	padding: 100px 0;
	width: 100%;
	text-align: center;
	color: #fff;
}

#overview h2{font-size: 4em}
#overview h4{color: #ccc; font-size: 1.5em}

#overview .img {
	float: left;
	width: 30%;
	margin-right: 5%;
	margin-top: 50px;
}

#overview .img:nth-child(odd) {
	margin-left: 18%;
}

#overview img{
	background: #fafafa;
	padding: 5px;
	border:2px solid silver;
	border-radius: 10px;
	float: left;
	width: 100%;
	max-width: 500px;
}

#overview span{
	float: left;
	width: 100%;
	font-size: 2em;
	margin-top: 10px;
}

@media (max-width: 700px) {
	#overview img{
		width: 80% !important;
		margin-left: 0 !important;
		margin-left: 10% !important;
	}
}

/* Блок с контактами */

#contacts {
	width: 100%;
	float: left;
	padding-bottom: 40px;
	padding-top: 70px;
	border-top: 4px solid #ccc;
	background: #f4f4f4;
}

h1, h2, h3, h4, h5{
	font-family: 'Roboto Slab', serif;
	font-weight: lighter;
}

#contacts h5{font-size: 3em; color: #4f4f4f}

#form_input {
	margin-top: 15px;
	width: 35%;
	margin-left: 38%;
	font-size: 1.1em;
}

#form_input label{
	color: #505050;
	cursor: pointer;
	font-size: 1.4em;
	font-family: 'Roboto Slab', serif;
}

#form_input label > span{
	color: #e87e7e;
}

#form_input input, #form_input textarea {
	margin-bottom: 10px;
	width: 70%;
	padding: 10px 2%;
	border-radius: 7px;
	border:2px solid silver;
	font-size: 0.9em;
	color: #4a4a4a; 
}


#form_input input:focus, #form_input textarea:focus {
	border-color: #333;
}

.btn{
	float: left;
	border-radius: 5px;
	padding: 5px 9px;
	font-size: 1.2em;
	background-color: #ec6550;
	text-shadow: #454545 0 0 2px;
	cursor: pointer;
	color: white;
	font-family: 'Roboto Slab', serif;
}

.btn:hover{
	background-color: #c15443;
}
/* Вопросы и ответы */

#faq{
	background-color: #fff;
	border-top: 2px dashed #e4e3e3;
	width: 100%;
	float: left;
	padding-top: 70px;
	padding-bottom: 70px;
}

#faq div {
	width: 25%;
	margin-left: 6%;
	float: left;
}

@media (min-width: 801px) {
	#faq div{
		width: 25%;
		margin-left: 6%;
		float: left;
	}
}

@media (max-width: 800px) {
	#faq div{
		width: 80%;
		margin-left: 10%;
		float: left;
	}
}

#faq .title{
	font-weight: lighter;
	color: #a3a0ad;
	margin-bottom: 20px;
	font-size: 2.2em;
}

#faq .heading{
	color: #7d7d7d;
	font-size: 1.3em;
	font-weight: bold;
}

#faq p{
	font-family: Arimo, Helvetica, sans-serif;
	-webkit-font-smoothing:antialiased;
	color: #4a4a4a;
	font-size: 0.95em;
	margin-bottom: 40px;
}

.dsc {
	color: #ccc;
	font-style: italic;
	font-size: 0.9em;
	margin-top: 25px;
	margin-left: 15px;
}