@charset "utf-8";

/* Главная */
main {
  position: relative;
  background-image: url(../img/main/bg.jpg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
  background-size: cover;
  padding-bottom: 20px;
}
main > .container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  z-index: 2;
}
.home_furniture {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 1289px;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-image: url(../img/main/furniture.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.home_furniture::before {
  content: '';
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: contain;
  opacity: 0;
}
.home_furniture.about::before {
  opacity: 1;
  background-image: url(../img/main/about.png);
}
.home_furniture.services::before {
  opacity: 1;
  background-image: url(../img/main/services.png);
}
.home_furniture.project::before {
  opacity: 1;
  background-image: url(../img/main/project.png);
}
.home_furniture.news::before {
  opacity: 1;
  background-image: url(../img/main/news.png);
}
.home_furniture.contacts::before {
  opacity: 1;
  background-image: url(../img/main/contacts.png);
}
.home_furniture img {
  width: auto;
  height: 81%;
  margin-left: auto;
  margin-right: auto;
}
.footer__social {
  display: none;
}
.mobile__bg {
  width: 100%;
  height: auto;
  display: none;
}

#main-services {
  background: #232323;
}
#main-services .container {
  display: block;
  border-left: 1px solid #564826;
  padding-bottom: 30px; 
}
#main-services .service__title {
  margin: 0;
  height: 150px;
}
#main-services .number {
  font-size: 70px; 
  -webkit-text-stroke: 1px #6d6d6d;
}
.main-services-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-services-inner {
    width: 31%;
    display: flex;
    flex-direction: column;
}
.main-services-image {
    width: 100%;
}
.main-services-footer {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 100px;
}
.main-services-link {
    margin: 0;
    color: #fff;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 29px;
    text-decoration: none;  
    transition: all .35s ease-in-out;
}
.main-services-link span {
  color: #F1B72F;
}
.main-services-button path {
  transition: all .35s ease-in-out;
}
.main-services-footer:hover .main-services-link {
    color: #F1B72F;
}
.main-services-footer:hover .main-services-button path {
  fill: #000
}
.next__service.first > .container::before {
    top: 0;
    height: 45px;
}
.next__service.first > .container::after {
    bottom: 0;
    height: 45px;
}
#main-snippets .service__title {
    height: 60px;
}
.main-snippets-row {
    display: flex;
    justify-content: space-between;
}
.main-snippets-column {
    padding-bottom: 100px;
}
.main-snippets-column.left {
    padding-right: 50px;
    width: calc(50% - 20px);
}
.main-snippets-column.right {
    width: calc(50% + 20px);
}
.section.left.first {
    height: 300px;
}
.section::before {
    content: '';
    width: calc(50% - 70px);
    height: 400px;
    position: absolute;
    right: 0;
    z-index: -1;
    background-color: #F3F3F3;
}
.section.left::before {
    left: 0;
    right: auto;
}
#main-snippets .service__title .title span {
    font-weight: 600;
}
.main-snippets-name {
    margin-top: 0;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    padding-top: 24px;
}
.main-snippets-image-block {
  position: relative;
}
.main-snippets-image-block::before {
    content: '';
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    height: 100%;
    border: 1px solid #F1B72F;
    position: absolute;
    top: 12px;
    right: -12px;
    z-index: 0;
}
.main-snippets-image {
    width: 100%;
    position: relative;
    max-height: 300px;
}
.next__service.first.no-after {
    margin-top: 74px;
}
.next__service.first.no-after .container::after {
  display: none;
}
.section.left.dark::before {
  background-color: #232323; 
  height: 700px;
}
.main-snippets-text-block {
    padding-right: 30px;
}
.main-snippets-text-block .main-snippets-date {
    color: #fff;
    margin-top: 40px;
    margin-bottom: 5px;
}
.main-snippets-text-block .main-snippets-title {
    font-size: 18px;
    color: #F1B72F;
    font-weight: 600;
}
.main-snippets-text-block .main-snippets-description {
    color: #fff;
    font-weight: 500;
}
.main-snippets-link {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #F1B72F;
    margin-left: auto;
}
.main-snippets-link svg {
  stroke: #F1B72F;
  margin-left: 10px;
}
.main-snippets-text-block.light.mobile {
    display: none;
}
.main-snippets-text-block.light .main-snippets-date {
  margin-top: 0;
    color: #5E5E5E;
}
.main-snippets-text-block.light .main-snippets-title {
  color: #232323;
}
.main-snippets-text-block.light .main-snippets-description {
  color: #5E5E5E;
}
.next__service.first.no-before .container::before {
  display: none;
}
.next__service.first.no-before .container::after {
  bottom: -45px;
  top: auto;
}
.section.right {
    padding-left: 30px;
}
.section.right::before {
    width: calc(50% + 20px);
    height: 865px;
}
.main-snippets-text-block.light.desktop {
    height: 210px;
}
.section.right .main-snippets-name {
  color: #232323; 
}
.section.right .main-snippets-image-block::before {
    display: none;
}
.main-snippets-text-block.last {
    margin-top: 15px;
}
.main-snippets-text-block.last .main-snippets-title {
    color: #232323;
}
.main-snippets-text-block.last .main-snippets-title span {
    color: #F1B72F;
}
.main-snippets-text-block.last .main-snippets-description {
    color: #5E5E5E;
}
.main-snippets-text-block.last .main-snippets-description:nth-child(4) {
    display: none;
}
.next__service.second > .container::before {
    height: 45px;
    top: -45px;
}
.next__service.second > .container::after {
    height: 45px;
    bottom: -45px;
}
#main-youtube {
  background: #232323;
}
#main-youtube .service__title {
    height: 150px;
}
#main-youtube .service__title .number {
    font-size: 70px;
  -webkit-text-stroke: 1px #6d6d6d;
}
#main-youtube .service__title .title {
    color: #FFF;
    flex-direction: row;
}
#main-youtube .service__title .title span {
    margin-right: 10px; 
}
#main-youtube .main-services-inner {
  position: relative;
}
.youtube-play {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
}
.youtube-play img {
    width: 100%;
}
.main-services-inner iframe {
  height: 193px;
}
.next__service.scroll .container::before {
  height: 45px;
  top: 0;
}
.next__service.scroll .container::after {
  height: 45px;
  top: -45px;
}
#main-instagram {
  background: #F3F3F3;
  padding-bottom: 80px;
}
#main-instagram .service__title {
    height: 150px;
}
#main-instagram .service__title .number {
    font-size: 70px;
  -webkit-text-stroke: 1px #C5C5C5;
}
#main-instagram .service__title .title {
    color: #F1B72F;
    flex-direction: row;
}
#main-instagram .service__title .title span {
    margin-right: 10px; 
    color: #232323; 
}
#open-wrapper-outer {
    position: absolute;
    bottom: 10px;
    width: 270px;
    left: calc(50% - 135px);
    z-index: 3;
    display: flex;
    align-items: center;
}
#open-wrapper-outer p {
    font-size: 18px;
    font-weight: 500;
    margin-right: 10px;
}
#open-wrapper-outer button {
  width: 30px;
    height: 30px;
    background: #F1B72F;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    animation: wiggle 2s infinite;
}
#open-wrapper-outer button svg {
  fill: #fff
}
#open-wrapper-outer a:hover svg {
  fill: #000
}
#open-wrapper-outer.hide {
  display: none; 
}
#slideWrapper {
    display: none;
}
#slideWrapper.show {
    display: block;
}

