@font-face {
  font-family: 'English_157';
  src: url("../fonts/English_157.ttf") format("truetype");
  font-display: fallback;
}
@font-face {
	font-family: 'Oswaldlight';
	src: url("../fonts/oswald/Oswaldlight.ttf") format("truetype");
  src: url("../fonts/oswald/Oswaldlightitalic.ttf") format("truetype");
  font-display: fallback;
   }

* {
    font-weight: normal;
    font-family: 'Oswaldlight', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
*::after, *::before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
    text-decoration: none;
  }
.container {
	max-width: 1600px;
	margin: 0 auto;
	height: 100%;
}
.text-center {
    text-align: center 
}
.fancybox-caption__body {
    font-size: 1.3rem;
  letter-spacing: 1px;
  padding-bottom: 8rem;
}
.body {
	position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content {
	display: flex;
    width: 100%;
    height: 100%;
    background-image: url(https://onlinecreative.ru/beauty_salon/images/background.jpg);  
   position: fixed;
 }
.header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
 }
.header-flower {
  margin: 1rem 0;
    background: url(/beauty_salon/images/flower.png);
    width: 50px;
    height: 40px;
   }
 p.bs {
      font-size: .8rem;
    letter-spacing: 2px;
  color:#d6c5b0
  }
.navbar-brand {
    font-size: 2rem;
	text-decoration: none;
    z-index:2;
  text-align: center;
  font-weight: bold;
 }
.navbar {
    display: flex;
    flex-direction: column;
    width: max-content;
  }
.navbar p {
  font-family: 'English_157';
    color:#e6bc90;
    font-size: 3rem;
    line-height: 1;
    margin-top: 1rem;
    align-self: center;
}
.navbar ul {
	list-style: none;
  margin: 1rem 0 2rem;
}
.navbar a {
	color: #e6bc90;
	font-size: 1.3rem;
  transition: .5s
}
.navbar a:hover,
.navbar a:focus,
.social-icons a:hover {
  color: #fff;
}
.social-icons a:hover>i {
  transform: scale(1.1);
}
.header img, .header-flower,  .bs, .item, .content-photo, .title, .toggle-btn, .address_link, p.phone, .contacts .info,  .form_area { 
  opacity: 0;
  animation: show 1s forwards;
 }
.header img {
   animation-delay: .5s;
}
.header-flower {
   animation-delay: .6s;
}
.bs {
   animation-delay: .7s;
}
.animate {
background: linear-gradient(#b39070, #e1d5c3 80%) left no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  background-clip: text;
 color: transparent;
  animation: change 1s linear forwards;
  animation-delay: 1s;
}
.address_link {
   color: #fd6266;
    margin-top: .5rem;
    animation-delay: 1.9s;
    font-family: sans-serif;
  text-align: center;
  }
p.phone {
  color: #fff;
  margin-top: .5rem;
  animation-delay: 2s;
  font-size: 1.5rem;
    letter-spacing: 1px;
  text-align: center;
}
.header .navbar p { 
  opacity: 0;
  animation: show 1s forwards;
  animation-delay: 2s;
}
@keyframes show {
from {opacity: 0;} to {opacity: 1;}
} 
 .navbar ul li, .social-icons, a.autor_link  {
  opacity: 0;
  transform-origin: top center;
  animation: menu 1s ease forwards;
 }
@keyframes menu {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
} 
.nav li:nth-child(1) {
  animation-delay: .9s;
}
.nav li:nth-child(2) {
  animation-delay: 1s;
}
.nav li:nth-child(3) {
  animation-delay: 1.1s;
}
.nav li:nth-child(4) {
  animation-delay:  1.2s;
}
.nav li:nth-child(5) {
  animation-delay:  1.3s;
}
.nav li:nth-child(6) {
  animation-delay: 1.4s;
}
.nav li:nth-child(7) {
  animation-delay:  1.5s;
}
.nav li:nth-child(8) {
  animation-delay:  1.6s;
}
.nav li:nth-child(9) {
  animation-delay:  1.7s;
}
.nav li:nth-child(10) {
  animation-delay:  1.8s;
}
.social-icons {
	display: flex;
  margin: 0;
  animation-delay:  1.9s;
 }
.social-icons li {
    margin-left: .5rem;
}
.fa {
    font-size: 14px !important;
}
.nav a.active {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
    letter-spacing: 1px;
    animation: line_active .5s linear forwards;
    animation-delay: 3s;
    height: fit-content;
}
a.autor_link {
  font-size: 1rem;
  animation-delay: 2s;
  letter-spacing: 1px;
   color: #757575 !important;
   display: flex;
    flex-direction: column;
  width: max-content;
}
a.autor_link span {
  font-family: sans-serif;
}
a.autor_link:hover {
    color: #fff !important;
}
a.autor_link .work {
  font-size: 10px;
    letter-spacing: normal;
    align-self: flex-end;
}
@keyframes line_active {
  0% {
    background-size: 0% 2px;
  }
  100% {
    background-size: 100% 2px;
    color: #ff6368;
  }
} 
.right_block {
  display: flex;
    flex-direction: column;
    width: 75%;
    margin: 1rem 0;
}
 h1 {
  color: #d8a06b;
   font-weight: normal;
   font-size: 3rem;
    font-family: 'English_157';
   line-height: .7;
   padding: .5rem 0;
 }
.title {
  display: flex;
    flex-direction: column;
    align-items: center;
  text-align: center;
  animation-delay: 1s;
 }
.title_ornament {
  width: 100%;
    max-width: 400px;
    height: auto;
}
.content-photo {
   display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    grid-gap: 1rem;
    animation-duration: 3s;
  animation-delay: 1s;
    margin: .5rem;
    justify-content: space-around;
    overflow: auto;
    grid-auto-rows: max-content;
}
.content-photo:hover .item .btn span {
   transition: 1s
}
.content-photo:hover .item .btn:hover span {
  background: #c8342b;
  border-radius: 5px;
    width: 100%;
    -webkit-text-fill-color: #fff;
    font-weight: normal;
}
.content-photo:hover .item img {
  filter: brightness(0.5);
  transition: 1s
}
.content-photo:hover .item .btn:hover img {
  filter: none
}
.item {
  display: flex
}
.item .btn {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
animation: show 1s;  
}
.item .photos {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   padding: 1rem;
}
.item .photos .image {
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  margin-bottom: .5rem;
  box-shadow: 0 0 20px #b7aba5;
  border-radius: 3px;
   transition: 1s;
   align-items: center;
    display: flex;
    justify-content: center;
 }
.item .photos .image img {
  display:none
}
.content-photo:hover .item .btn:hover .image {
  box-shadow: 0 0 50px #e8d5ba;
}
.item .photo {
  width: 80%;
  height: 70%;
  background-size: cover !important;
  transition: 1s;
  background-position: center !important;
} 
.item .btn .photos::before,
.item .btn .photos::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}
.item .btn .photos::before {
  border-top: 2px solid #ba8a59;
  border-bottom: 2px solid #ba8a59;
  transform: scale(0, 1);
}
.item .btn .photos::after {
  border-right: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: scale(1, 0);
}
.item .btn:hover .photos::before,
.item .btn:hover .photos::after {
  opacity: 1;
  transform: scale(1);
}


.content-photo:hover .photo {
  filter: brightness(.3);
}
.item .btn:hover a.photo {
 transform: scale(1.1) !important; 
 filter: none;
 }


.item .photos span {
  transition: transform 0.5s ease 0s;
    transform: scale(0);
    font-size: 25px;
    color: #fff;
}  
.item .photos span.profession {
  font-size: 18px;
  padding-bottom: .3rem;
}
.item .btn .photos span {
  transform: scale(1);
  opacity: 1;
  transition: 1s;
  line-height: 1.2;
} 
  
@keyframes change {
  100% {
    background-size: 100% 100%
  }
}

/*  parikmaherskyie-uslugi page */

.hair_bleaching_photo-1 {
  background: url(/beauty_salon/images/hair/hair_bleaching/small/1.jpg)
}
.womens_hairstyles_photo_1 {
  background: url(/beauty_salon/images/hair/womens_hairstyles/small/1.jpg)
}
 .hair_styling_photo_1 {
  background: url(/beauty_salon/images/hair/hair_styling/small/1.jpg)
}
 .childrens_haircuts_photo_1 {
  background: url(/beauty_salon/images/hair/childrens_haircuts/small/1.jpg)
}
.womens_haircuts_photo_1 {
  background: url(/beauty_salon/images/hair/womens_haircuts/small/1.jpg)
}
.perming_hair_photo_1 {
  background: url(/beauty_salon/images/hair/perming_hair/small/1.jpg)
}
 .lamination_of_hair_1 {
  background: url(/beauty_salon/images/hair/lamination_of_hair/small/1.jpg)
}
.highlighting_of_hair_1 {
  background: url(/beauty_salon/images/hair/highlighting_of_hair/small/1.jpg)
}
.mens_haircuts_1 {
  background: url(/beauty_salon/images/hair/mens_haircuts/small/1.jpg)
}
.hair_extensions_1 {
  background: url(/beauty_salon/images/hair/hair_extensions/small/1.jpg)
}
.hair_coloring_1 {
  background: url(/beauty_salon/images/hair/hair_coloring/small/1.jpg)
}
.hair_braiding_1 {
  background: url(/beauty_salon/images/hair/hair_braiding/small/1.jpg)
}
.simple_hair_styling_1 {
  background: url(/beauty_salon/images/hair/simple_hair_styling/small/1.jpg)
}
/* ============== nogty page ================== */
.manicure_photo_1 {
  background: url(/beauty_salon/images/nails/manicure/1.jpg)
}

/*   ========= epiliacyia page  ========= */
.epilation_photo_1 {
  background: url(/beauty_salon/images/epilation/small/photo_epilation.jpg)
}
.epilation_photo_2 {
  background: url(/beauty_salon/images/epilation/small/laser_epilation.jpg)
}
.epilation_photo_3 {
  background: url(/beauty_salon/images/epilation/small/waxing.jpg)
}
/* ========= extended nails page ========== */
.extended_nails_photo_1 {
  background: url(/beauty_salon/images/nails/extended_nails/small/1.jpg)
}
/* ========= pedicure page ========== */
.pedicure_photo_1 {
  background: url(/beauty_salon/images/nails/pedicure/1.jpg)
}
/* ========= cosmetology page ========== */
.lifting_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/lifting_1.jpg)
}
.bioreinforcement_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/bioreinforcement.jpg)
}
.bioreparation_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/bioreparation.jpg)
}
.biostimulation_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/biostimulation.jpg)
}
.disincrustation_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/disincrustation.jpg)
}
.biorevitalization_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/biorevitalization.jpg)
}
.carboxytherapy_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/carboxytherapy.jpg)
}
.contouring_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/contouring.jpg)
}
.сorrection_of_wrinkles_photo_1 {
  background: url(/beauty_salon/images/cosmetology/small/сorrection_of_wrinkles.jpg)
}
/* ========= makeup page ========== */
.daytime_makeup_photo_1 {
  background: url(/beauty_salon/images/makeup/small/daytime_makeup.jpg)
}
.evening_makeup_photo_1 {
  background: url(/beauty_salon/images/makeup/small/evening_makeup.jpg)
}
.permanent_makeup_photo_1 {
  background: url(/beauty_salon/images/makeup/small/permanent_makeup.jpg)
}
.eyebrow_correction_photo_1 {
  background: url(/beauty_salon/images/makeup/small/eyebrow_correction.jpg)
}
.eyelash_extension_photo_1 {
  background: url(/beauty_salon/images/makeup/small/eyelash_extension.jpg)
}
.сoloring_of_eyebrows_photo_1 {
  background: url(/beauty_salon/images/makeup/small/сoloring_of_eyebrows.jpg)
}
.сoloring_of_eyelashes_photo_1 {
  background: url(/beauty_salon/images/makeup/small/сoloring_of_eyelashes.jpg)
}
/* ========= massage page ========== */
.facial_massage_photo_1 {
  background: url(/beauty_salon/images/massage/small/facial_massage.jpg)
}
.back_massage_photo_1 {
  background: url(/beauty_salon/images/massage/small/back_massage.jpg)
}
.anticellulite_massage_photo_1 {
  background: url(/beauty_salon/images/massage/small/anticellulite_massage.jpg)
}
.sculptural_massage_photo_1 {
  background: url(/beauty_salon/images/massage/small/sculptural_massage.jpg)
}
/* ========= masters page ========== */
.master_1 {
  background: url(/beauty_salon/images/masters/cosmetologist_1.jpg)
}
.master_2 {
  background: url(/beauty_salon/images/masters/cosmetologist_2.jpg)
}
.master_3 {
  background: url(/beauty_salon/images/masters/hairdresser_1.jpg)
}
.master_4 {
  background: url(/beauty_salon/images/masters/hairdresser_2.jpg)
}
.master_5 {
  background: url(/beauty_salon/images/masters/hairdresser_3.jpg)
}
.master_6 {
  background: url(/beauty_salon/images/masters/manicure_master_1.jpg)
}
.master_7 {
  background: url(/beauty_salon/images/masters/manicure_master_2.jpg)
}
.master_8 {
  background: url(/beauty_salon/images/masters/massage_therapist_1.jpg)
}
.master_9 {
  background: url(/beauty_salon/images/masters/massage_therapist_2.jpg)
}
/*  =========== price page ================== */
.price {
  display: flex;
  color: #fff;
  letter-spacing: 1px;
  overflow-x: hidden;
}
.price tr {
  background-color: rgb(0 0 0 / 50%);;
}
.price table {
  width:100%
}
.price .table-title {
  font-size: 1.3rem;
    line-height: 3rem;
    text-decoration: none;
    text-align: center;
}
.price .thetextinter {
 width: 100% 
}
.price h3 {
  text-align: center;
}
button[type="submit"] {
  background-color: #d03f3f !important;
    border: 1px solid #d03f3f !important;
}
button[type="submit"]:hover {
    color: #fff;
    background-color: #af3535 !important;
    border-color: #af3535 !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #d03f3f !important;
    border: 1px solid #d03f3f !important;
}
/*  -- contacts page -- */
.right_block_contact {
  padding: 0 1rem;
}
.contacts {
   letter-spacing: 1px;
   margin-top: 2rem;
}
.contacts .info  {
  color:#e6bc90;
  animation-delay: 1.5s;
}
.contacts .info ul {
   padding: .5rem 2rem 2rem;
}
.contacts .info ul li {
  margin: 0.5rem 0;
}
.contacts .map iframe {
    border: 3px solid #675a3c;
    padding: 1rem;
  width: 100%;
}


