/*----------------------------Spetification*/
@font-face {
  font-family: 'Akrobat-SemiBold';
  src: url('../fonts/Akrobat-SemiBold.woff2') format('woff2'), 
  		url('../fonts/Akrobat-SemiBold.woff') format('woff'),
  		url('../fonts/Akrobat-SemiBold.eot'); /* IE9 Compat Modes */
}

@font-face {
  font-family: 'Akrobat-Light';
  src: url('../fonts/Akrobat-Light.woff2') format('woff2'), 
  		url('../fonts/Akrobat-Light.woff') format('woff'),
  		url('../fonts/Akrobat-Light.eot'); /* IE9 Compat Modes */
}


body {
	font-family: 'Akrobat-SemiBold', sans-serif;
	padding: 0;
	margin: 0;
	letter-spacing: 0em;
}

div, p, form, input, a, span, button {
	box-sizing: border-box;
}

p {
	margin: 23px 0 0 0;
  line-height: 1.4em;
	letter-spacing: 0.02em;
	color: #fff;
  font-size: 18px;
}

ul, li {
	display: block;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}


h1, h2, h3, h4, h5, h6 {
	font-family: 'Akrobat-Light', sans-serif;
	color: #473f36;
	text-transform: uppercase;
}

h1 {
	font-size: 30px !important;
	text-transform: uppercase;
	margin: 20px 0 0 0;
}

h2 {
	font-size: 50px;
}

a{
	text-decoration: none;
	color:#473f36; 
	font-size: 24px;
  letter-spacing: 0.1em;
}

a, button, input {
	transition: all 0.5s ease;
}

input, input:hover, input:focus, input:active,
button, button:hover, button:focus, button:active {
	outline: none;
}
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
 
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #cccccc;
  border-top-color: #41392f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




.panel {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

.container{
	width: 75%;
	margin: 0 auto;
}
.none{
      width: 30%;
}

/*---------------------------------header*/
.header{
	background: #d5d5d5 url('../img/bg_2.webp') no-repeat center bottom 10%/ cover;
	height: 100%;
	min-height: 100vh;
	padding: 30px 0;
}


ul{
  display:flex;
  text-align: center;
	padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  flex: 1 4%;
}

.header__wrapp{
  display: flex;
  justify-content: space-between;
  height: 70vh;
  align-items: center;
}

.header__name{
  display: flex;
  flex-direction: column;
  text-align: center;
  width:240px;

}
.header__title{
	font-size: 50px;
  letter-spacing: 0em;
  margin-bottom: 16px;
  text-transform: uppercase;
  transition: all 0.5s ease;
}

.header__name .header__title:hover{
  color: #8e704e;
}

.soc__link{
  margin: 4px auto;
  border-bottom: 3px solid transparent;
  position: relative;
}

.soc__link::after{
  content:'';
  height: 2px;
  width: 0;
  background: #473f36;;
  position: absolute;
  bottom: -4px;
  transition: width 0.3s;
  left: 0;
}

.soc__link:hover::after{
  width: 100%;
}

/*----------------------photo */

.photo{
	background: #473f36 url('../img/fon.jpg') no-repeat top right 37% / cover;
	height: 100%;
	min-height: 100vh;
}

/*-----------------------about*/

.about{
	background: #473f36;
	height: 100%;
	min-height: 90vh;
	padding-bottom: 50px;
}

.about__main-text{
	color:#fff;
	font-size:30px;
}

.about__info{
  color: #fff;
  font-size: 18px;
  text-align: justify;
	
}
.about__container{
	display: flex;
	justify-content: space-between;
	margin-top: 4%;
}

.about__information{
	width: 45%;
	text-align: justify;
}

.about__wrapp{
	padding-top: 62px;
}

.about__title{
	width: 52%;
	color: #fff;
  font-size: 30px;
}

.about__title-big{
	width: 75%;
}
.about__link{
    line-height: 1.4em;
    letter-spacing: 0.02em;
    color: #ffffff;
    font-size: 18px;
    border-bottom: 1px solid #fff;
    transition: all 0.5s ease;
}
.about__link:hover{
    color: #dbccb7;
    border-bottom:1px solid #dbccb7;
}
/*------------------------process*/

.process{
	background: #dbccb7 url('../img/process.jpg') no-repeat top center / cover;
	height: 100%;
	min-height: 100vh;

}


/*--------------slider*/
.swiper{

}

.slider{
  background: #dbccb7;
  position: relative;
  height: max-content;
  min-height: max-content ;
}


.slider__wrapp {
  padding-bottom: 160px;

}

.slider__wrapp{
	padding-top: 60px;
	width: 100%;
}

.slider__img{
  overflow: hidden;
  width: 100%;
}

.slider__wrapp >.gallery-a__title{
	width: 75%;
  margin: 0 auto;
}

.slick-slider{
  margin-top: 55px;
}


.slick-dots {
  position: absolute;
  bottom: -10%;

  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}


.slick-dots li {
  width: 32px;
  height: 14px;
  margin: 0 9px;
}


.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 40px;
  height: 0px;
  padding: 2px;
  cursor: pointer;
  color: #dbccb7;
  border: 0;
  outline: none;
  background: #41392f;
  opacity: 0.2;
}