#scrollTop {
    position: fixed;
    right: 2%;
    bottom: 10%;
    z-index: 99;
    display: none;
}
#scrollTop.show {
    display: block;
}
.scrollTop-button {
    background: transparent;
    border: none;
    cursor: pointer;
}

@keyframes wiggle {
  0%  { transform: translateY(-5px); }
  50%  { transform: translateY(5px); }
  100%  { transform: translateY(-5px); }
}

@media (max-width: 1199px) {
  .main-services-inner iframe {
    height: 165px;
  }
}

@media (max-width: 767px) {
  .main-services-inner iframe {
    height: 194px;
  }
}

@media screen and (max-width: 1199px) {
  .home_furniture {
    max-width: 1102px;
  }
  .home__social li {
    margin-bottom: 20px;
  }
  .home__social::before {
    height: 230px;
  }
}
@media screen and (max-width: 991px) {
  /* main {
    min-height: 515px;
  } */
  .home_furniture {
    max-width: 806px;
  }
  .home__social::before {
    height: 140px;
    margin-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .home_furniture {
    max-width: 540px;
  }
  .home__social::before {
    height: 30px;
  }
}
@media screen and (max-width: 575px) {
  main {
    background-image: url(../img/mobile/bg.jpg);
    background-position-y: center;
  }
  main > .container {
    display: none;
  }
  .home_furniture {
    display: none;
  }
  .mobile__bg {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

/* Height */
@media screen and (max-height: 972px) {}

@media screen and (max-height: 815px) {
  .home__social::before {
    height: 243px;
  }
}

@media screen and (max-height: 671px) {
  .home__social::before {
    height: 198px;
    margin-top: 0;
  }
}

@media screen and (max-height: 526px) {
  .home__social::before {
    height: 39px;
    margin-top: 16px;
    margin-bottom: 30px;
  }
}

/* адаптация для мобил */
@media only screen and (device-width : 414px) and (device-height : 736px) {
  main {
    background-size: 110% auto;
  }
}
@media only screen and (device-width : 375px) and (device-height : 667px) {
  main {
    background-size: 100% auto;
  }
}
@media only screen and (device-width : 320px) and (device-height : 568px) {
  main {
    background-size: 100% auto;
  }
}
@media only screen and (device-width : 375px) and (device-height : 812px) {
  main {
    background-size: 125% auto;
  }
}
@media only screen and (device-width : 414px) and (device-height : 823px) {
  main {
    background-size: 135% auto;
  }
}
@media only screen and (device-width : 414px) and (device-height : 896px) {
  main {
    background-size: 135% auto;
  }
}

@media only screen and (device-width : 412px) and (device-height : 916px) {
  main {
    background-size: 125% auto;
  }
}

@media only screen and (device-width : 360px) and (device-height : 740px) {
  main {
    background-size: 115% auto;
  }
}
@media only screen and (device-width : 412px) and (device-height : 740px) {
  main {
    background-size: 115% auto;
  }
}
@media only screen and (device-width : 360px) and (device-height : 800px) {
  main {
    background-size: 135% auto;
  }
}
@media only screen and (device-width : 384px) and (device-height : 853px) {
  main {
    background-size: 135% auto;
  }
}
@media only screen and (device-width : 412px) and (device-height : 869px) {
  main {
    background-size: 135% auto;
  }
}
@media only screen and (device-width : 360px) and (device-height : 760px) {
  main {
    background-size: 135% auto;
  }
}
@media only screen and (device-width : 412px) and (device-height : 892px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 412px) and (device-height : 914px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 414px) and (device-height : 846px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 392px) and (device-height : 800px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 360px) and (device-height : 780px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 393px) and (device-height : 851px) {
  main {
    background-size: 140% auto;
  }
}
@media only screen and (device-width : 360px) and (device-height : 640px) {
  main {
    background-size: 110% auto;
  }
}

@media only screen and (device-width : 411px) and (device-height : 845px) {
  main {
    background-size: 110% auto;
  }
}

@media (max-width: 767px) {
  #main-services, #main-snippets, #main-youtube, #main-instagram, #main-design  {
    padding-right: 15px;
    padding-left: 15px;
  }
  #main-services .container {
    border-left: none;
  }
  #main-services .service__title, #main-youtube .service__title, #main-instagram .service__title {
    height: 100px;
    margin: 0; 
  }
  #main-services .number, #main-youtube .service__title .number, #main-instagram .service__title .number {
    display: none;
  }
  .service__title .title {
    font-size: 24px !important;
    padding-left: 0 !important;
  }
  .section.left.first {
    height: auto;
  }
  .main-snippets-column {
    padding-bottom: 0;
  }
  .main-snippets-text-block {
    padding-right: 0;
  }
  .main-services-row {
    flex-direction: column;
  }
  .main-services-inner {
    width: 100%;
    margin-bottom: 30px;
  }
  .main-snippets-row {
    flex-direction: column;
  }
  .main-snippets-column.left {
    padding-right: 0;
    width: 100%;
  }
  .main-snippets-column.right {
    width: 100%;
  }
  .section::before {
    width: 100%;
    height: 500px;
  }
  .main-snippets-text-block.light.mobile {
      display: block;
      margin-top: 30px;
      padding-right: 0;
  }
  .main-snippets-text-block.light.desktop {
    display: none;
  }
  .section.right {
    padding-left: 0;
  }
  .section.right::before {
    width: 100%;
    height: 950px;
  }
  #main-youtube .service__title {
    height: 100px;
    margin: 0;
  }
  #main-youtube .service__title .number {
    display: none;
  }
  #main-youtube .service__title .title, #main-instagram .service__title .title {
    padding: 0;
    font-size: 24px;
    display: flex;
    flex-direction: column;
  }
  #main-youtube .service__title .title span, #main-instagram .service__title .title span {
    margin-bottom: 10px;
  }
  #open-wrapper-outer {
    bottom: 3%;
    justify-content: center;
  }
  .next__service {
    padding-top: 50px;
  }
  .next__service.first.no-after {
    margin-top: 30px;
  }
  .next__service.first.no-before {
    margin-top: 40px;
  }
  .next__service.second {
    margin-top: 56px;
  }
  #main-instagram {
    padding-bottom: 30px;
  }
  #scrollTop {
    right: 15px;
  }
}

