*{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  font-family: 'Roboto', 'san serif';
}

.main-container{
  margin:  0 auto;
  max-width: 1120px;
  min-width: 320px;
}

.header-container{
  /*border: 1px solid red;*/
  width: 100%;
  padding: 70px 32px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /*размер сетки-*/
 }

.menu-bar-item{
  display: none;
}

.menu-bar{
  display: none;
  align-items: flex-start;
  flex-direction: column;
 /* justify-content: flex-end;*/
  /*position: relative;*/
  width: 200px;
  padding: 10px 32px;
}

.img-logo{
  width: 150px;
  padding-left: 10px;
}

.head-nav{
  display: flex;
  align-items: center;
  flex-direction: row;
}
.head-nav-bar{
  display: flex;
  align-items: flex-start;
  /*justify-content: flex-start;*/
  flex-direction: column;
}
.nav-hr{
  margin: 5px;
  height: 1px;
  background: gray;
  width: 50%;
}

.head-link{
  margin: 0 7px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 3px;
}

.head-link:hover{
  color: blue;

}
.head-social{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.head-icon{
  margin: 0 7px;
}
.head-icon-bar{
  margin: 0 3px;
}
.head-social:hover,
.head-social-bar:hover{
  color: blue;
}
.head-icon:hover,
.head-icon-bar:hover{
  color:#000;
}

/*-baner-*/

.baner{
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: end;
  padding: 32px;
}

.img-baner{
  width: 100%;
}

.baner-right{
  display: grid;
  padding-left: 30px;
  grid-template-areas: "header ."
  "latest insta";
}
.baner-img-right{
  display: flex;
  align-items: flex-end;
}
.baner-h1{
  font-size: 36px;
  width: 280px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding: 10px 0;
  text-transform: uppercase;
  grid-area: header;
}

.img-latest{
  width: 230px;
}

.baner-right-1{
  grid-area: latest;
}

.baner-right-2{
  grid-area: insta;
}
.baner-img-right{
  position: relative;
  display: flex;
  align-items: flex-start;

}
.a-latest{
  position: absolute;
  left: 30px;
  bottom: 25px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;

}

/*subscribe*/
.subscribe{
  margin: 32px;
  background: rgb(63, 121, 66);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 50px;
}

.sub-h2{
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 30px;
}
.sub{
  height: 50px;
  padding: 15px;
}

.sub-mail{
  width: 240px;
}
.sub-btn{
  width: 170px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #EBEEEF;
  border: none;
  cursor: pointer;
}
/*-intra*/
.intro{
  padding: 32px 72px;
  display: grid;
  grid-template-columns: 4fr 6fr;
}
.intro-header{
  text-transform: uppercase;
  font-size: 32px;
  margin: 16px;
}
.intro-p{
  font-weight: lighter;
  text-align: justify;
}

/*-blog*/
.blog{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.blog-item{
  padding: 24px;
}
.blog-img{
  width: 100%;
}
.blog-img-cont{
  position: relative;
}
.blog-img-des{
  position: absolute;
  bottom: -70px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.bl-des{
  height: 150px;
  width: 150px;
  background: #ebeeef86;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 26px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
.blog-des-cont{
  margin-top: 90px;
  font-weight: lighter;
  letter-spacing: 1px;
  text-align: justify;
}

.under{
  background-color: #000;
  width: 45px;
  height: 2px;
  margin: 3px auto;
  border: none;
}

/*-inta*/
.insta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.insta-item{
  padding: 24px;
}
.insta-it-img{
  width: 100%;
}
.insta-desc{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px;
}
/*-footer*/
.foot{
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  border-top: 2px solid black;
  padding: 40px;
}
.foot-img{
  width: 150px;
  margin-bottom: 40px;
}
.foot-p{
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}