@media all and (max-width: 1630px) 
{
	div.inner, ul.services-menu{margin: 0 15px !important}
	div.salon-services > div.inner{margin: 0 auto !important;}
	#content.default{background-position: bottom 50px right 5%;}
	div.section.workers div.carousel, div.gallery div.carousel{margin-left: 15px}
}

@media all and (max-width: 1600px)
{
	#index-banner-slider div.banner-text{top: 210px !important; left: 8% !important}
	#index-banner-slider div.banner-text div.main{font-size: 62px; line-height: 63px}

	div.salon-top div.content h1{font-size: 50px; line-height: 50px}
	div.salon-block div.inner div.text h2{font-size: 40px; line-height: 40px}
	div.salon-block.first div.inner div.text{padding-left: calc((100% - 1050px) / 2);}
}

@media all and (max-width: 1500px)
{
	div.salon-block.first div.inner div.images img:last-child{bottom: -30px; left: -30%;
	width: 300px}
	div.salon-block.second div.inner div.images img:last-child{bottom: -30px; right: -30%;
	width: 300px}	
}

@media all and (max-width: 1400px)
{
	div.service-top div.left{margin-right: 25px; width: 610px; flex-shrink: 0}

	#index-banner-slider div.banner-text div.main{font-size: 40px; line-height: 50px; margin-bottom: 20px !important}
	#index-banner-slider div.banner-text div.text{font-size: 16px !important;}
	#index-banner-slider div.banner-text div.text p{margin-bottom: 25px !important}
	#index-banner-slider div.banner-text div.clever{margin-bottom: 20px; font-size: 20px; line-height: 30px}	
}

@media all and (max-width: 1300px)
{
	div.services > a > span{width: 90%; left: 7%; font: 30px/40px 'Montserrat-Bold';
	padding: 23px 10% 15px 7%; height: 130px}
	div.services > a > span span{padding: 8px 0 0 5%; font: 18px/23px 'Nunito-Regular'}
	#content.service-details{overflow: hidden;}

	/* div.salon-block.first div.inner div.left{padding: 0 3% 30px 0} */
	div.salon-block.first div.inner div.left{padding-right: 3%; padding-bottom: 30px}
	div.salon-block.second div.inner div.right{padding: 0 0 30px 3%}
}

@media all and (max-width: 1150px)
{
	#header > div.top .time{display: none;}
	#footer div.inner div{width: 30%; font-size: 16px; line-height: 20px}
	#footer p.small{line-height: 20px}

	div.carousel{height: auto !important; width: 100% !important; margin-left: 15px !important}
	div.carousel div.item{width: 300px; height: auto !important;}
	div.carousel div.name{margin-bottom: 10px}
	div.carousel div.position{font-size: 16px; line-height: 18px}

	div.reviews-list > div{background-position: right 5% top 12px}

	#map-contacts{position: static; margin: 0 2% 20px 2%; width: 96%;}
	#map-contacts div.header{width: 100%}
	#map-contacts div[id^="contact-tab-"].active{display: grid; grid-template-columns: 1fr 1fr;
	grid-column-gap: 5%}


	div.salon-top{margin-bottom: 80px}
	div.salon-top #map-contacts{width: 415px; margin: 0}
	div.salon-top #map-contacts > div{display: flex !important;}
	div.salon-top .swiper img{width: 100%}
	div.salon-top div.content div.breadcrumbs{padding: 15px 0 0 0; margin-bottom: 15px}
	div.salon-top div.content a.other-salon{margin-bottom: 15px}
	div.salon-top div.content h1{font-size: 35px; line-height: 42px; margin-bottom: 15px}
	div.salon-top div.content{padding: 0 1% 0 2%}

	div.service-top{align-items: flex-start;}
	div.service-top div.left{max-width: 47%; margin: 0}
	div.service-top ul.submenu{position: static; padding: 20px 0 5px 0; flex-wrap: wrap;}
	div.service-top ul.submenu li{margin-bottom: 15px}

	div.carousel ul.salons{flex-direction: column; gap: 5px}

	div.salon-services{padding: 80px 0; margin-bottom: 80px}
	div.salon-services > div.inner{margin: 0 15px !important;}
	div.salon-block{margin-bottom: 80px}
}

@media all and (max-width: 1000px)
{
	#header div.social-networks{display: none;}
	div.services{flex-direction: column; align-items: center; margin-bottom: 40px}
	div.services > a{width: 100%; max-width: 500px; margin-bottom: 60px}

	#scroll-up-button{right: 2%; bottom: 20px}

	div.editable img{max-width: 100%; display: block;}
	div.editable table{max-width: 100%}
	div.editable table td{vertical-align: top;}

	div.salon-top{background: url(../images/hearts.svg) left 100px bottom no-repeat}
	div.salon-top div.content{background: none;}
}