@media (max-width: 767px) and (max-height: 600px) {
  #open-wrapper-outer p {
    margin-top: 0;
    margin-bottom: 0;
  }
  main {
    background-position-y: 74%;
  }
}


#summer-sale {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
  z-index: 9;
}
#summer-sale.d-none {
  display: none; 
}
.summer-sale-image {
  width: 400px;
}
.summer-sale-close {
    position: absolute;
    top: 9px;
    right: 7px;
    width: 14px;
    cursor: pointer;
}
.summer-sale-image.display-mobile {
    display: none;
}
#seminar-line {
    display: none;
    position: fixed;
    top: 86px;
    background: #F1B72F;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 9;
}
#seminar-line.show {
  display: flex;
}
.seminar-line-1, .seminar-line-2 {
    display: flex;
    align-items: center;
}
.seminar-text-1 {
    font-family: 'Lato';
    color: #232323;
    font-size: 15px;
    padding-right: 50px;
}
.seminar-text-2 {
    font-family: 'Lato';
    font-size: 16px;
    font-weight: 600;
    padding-right: 150px;
    color: #232323;
}
.seminar-link-1 {
    font-family: 'Lato';
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.seminar-link-2 {
    display: none;
}

@media (max-width: 1000px){
  .summer-sale-image.display-mobile {
    display: block;
  }
  .summer-sale-image.display-desktop {
    display: none;
  }
  .seminar-line-1 {
    flex-direction: column;
    align-items: start;
  }
  .seminar-text-1 {
    padding-right: 0;
    font-size: 12px;
    margin-bottom: -4px;
  }
  .seminar-text-2 {
    padding-right: 0;
    font-size: 14px;
  }
  .seminar-link-1 {
    display: none;
  }
  .seminar-link-2 {
    display: block;
  }
  .seminar-line-1, .seminar-line-2 {
    display: block;
  }
  #seminar-line {
    justify-content: space-around;
  }
}
@media (max-width: 767px){
  .summer-sale-image {
    width: 270px;
  }
}