/*  -------- responsive --------  */

@media(max-width: 1199.98px){
  .body {
   height: auto
  }
  .content {
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
  }
.background img {
   display: none 
  }
  .background {
   background: url(/beauty_salon/images/background.jpg), #0a0e10;
    background-position: top;
    background-repeat: no-repeat; 
  }
  .header {
    width: 100%;
    padding-top: 1rem;
  }
 .navbar ul {
    display: flex;
    justify-content: center;
  }
  .navbar ul li {
    display: flex;
    padding: 0 .5rem;
  }
  .right_block {
   width: 100% ;
    height: 100%;
    overflow: auto;
     }
.navbar {
 -webkit-transition: visibility 0.5s ease, opacity 0.5s ease;
  -moz-transition: visibility 0.5s ease, opacity 0.5s ease;
  -o-transition: visibility 0.5s ease, opacity 0.5s ease;
  transition: all 1s ease;
  opacity: 0;
     position: absolute;
    top: 0;
    width: 100%;
     padding: 1rem;
 }
.navbar.open {
    position: fixed;
    background: #000;
    height: auto;
    opacity: .88;
    text-align: center;
    z-index: 3;
}
.navbar.open a {
    color: #e6bc90;
 }
  .navbar.open a.autor_link {
     position: relative;
}
.social-icons {
	margin-top: 0
}
.navbar ul.nav {
    display: block;
}
.toggle-btn {
	padding: .2rem;
    display: flex;
    cursor: pointer;
    border: 1px solid #ba8a59;
    border-radius: 2px;
    width: 38px;
    flex-direction: column;
    margin-bottom: .3rem;
    z-index: 999;
    animation-delay: 2.5s;
    position: fixed;
    right: 1rem;
    top: 1rem;
 }
.toggle-btn:hover span {
    background: #fff;
    }
.toggle-btn span {
	height: 3px;
    background: #fff;
    margin: 3px 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
  -o-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
.toggle-btn.open span:nth-child(1) {
    position: relative;
    top: 9px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.toggle-btn.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.toggle-btn.open span:nth-child(3) {
    position: relative;
  top: -9px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.nav {
  display: table-cell;
  vertical-align: middle;
}
.nav li {
  -moz-transform: translateY(-40px);
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.open .nav li {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.open .nav li:nth-child(1) {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
.open .nav li:nth-child(2) {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
.open .nav li:nth-child(3) {
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
}
.open .nav li:nth-child(4) {
  -webkit-transition-delay: 400ms;
  transition-delay: 400ms;
}
.open .nav li:nth-child(5) {
  -webkit-transition-delay: 500ms;
  transition-delay: 500ms;
}
.open .nav li:nth-child(6) {
  -webkit-transition-delay: 600ms;
  transition-delay: 600ms;
}
.open .nav li:nth-child(7) {
  -webkit-transition-delay: 700ms;
  transition-delay: 700ms;
}
.open .nav li:nth-child(8) {
  -webkit-transition-delay: 800ms;
  transition-delay: 800ms;
}
.nav a {
  display: inline-block;
   text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav a:hover{
  color: #fff;
}
   .title {
  position: relative;
    top: 0;
    animation-delay: 3s;
  }
.item {
    min-height: 400px;
  }
}
@media(max-width: 1440px) {
   .contacts {
    grid-template-columns: auto;
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .contacts .info {
    margin: 0 ;
  }
}
@media(max-width: 991.98px){
     .content-photo {
     grid-template-columns: repeat(2, minmax(250px, 1fr));
   }
}
@media(max-width: 767.98px){
  
}
@media(max-width: 579.98px){
  .content-photo {
    width: 100%;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    padding: 0;
    margin: 0;
    animation-delay: 3.5s;
  }
}
@media(max-width: 449.98px){
   .header {
   padding-bottom: 0; 
  }
   .contacts .info {
    display: flex;
    flex-direction: column;
    align-items: center;
}
   .content {
    background-position: top;
 }
  .contacts .map {
    display: contents;
}
.navbar.open {
text-align: left;
width: 100%
	}
  .header {
    flex-direction: column;
     }
}