.slick-active button{
  opacity: 0.9 !important;
}

.slick-slide{
  width: 600px;
/*  height: 600px;*/
  overflow: hidden;
  object-fit: cover;
  margin: 0 10px;
}

.slick-slide{
  width: 650px ; 
}
/*-------------------------------gallery 1*/
.gall__frame-m{
  margin-top: 36px !important;
}
.gallery__andrei{
	background: #fff;
	height: 100%;
/*	min-height: 100vh;*/
	position: relative;
	padding-bottom: 90px;
}
.gallery-a__wrapp{
	padding-top: 70px;
}
.gallery-a__title{
	font-size: 30px;
  color:#473f36; 
}


.gall__img{
    height: 390px;
    margin-bottom: 23px;
    display: flex;
    overflow: hidden;
    justify-content: center;
    transition: transform 0.2s;
}

.gall__img:hover{

}

.gall__frame{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 76px;
  height: 100%;
}
.gall__item{
	text-align: center;
	margin-bottom:30px;
  width: 30%;
  cursor: pointer;
}
.gall__item p{
	color:#473f36; 
	margin: 0;

}
.gallery__link{
	display: block;
  text-align: center;
  margin: 0 auto;
  width: max-content;
  position: relative;
}

.gallery__link::after{
  content:'';
  height: 2px;
  width: 0;
  background: #473f36;;
  position: absolute;
  bottom: -4px;
  transition: width 0.3s;
  left: 0;
}

.gallery__link:hover::after{
  width: 100%;
}


.box-modal{
  position: relative;
  width: min-content;
  padding: 16px;
  color: #000;
  border-radius: 6px;
}

.modal__img{
  width: 900px
}

.arcticmodal-overlay{
  opacity: 0.8 !important;
}
.menu__sidebar{
  border-top: 2px solid #dbccb7;
  margin-top: 40px;
  padding-top: 40px;
}
.gallery__text{
  color: #473f36;
  margin-top: 50px;
  text-align: justify;
}

/*------------------------------gallery 2*/

.gallery__nastya{
	background: #d5d5d5;
	height: 100%;
	position: relative;

}

.menu__item > li>a{
  text-align: center;
  margin: 0 auto;
  width: max-content;
  position: relative;
}

.menu__item > li>a::after{
  content:'';
  height: 2px;
  width: 0;
  background: #473f36;;
  position: absolute;
  bottom: -4px;
  transition: width 0.3s;
  left: 0;
}

.menu__item > li>a:hover::after{
  width: 100%;
}

.footer{
  height: 50px;
  background-color: #9d9a9a;
  margin-top: 60px;
}

/*------------------------------стрелка вверх*/
    .btn-up {
      position: fixed;
      background-color: #41392f;
      right: 20px;
      bottom: 0px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 50px;
    }

    .btn-up::before {
      content: "";
      width: 40px;
      height: 40px;
      background: transparent no-repeat center center;
      background-size: 100% 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
    }

    .btn-up_hide {
      display: none;
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-up:hover {
        background-color: #554c41;
      }
    }





/*--------------------------Media Queries*/

/* XL 1201 + */