.main-design {
    padding: 20px 0 30px;
}
.main-design .service__title .title {
    display: block;
}
.main-design-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 50px;
}
.main-design-image {
    width: calc(50% - 70px);
}
.main-design-image-01, .main-design-image-05 {
    margin-left: -50px;
    width: calc(50% - 20px);
}
.main-design-image-04 {
    margin-right: -50px;
    width: calc(50% - 20px);
}
.main-design-block {
    width: calc(50% + 20px);
}
.main-design-title {
    font-weight: 600;
    color: #F1B72F;
    margin-bottom: 30px;
}
.main-design-text {
    font-size: 14px;
    color: #000;
    line-height: 17px;
    margin-bottom: 20px;
    padding-left: 20px;
}
.main-design-arrow {
    position: relative;
    height: 40px;
    margin-top: 50px;
}
.main-design-arrow .next__btn {
    position: relative;
    z-index: 2;
}
.main-design-arrow .next__service-sep {
    display: flex;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #C5C5C5;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
}

@media (max-width: 767px){
  .main-design-row:nth-child(odd) {
    flex-direction: column-reverse;
  }
  .main-design-row:nth-child(even) {
    flex-direction: column;
  }
  .main-design-image {
    width: 100% !important;
    margin: 0 0 20px !important;
  }
  .main-design-block {
    width: 100%;
  }
  .main-design-arrow {
    margin-top: 0;
  }
}