@media all and (max-width: 900px)
{
	#header > div.top .address, ul.services-menu{display: none;}
	#header div.bottom{height: 60px;}
	#logo{width: 160px}
	#header ul.main-menu, #header > div.top{display: none;}
	#mobile-menu-button{display: block;}

	div.breadcrumbs{padding-top: 15px; margin-bottom: 15px}
	h1{font-size: 50px; line-height: 50px; margin-bottom: 25px}
	h2{font-size: 40px; line-height: 40px}
	h2{font-size: 30px; line-height: 30px}
	div.salon-block div.inner div.text h2{font-size: 30px; line-height: 30px}

	div.section{padding: 50px 0 !important}
	div.section-header{font-size: 30px; line-height: 30px}
	div.swiper-navigation{bottom: 0; gap: 5px; width: 70px}
	div.swiper-navigation > div{width: 30px; height: 30px}

	div.section.sertificate{height: auto;}
	div.section.sertificate div.data{background: #fff; padding: 12px}

	div.service-top{flex-direction: column;}
	div.service-top div.left{margin-bottom: 30px; margin-right: 0; width: 100%;
	max-width: 100%}
	div.service-top > img{margin: 0 auto;}

	#main-wrapper{padding-bottom: 150px}
	#footer{height: 150px !important;}
	#footer div.inner{flex-direction: column; gap: 10px; padding: 10px 0 !important;
	z-index: 100; height: 100%}
	#footer div.inner div{width: 100%}

	div.section.contacts{padding-bottom: 20px !important}
}

@media all and (max-width: 800px)
{
	div.section.contacts div.data{flex-direction: column;}
	div.section.contacts div.data > *{width: 100%; margin-bottom: 15px}

	#map-contacts{flex-direction: column; padding: 25px 20px 25px 35px; gap: 12px;}
	#map-contacts > *{width: 100% !important}

	div.salon-top #map-contacts{padding: 30px 29px 30px 20px; left: auto; right: auto; position: static;  width: auto;}
	div.reviews-list div span.salon{width: 100%; margin: 0 0 5px 0; display: block;}

	div.salon-services > div.inner > p{width: 100%; margin-bottom: 25px}
	div.salon-services > div.inner > div.right{width: 70%}

	div.salon-block{margin-bottom: 30px}
	div.salon-block.first div.inner{flex-direction: column;}
	div.salon-block.second div.inner{flex-direction: column-reverse;}
	div.salon-block div.inner div.text, div.salon-block div.inner div.images{width: 100%}
	div.salon-block div.inner div.images img:first-child{margin: 0 auto 20px auto;}
	div.salon-block div.inner div.images img:last-child{position: static !important; width: auto !important; margin: 0 auto;}
	div.salon-block.first div.inner div.images{margin-bottom: 30px}

	div.section-header.with-buttons{margin-bottom: 15px}
	ul.workers-services-menu{margin-bottom: 20px; flex-wrap: wrap;}
	ul.workers-services-menu li{font-size: 14px; line-height: 25px}
}

@media all and (max-width: 700px)
{
	div.breadcrumbs{margin-bottom: 15px; padding-top: 10px}
	h1{font-size: 35px !important; line-height: 35px !important}
	#content.default{background: none;}

	#index-banner-slider{top: auto; margin-top: 0}
	#index-banner-slider .kr-nav-arrow{display: none !important;}
	#index-banner-slider div.banner-text{top: 45px !important; left: 5% !important; width: 90% !important}
	#index-banner-slider div.banner-text div.clever{font: 18px/28px 'Nunito-Regular' !important; margin-bottom: 10px !important}
	#index-banner-slider div.banner-text div.main{font-size: 30px !important; line-height: 40px !important;
	margin-bottom: 12px !important}

	div.service-top{align-items: center}
	div.service-top div.left{width: auto; width: 100%; margin-bottom: 20px}

	div.price-list{font: 16px/19px 'Nunito-Regular'}
	div.price-list div.section-prices > div{gap: 5%}
	#map{margin-bottom: 35px}
	#licences{margin-bottom: 20px}
	div.licence-gallery{flex-direction: column; margin: 0 0 20px 0; gap: 15px; align-items: center;}

	div.service-top div.available ul{flex-direction: column; gap: 5px}

	div.salon-top{flex-direction: column; margin-bottom: 30px}
	div.salon-top > div{width: 100% !important}
	div.breadcrumbs.mobile{display: block; padding-top: 20px}
	div.salon-top div.content div.breadcrumbs{display: none;}
	div.salon-top div.gallery{margin-bottom: 20px}
	div.salon-top div.gallery .swiper-pagination{bottom: 20px}
	div.salon-top div.content{padding: 0 15px;}
	div.salon-top #map-contacts{position: static; max-width: 100%}
	div.salon-top div.content a.other-salon, div.salon-top div.content h1{margin-bottom: 20px}

	div.salon-services{padding: 30px 0; margin-bottom: 30px}
	div.salon-services > div.inner div.section-header{margin-bottom: 20px}
	div.salon-block div.inner div.text p:first-child{margin-bottom: 10px}
	div.salon-block div.inner div.text ul li{margin-bottom: 10px}
}

@media all and (max-width: 600px)
{
	div.section{padding: 30px 0}
	div.services > a > span{font-size: 25px; line-height: 25px; height: auto; padding: 20px 5% 20px 5%;
	left: 5%}
	div.services > a > span span{font-size: 16px; line-height: 18px}

	div.reviews-list > div{flex-direction: column; align-items: center; background-size: 50px 30px;
	background-position-y: 250px}
	div.reviews-list > div > div{width: 100%}

	div.editable table{margin: 0 auto 20px auto;}
	div.editable table tr{display: flex; flex-direction: column;}
	
	#main-wrapper.index #footer{display: none;}
	#map-contacts div[id^="contact-tab-"].active{display: flex; flex-direction: column;}

	div.salon-services > div.inner > div.right{width: 100%}
	div.salon-services > div.inner > div.right ul{display: flex; flex-direction: column;}
	div.salon-services > div.inner > div.right ul li{margin-bottom: 12px}
	div.section.workers.in-salon{padding: 30px 0 !important}

	#footer div.inner{gap: 6px;}
}

@media all and (max-width: 400px)
{
	div.section.sertificate{background: #fff}
}