@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Suez+One&display=swap');

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

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

body{
  background-color: #fafafa;
  font-family: 'Trebuchet MS',  Helvetica, sans-serif;
}



/*ШАПКА сайта*/
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;
}

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

#about > a{
color:#fff;
}

#about > a:hover{
  color:#aeabab;
  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: 100%;
  background-image: url(https://avatarko.ru/img/kartinka/7/nyasha_6218.jpg);
  background-blend-mode: multiply ;/*налож.несколь.слоев*/
  background-color: #2e3a44;
  background-size: cover;
  text-align: center;
  color: white;
  font-size: 3em;
}

#top h1{
padding-top: 20%;
}

#top h3{
  color: antiquewhite;
}

/*Блок MAIN*/
#main{
  padding:100px 20%;
  width: 60%;
  float: left;
  background-color: #f6f6f6;
  border-top:2px solid silver;
  color:#484848;
  font-size: 1.3em;
}

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

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

/*Блок info*/
#info{
  float: left;
  background-image: url(https://img3.akspic.ru/attachments/originals/9/1/3/3/4/143319-chernaya_dyra-fioletovyj-nochnoe_nebo-galaktika-astronomiya-4992x3648.jpg);
  background-blend-mode: multiply;
  background-size: cover;
  background-color: #4f1c75;
  background-attachment: fixed;
padding: 100px 0;
width: 100%;
text-align: center;
color: #fff;
}


#info h2{
  font-size: 3em;
}
#info h4{
  color:#ccc;
  font-size: 1.5em;
}

#info .img{
float: left;
width: 30%;
margin-right: 5%;
margin-top: 50px;;
}
#info img{
  background: #fafafa;
  padding: 5px; 
  border:2px solid silver; 
width: 85%;

max-width: 400px;  

}

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

/*каждый нечетный*/
#info .img:nth-child(odd){
  margin-left: 18%;
}


/*Блок КОНТАКТЫ*/

#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-radius: 2px solid silver;
  font-size: 0.9em;
  color: #4a4a4a;
}
#form_input input, #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*/
#faq{
  background-color: #fff;
  border-top:2px dashed #e4e3e3;
  width: 100%;
  float: left;
  padding-top: 70px;
  padding-bottom: 70px;
  
}
#faq div{
  width: 40%;
  margin-left: 6%;
  float: left;
}

#faq .title{
  font-weight: lighter;
  color: #a3a0ad;
  font-size: 2em;
  
}

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


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

/*МЕДИА-ЗАПРОСЫ.Адаптация сайта*/

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


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

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

@media(max-width: 650px){
  #top{
    font-size: 1em;
    padding-top: 50%;
    height: 500px;
  }
}

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

  #about{
    float: right;
    width:  67%;
  }
  #faq div{
    width:40%;
    margin-left:10%;
    float:left;
  }

}

@media(max-width: 701px){
  #info .img{
width: 80%!important;
margin-right: 0!important;
margin-left: 10%!important;
  }

  #logo{
  margin-top: 15px;
  width: 100%;
  font-size: 1.5em;
  }

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

  #main div{
width: 98% !important;
margin-bottom: 20px;
  }

  #faq div{
    width:80%;
    margin-left:10%;
    float:left;
  }

}