/* Font families */
@font-face {
  font-family: 'Lato_bold';
  src: url('../assets/fonts/Lato-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Lato_black';
  src: url('../assets/fonts/Lato-Black.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Lato_regular';
  src: url('../assets/fonts/Lato-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyriadPro_regular';
  src: url('../assets/fonts/MyriadPro-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MavenPro_bold';
  src: url('../assets/fonts/MavenPro-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'MavenPro_regular';
  src: url('../assets/fonts/MavenPro-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
}
body {
   background-color: #fff;
}

.wrapper{
  margin: 0 auto;
  width: 1020px; 
  display: flex;
  flex-direction: column;
} 
.header {
  position: relative;
  display: flex;
  justify-content: center;
  height: 63px;
  background-color: #323232;
}
.header:before {
  content: "";
  position: absolute;
  width: 95%;
  top: 73px;
  border-bottom: 1px solid #e4e9eb;
  z-index: -1;
}
.logo {
  top: 9px;
  width: 63px;
  height: 55px;
  position: relative;
}
.triangle {
  margin: auto;
  content: '';
  width: 0;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
  border-top: 25px solid #323232;
  bottom: -27px;

}
nav {
  display: flex;
}
nav a{
  margin-top: 10px;
  margin-left: 0px;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  align-self: center;
  font-family: 'Lato_regular', 'AdobeInvisFont', 'MyriadPro_Regular';
}
.nav__dot{
  color: #fff;
  display: inline-block;
  margin-top: 24px;
  height: 10px;
}
nav a:hover{
  color: #2eb398;
}
.nav-left {
width: 150px;
justify-content: space-around;

}
.nav-center {
margin: 0 30px;
}
.nav-right {
  width: 150px;
  justify-content: space-around;
}
.portfolio {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 53px;
  margin-bottom: 3px;
}
.row {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}
.row-top{
  margin-top: 0px;
}
.row-top:before, .row-bottom:before {
  content: "";
  position: absolute;
  top: 62px;
  left: 99px;
  height: 103px;
  border-left: 1px solid #e4e9eb;
}
.row-top:after, .row-bottom:after {
  content: "";
  position: absolute;
  top: 62px;
  right: 99px;
  height: 103px;
  border-left: 1px solid #e4e9eb;
}

.row-center {
  margin-top: -62px;
}
.row-bottom {
  margin-top: -62px;
}
.hexagon{
  width: 180px;
  height: 210px;
  margin: 10px;
  transform: rotate(120deg);
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
  position: relative;
}
.hexagon-central {
  /* top: -48px;
  right: 97px; */
}
.hex-layer-1{
  width: 100%;
  height: 100%;
  transform: rotate(-60deg);
  overflow: hidden;
}
.hex-layer-2{
  width: 100%;
  height: 100%;
  background: #ccc3;
  overflow: hidden;
  visibility: visible;
  background-repeat: no-repeat;
  background-position: 50%;
  transform: rotate(-60deg);

}
/* Controls */

.controls{
  position: relative;
  display: flex;
  width: 60px;
  height: 6px;
  margin-left: 27px;
  margin-top: 48px;
  margin-bottom: 20px;

}
.controls:after{
  content: "";
  position: absolute;
  width: 962px;
  top: 17px;
  border-bottom: 1px solid #e4e9eb;
  z-index: 22;
}
.slider-control {
  background-color: #ddd2c5;
  width: 6px;
  height: 6px;
  margin-left: 3px;
  z-index: 100;
}
.slider-control:hover {
  background-color: #8b8784;
}
/* About */
.about {
  height: 201px;
  display: flex;
  padding: 70px 99px;
  background-color: #2eb398;
  position: relative;
}
.about:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 99px;
  height: 92%;
  border-left: 1px solid #219d84;
}
.about:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 99px;
  height: 92%;
  border-left: 1px solid #219d84;
}

.about h1 {
  margin-top: 0px;
  color:#d8fcf5;
  font-size: 30px;/* Приближение из-за подстановки шрифтов */
  font-weight: 400;
}
.about h3 {
  color:#1f816d;
  font-size: 18px;/* Приближение из-за подстановки шрифтов */
  font-weight: 400;
  margin-top: 10px;
}
.about p {
  margin-top: 18px;
  margin-right: 21px;
  color:#d7fcf5;
  font-size: 12px;/* Приближение из-за подстановки шрифтов */
  line-height: 20px;
  font-weight: 400;
  text-align: justify;
  font-family: 'Lato_regular', 'AdobeInvisFont', 'MyriadPro_Regular';

}
.avatar {
  width: 180px;
  height: 206px;
  margin: -2px 20px;
}
.about-text {
display: flex;
flex-direction: column;
font-size: 12px;
line-height: 16px;
}
.socials {
  display: flex;
  align-self: flex-end;
  margin-top: 40px;
  margin-right: 21px;
}
.socials a:hover {
  transform: scale(1.1);
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* Get in touch */
.get-in-touch {
  position: relative;
  padding: 20px 80px;
  display: flex;
  flex-direction: row;
  height: 524px;
  background-color: #323232;
}
.get-in-touch:before {
  content: "";
  position: absolute;
  width: 94%;
  left: 34px;
  top: 13px;
  border-bottom: 1px solid #2b2b2b;
}
.get-in-touch:after {
  content: "";
  position: absolute;
  width: 94%;
  left: 34px;
  bottom: 10px;
  border-bottom: 1px solid #2b2b2b;
}
.get-in-touch h2 {
  color:#e0e0e0;
  font-size: 30px;/* Приближение из-за подстановки шрифтов */
  font-weight: 400;
  font-family: 'MavenPro_regular', 'AdobeInvisFont', 'MyriadPro_Regular';
}
.second-header {
  font-family: 'MavenPro_regular', 'AdobeInvisFont', 'MyriadPro_Regular';
  margin-top: 0px;
  font-weight: 300;
  margin-bottom: 21px;
  font-size: 16px;
  color:#bebebe;
}
.get-in-touch p {
  margin-top: -4px;
  margin-bottom: 20px;
  color:#bebebe;
  font-size: 12px;/* Приближение из-за подстановки шрифтов */
  font-weight: 400;
  font-family: 'Lato_regular', 'AdobeInvisFont', 'MyriadPro_Regular';
}

.get-in-touch__black{
  font-family: 'Lato_black';
}
.get-in-touch-form, .contacts{
  display: flex;
  flex-direction: column;
  color: #d7d7d7;
}
.get-in-touch__aside {
  width: 24.5%;
  margin-top: 115px;
  line-height: 20px;
  text-align: justify;
  margin-left: 0px;
  margin-right: 42px;
  padding-right: 0px;
}
.get-in-touch-form {
  margin: 40px 20px 40px 40px; 
  width: 80%;
}
.contacts p:first-child{
  margin-bottom: 30px;
}
.contacts p {
  margin-bottom: 10px;
  font-family: 'Lato_bold', 'AdobeInvisFont', 'MyriadPro_regular';
}
.contacts__contacts{
  margin-top: 28px;
  line-height: 10px;
  margin-bottom: -5px;

}
.contacts__contacts span {
  margin-right: 5px;
}
.get-in-touch-form input, textarea{
  box-sizing: border-box;
  background-color: #454545;
  border: none;
  margin: 0px 0px 16px 0px;
  padding: 10px;
  font-size: 12px;
}
textarea::-webkit-input-placeholder { 
  padding: 0px 0px; 
  font-family: 'Lato_regular', 'AdobeInvisFont', 'MyriadPro_regular', sans-serif; font-size: 12pt; 
  color: rgba(190, 190, 190, 255);
  font-size: 12px;
}
input::-webkit-input-placeholder {
  font-family: 'Lato_regular', 'AdobeInvisFont', 'MyriadPro_regular', sans-serif; 
  color: rgba(190, 190, 190, 255);
}
.form-btn {
  align-self: flex-end;
  width: 90px;
  height: 37px;
  margin-top: 5px;
  margin-right: 1px;
  border: none;
  padding: 5px;
  background-color: #2eb398;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(215, 252, 245, 255);
  text-align: center;
}
.form-btn:hover {
  cursor: pointer;
}

footer {
  height: 43px;
  background-color: #222;
}
footer p {
  font-family: 'MavenPro_regular', 'AdobeInvisFont', 'MyriadPro_regular';
  color: #454545;
  font-size: 12px;
  font-weight: 400;
  margin-left: 40px;
  margin-top: 13px;
}