/* LG 992 - 1200 */
@media screen and (max-width: 1200px) {
  .slick-slider{
    margin-top: 55px;
  }

  .slick-slide{
    width: 300px ;
  }

  .slick-slide img {
    margin: 0 10px;
  }

  .slick-dots {
    bottom: -74px;
  }

  .menu__item > li > a{
    font-size: 16px;
  }

  .gall__img {
    height: 220px;
  }

  .modal__img {
    width: 750px;
  }

  .header__title {
    font-size: 40px;
  }

  a {
    font-size: 20px;
  }


}


/* MD 768 - 992 px */
@media screen and (max-width: 992px) {
  .header__wrapp {
    height: 55vh;
  }
  .about__container {
    flex-direction: column;
    margin-top: 0;
  }
  .about__information{
    width: 100%;
    margin-top: 50px;
  }

  .about__title {
    width: 30%;
  }

  .about__title-big {
    width: 45%;
  }

  .slick-track {
    left: -225px;
  }

  .gall__item p {
    font-size: 16px;
  }

  .gallery-a__wrapp {
    padding-top: 43px;
  }

  .menu__sidebar {
    margin-top: 26px;
    padding-top: 26px;
  }
  .menu__item li {
    flex-basis: auto;
    margin-top: 20px;
    width: 31%;
  }
  .menu__item > li > a {
   font-size: 20px;
  }
  .menu__item {
    flex-wrap: wrap;
  }
  .gall__img {
    height: 180px;
  }

  .about__wrapp {
    padding-bottom: 62px;
  }

  .modal__img {
    width: 576px;
  }

    




}



/* SM 576 - 768 px */
@media screen and (max-width: 768px) {
  .header__wrapp {
    align-items: start;
    margin-top: 60px;
  }

  .process {
    background-position: top right 34%;
  }
  .slick-dots li {
    width: 12px;
  }
  .slick-dots li button {
    width: 21px;
  }

  .gall__frame {
    margin-top: 50px;
  }
  .gall__item {
    width: 48%;
  }

   .menu__item li a{
    width: 100%;
  }

  .menu__sidebar {
    padding-top: 13px;
  }

  .modal__img {
      width: 450px;
  }

  .btn-up {
    width: 55px;
    height: 46px;
    right: 10px;
  }

    .menu__item li {
        width: 37%;
    }

}

/* XS 320 - 576 px */
@media screen and (max-width: 575px) {
    .container{
        width:85%;
    }

  .header__title ul{
    font-size: 14px;
  }

  .header__title {
    font-size: 28px;
  }

  .about__info, .about__information>p {
    font-size: 16px;
  }

  .header__wrapp{
    margin-top: 62px;
    width: 100%;
  }

  .header__name {
    width: 150px;
  }

  a {
    font-size: 14px;
  }

  .soc__link {
    margin: 2px auto;
  }

  .about__main-text, .about__main-text >p, .about__title, .gallery-a__title {
    font-size: 16px;
    text-align: justify;
  }
  .about__link{
    font-size: 16px;
  }

  .about__wrapp {
    padding-bottom: 40px;
  }

  .slick-slider {
    margin-top: 27px;
  }

  .slick-slide {
    width: 200px ;
    margin: 0 4px;
  }

  .slick-dots {
    bottom: -60px;
  }

  .slick-slide img {

    width: 100%; 
  }

  .slider__wrapp {
    padding-top: 25px;
  }

  .slick-dots li {
    width: 4px;
    height: 36px;
  }

  .slick-dots li button {
    width: 14px;
    padding: 1px;
  }

  .slider__wrapp {
    padding-bottom: 80px;
  }

  .menu__item li {
    width: 52%;
    margin-top: 12px;
  }

  .menu__sidebar {
    padding-top: 0;
  }

  .gall__frame {
    margin-top: 27px;
  }

  .gall__img {
    height: 127px;
    margin-bottom: 4px;
  }

  .gall__item p {
    font-size: 13px;
  }

  .gall__item {
    width: 47%;
    margin-bottom: 16px;
  }

  .modal__img {
    width: 261px;
  }

  .box-modal {
    padding: 8px;
    background: #fff;
  }

  .gallery__link {
    font-size: 20px;
  }
  .gallery__text {
    margin-top: 30px;
    font-size: 16px;
    text-align: justify;
  }


}

@media screen and (max-width: 400px) {

}
