/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
:focus,
:active {
  outline: none;
}
a:focus,
a:active {
  outline: none;
}
nav,
footer,
header,
aside {
  display: block;
}
html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
  font-family: inherit;
}
input::-ms-clear {
  display: none;
}
button {
  cursor: pointer;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
a,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
::selection {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}
/*--------------------*/

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Work sans", sans-serif;
}
header {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/home-7.jpg") center;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
.dark {
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 15, 0.6);
  position: absolute;
  z-index: 2;
}
.menu {
  width: 100%;
  position: absolute;
  padding: 1.5em 0;
  opacity: 1;
  transition: 1s opacity;
  z-index: 3;
  -webkit-transition: 1s opacity;
  -moz-transition: 1s opacity;
  -ms-transition: 1s opacity;
  -o-transition: 1s opacity;
}
.wrapper {
  width: 80%;
  max-width: 1920px;
  margin: 0 10%;
  padding: 0 15px;
}
.menu_box {
  padding: 1em 0;
}
.logo {
  float: left;
}
.logo img {
  height: 35px;
}
.mobile_logo{
  float: left;
  display: none;
}
.mobile_logo img{
  height: 35px;
}
#dark_logo {
  display: none;
}
#light_logo {
  display: block;
}
.main-menu {
  float: right;
  padding-top: 15px;
}
.menu_list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.menu_list li {
  text-transform: uppercase;
}
.menu_list li a {
  color: #bfbfbf;
  font-size: 1rem;
  margin: 0 1em;
  font-weight: 500;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.menu_list li a:hover {
  color: #fff;
}
.fixed .menu_list li a:hover {
  color: #000;
}
.fixed {
  position: fixed;
  background: #fff;
}

.mobile_social {
  display: none;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.mobile_social_box {
  text-align: center;
  padding: 5em 0;
}
.mobile_social_list ul {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
.mobile_social_list ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  margin: 0 10px;
}
.mobile_social_list li a {
  font-size: 1.3rem;
  color: #b8b8b8;
}

.banner {
  position: relative;
  width: 80%;
  height: 100%;
  margin: 0 10%;
  padding: 0 15px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  color: #fff;
  z-index: 2;
}
.banner_box {
  margin-top: -10em;
  text-align: center;
}
.banner_title h2 {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.banner_text {
  text-align: center;
  margin: 1.2rem 0;
}
.banner_text h1 {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  font-weight: 600;
}
.banner_text em {
  font-weight: 400;
}
.download {
  padding-top: 3.5em;
  text-transform: uppercase;
}
.download a {
  padding: 1.3em 2.3em;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: #252525;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.download a:hover {
  background: #444;
}

.down_btn {
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 50px;
  height: 50px;
  left: 50%;
  bottom: 2.5em;
  text-align: center;
  margin-left: -1.5em;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  opacity: 0.5;
  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -o-transition: 0.6s;
  z-index: 4;
}
.down_btn a {
  margin-top: -2px;
  color: #fff;
  text-align: center;
}
.down_btn a span:before {
  content: "\e688";
  font-family: "Pe-icon7";
  font-size: 2rem;
}
.down_btn:hover {
  cursor: pointer;
  opacity: 1;
}
/* Header end */
/* About start */
.about {
  width: 100%;
  background: #fff;
}
.about_box {
  display: -webkit-box;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  margin: 5.5em 0 4em 0;
}
.about_title {
  text-align: center;
  margin-bottom: 1.5em;
}
.about_title h2 {
  font-family: "Playfair Display", serif;
  color: #171717;
  font-size: 3rem;
  font-weight: 700;
}
.about_text {
  width: 70%;
  text-align: center;
  margin: 0 15% 1.5em 15%;
  margin-bottom: 1.6rem;
}
.about_text p {
  line-height: 1.6;
  font-size: 1.1rem;
  color: #5f5f5f;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.about_img {
  text-align: center;
}
/* About end */
/* Features start */
.features {
  width: 100%;
  background: url("../assets/images/bg-pattern.jpg") center;
  background-size: cover;
  background-repeat: no-repeat;
}
.features_box {
  padding: 6em 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  flex-wrap: wrap;
}
.features_card {
  color: #fff;
  width: 25%;
  padding: 15px;
}
.features_card_icon {
  float: left;
  margin-right: 10px;
}
.features_card_icon span {
  font-family: "Pe-icon7", serif;
  font-size: 3.3em;
  font-weight: 500;
}
.pe-7s-portfolio:before {
  content: "\e622";
}
.pe-7s-clock:before {
  content: "\e66b";
}
.pe-7s-star:before {
  content: "\e611";
}
.pe-7s-like:before {
  content: "\e642";
}
.features_card_text {
  font-weight: 500;
}
.features_card_text h4 {
  font-size: 1.2rem;
  line-height: 1.65;
}
.features_card_text p {
  text-transform: uppercase;
  font-size: 1rem;
}
/* Features end */
/* Projects start */
.projects {
  width: 100%;
  background: #fff;
}
.projects_title {
  width: 60%;
  margin: 5em 20% 4em 20%;
  text-align: center;
}
.projects_title h5 {
  font-family: "Playfair Display", serif;
  color: #171717;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1em;
}
.projects_title p {
  line-height: 1.6;
  font-size: 1.1rem;
  color: #5f5f5f;
  font-weight: 400;
}
.projects_box {
  width: 100%;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5em;
}
.project_card {
  position: relative;
  width: 33.3%;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.project_card:hover .project_text {
  opacity: 1;
}
.project_text:hover .project_title {
  -webkit-animation: move 1s;
  animation: move 1s;
  opacity: 1;
  transition: 2s ease-in-out;
  -webkit-transition: 2s ease-in-out;
  -moz-transition: 2s ease-in-out;
  -ms-transition: 2s ease-in-out;
  -o-transition: 2s ease-in-out;
}
.project_text {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
  cursor: pointer;
}
.project_dark {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.project_title {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  opacity: 0;
  text-align: center;
  color: #fff;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}
.project_title h6 {
  font-family: "Playfair Display", serif;
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 1.2em;
}
.project_title p {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}

.project_img a {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.project_img div {
  height: 375px;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.project_img img {
  height: 100%;
  width: 100%;
}
/* Projects end */
/* Contact start */
.contact {
  width: 100%;
  position: relative;
  background: #f7f7f7;
}
.contact_box {
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 6em 0;
}
.contact_box_text {
  width: 65%;
  padding-right: 2em;
}
.contact_text {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}
.contact_text h6 {
  font-family: "Playfair Display", serif;
  color: #171717;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1em;
}
.contact_text p {
  letter-spacing: 0.004em;
  font-size: 1em;
  color: #5f5f5f;
  line-height: 1.65;
  margin-bottom: 1.5em;
}
.contact_text_list ul li {
  color: #5f5f5f;
  line-height: 1.65;
  font-size: 1.1em;
  padding-bottom: 10px;
}
.contact_text_list ul li strong {
  color: #171717;
  padding-right: 10px;
}
.contact_box_form {
  width: 100%;
  position: relative;
}
.contact_box_form input,
textarea {
  padding: 1.2em 1.5em;
  font-size: 0.9rem;
  font-weight: 400;
  color: #5f5f5f;
  line-height: 1.2;
  background: #fff;
  resize: vertical;
  border: 0;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}
.contact_box_row_first {
  display: -webkit-box;
  display: flex;
  margin-bottom: 2em;
}
.contact_box_row_first input {
  width: 50%;
}
.contact_box_row_first input:nth-child(1) {
  margin-right: 5%;
}
.contact_box_row_second {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}
.contact_box_row_second input {
  width: 100%;
  margin-bottom: 2em;
}
.contact_box_row_second textarea {
  min-height: 150px;
  height: 150px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 1.5em;
}
.btn_message {
  margin-top: 2.5em;
  text-transform: uppercase;
}
.btn_message a {
  padding: 1.3em 2.3em;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: #252525;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -ms-transition: 0.8s;
  -o-transition: 0.8s;
}
.btn_message a:hover {
  background: #444;
}
/* Contact end */
/* Footer start */
footer {
  background: #ebebeb;
}
.footer_box {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  width: 100%;
  padding: 5em 0 3.5em 0;
}
.social_list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  padding-bottom: 1.5em;
}
.social_list ul {
  display: -webkit-box;
  display: flex;
}
.social_list ul li a {
  padding: 3px 6px;
  opacity: 0.4;
  font-size: 1.4em;
  color: #171717;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
}
.social_list ul li a:hover {
  opacity: 1;
}
.cope {
  text-align: center;
}
.cope p {
  font-size: 1em;
  color: #5f5f5f;
}

/* Footer end */

@-webkit-keyframes move {
  0% {
    opacity: 0;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
  }
}

@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(10%);
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}