body {

    cursor: url(/assets/barberpole/img/cursor.svg), auto;

}



::-webkit-scrollbar {

    width: 5px;

}



::-webkit-scrollbar-track {

    border-radius: 10px;

}



::-webkit-scrollbar-thumb {

    background: #D9B559;

    border-radius: 10px;

}



a,

button {

    cursor: url(/assets/barberpole/img/pointer.svg), auto !important;

}



section {

    padding: 80px 0;

}



.header-nav .header-logo {

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    padding: 0;

}



.header-logo img {

    width: 40px;

}



.header-nav .logo-show {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

}



.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.05);

    -webkit-backdrop-filter: blur(50px);

    backdrop-filter: blur(50px);

    z-index: 9;

}



.header-nav {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;



}



.header-nav a {

    position: relative;

    font-weight: 400;

    font-size: 20px;

    line-height: 23px;

    letter-spacing: 0.05em;

    text-transform: capitalize;

    color: #D0D0D0;

    padding: 15px 40px;

}



.header-nav a:before {

    content: "";

    position: absolute;

    top: 100%;

    width: 0%;

    left: 0;

    right: 0;

    height: 1px;

    background: #D9B559;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

}



.header-nav a:hover {

    color: #fff;

}



.header-nav a:hover:before {

    width: 100%;

}



.admin-bar .header {

    top: 32px;

}



.hero {

    position: relative;

    padding: 200px 0;

    height: 100%;

    min-height: 90vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.hero-inner {

    margin-bottom: 42px;
    margin-top: -42px;

}

.hero .btn {
    background: rgb(217 181 89/25%);
    color: #fff;
}

.hero::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(35, 31, 32, 0.8);

    z-index: -1;

}



.hero::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    z-index: -1;

}





.hero-info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



.hero-info img {

    max-width: 400px;

}



.divider {

    border-bottom: 1px dashed rgba(217, 181, 89, 0.5);

    margin: 15px 0;

    width: 100%;

}



.hero-bottom--item {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 25%;

    flex: 0 0 25%;

    max-width: 25%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}

.hero-bottom--item a{
	font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #909090;
    text-transform: capitalize;
    text-align: center;
}

.hero-bottom--item img {

    width: 42px;

    height: 42px;

}



.hero-bottom {

    width: 100%;

    max-width: 1080px;

    position: absolute;

    bottom: 40px;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    background: rgba(217, 217, 217, 0.07);

    border-radius: 10px;

    -webkit-filter: drop-shadow(0px 0px 10px rgba(217, 181, 89, 0.1));

    filter: drop-shadow(0px 0px 10px rgba(217, 181, 89, 0.1));

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    padding: 15px 40px;

}



.hero-bottom--inner {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    align-items: baseline;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.hero-bottom--item p {

    font-weight: 400;

    font-size: 18px;

    line-height: 21px;

    color: #D0D0D0;

    text-transform: capitalize;

    text-align: center;

}



.hero-info h1 {

    text-align: center;

    font-weight: 500;

    font-size: 25px;

    line-height: 29px;

    color: #BDBDBD;

    text-transform: uppercase;

    margin: 20px 0 30px 0;

    letter-spacing: 0.05em;

}



.btn {

    padding: 19px 45px;

    color: #FFFFFF;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    cursor: url(/assets/barberpole/img/pointer.svg), auto;

}



.btn-main {

    background: rgba(217, 181, 89, 0.05);

    position: relative;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

    color: #ccc;



}



.btn-main::before {

    content: "";

    display: block;

    position: absolute;

    top: -2px;

    left: 0;

    right: 0;

    height: 100%;

    width: 60px;

    border-top: 2px solid #D9B559;

    border-left: 2px solid #D9B559;

    border-bottom: 2px solid #D9B559;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.btn-main::after {

    content: "";

    display: block;

    position: absolute;

    top: -2px;

    right: 0;

    right: 0;

    height: 100%;

    width: 60px;

    border-top: 2px solid #D9B559;

    border-right: 2px solid #D9B559;

    border-bottom: 2px solid #D9B559;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.btn-main:hover::before,

.btn-main:hover::after {

    width: 50%;

}



.btn-main:hover {

    background: rgb(217 181 89 / 25%);

    color: #fff;

}



.benefits--item {

    max-width: 230px;

    margin: 0 auto 30px auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    cursor: url(/assets/barberpole/img/pointer.svg), auto;

}



.benefits--item img {

    width: 100px;

    height: 100px;

    -o-object-fit: cover;

    object-fit: cover;

    margin: 0 0 25px 0;

    transition: all .3s;

}



.benefits--item:hover img {

    transform: scale(1.1);

}



.benefits--item p {

    font-weight: 300;

    font-size: 15px;

    line-height: 18px;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    text-align: center;

    color: #FFFFFF;

}



.main-title {

    width: -webkit-fit-content;

    width: -moz-fit-content;

    width: fit-content;

    font-weight: 300;

    font-size: 30px;

    line-height: 36px;

    color: #FFFFFF;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    text-align: center;

    position: relative;

    margin: 0 auto 100px;

}



.main-title::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    background: url(/assets/barberpole/img/title-icon-light.svg);

    display: block;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    width: 100%;

    height: 29px;

    background-repeat: no-repeat;

    background-position: center center;

}



.service--title {

    font-weight: 400;

    font-size: 24px;

    line-height: 28px;

    letter-spacing: 0.05em;

    color: #FFFFFF;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin: 0 0 12px 0;

}



.service--title span {

    margin: 0 12px 0 0;

}



.service--block {

    padding: 15px 25px;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



.service--block>img {

    width: 145px;

}



.service--title img {

    width: 25px;

    height: 25px;

    -o-object-fit: cover;

    object-fit: cover;

}



.service-list {

    padding: 0 0 0 15px;

}



.service--item {

    font-weight: 300;

    font-size: 16px;

    line-height: 19px;

    letter-spacing: 0.05em;

    color: #FFFFFF;

    margin: 0 0 13px 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

}



.service--item:last-child {

    margin: 0;

}



.service--item .name,

.service--item .price {

    background: #231f20;

}



.service--item .name {

    flex: 0 0 65%;
    max-width: 65%;

}



.service--item .price {

    flex: 0 0 30%;
    max-width: 30%;
    font-size: 14px;
    text-align: right;

}



.service--item::after {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 0;

    content: ".............................................................................................................................................";

    z-index: -1;

    width: 100%;

}



.service-1 {

    top: -65px;

    position: relative;

}



.service-3 {

    top: 65px;

    position: relative;

}



.botom-left {

    position: absolute;

    bottom: 0;

    left: 0;

}



.bottom-right {

    position: absolute;

    bottom: 0;

    right: 0;

}



.top-right {

    position: absolute;

    top: 25px;

    right: 0;

}



.services {

    padding: 80px 0 145px 0;

}



.services .services-text {

    font-weight: 400;

    font-size: 18px;

    letter-spacing: 0.1em;

    text-align: center;

    color: #e8e8e8;

    line-height: 1.6;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 24px;

}

.services .services-text p,
.services .services-text div:not(.btn),
.services .services-text span,
.services .services-text li {

    color: inherit;

    line-height: inherit;

}

/* Текст з WP часто з темним inline color — перебиваємо лише в цьому блоці */
.services .services-text p[style*="color"],
.services .services-text span[style*="color"] {

    color: #e8e8e8 !important;

}

.services p {

    font-weight: 400;

    font-size: 18px;

    letter-spacing: 0.1em;

    text-align: center;

    color: #DADADA;

    margin: 0 0 20px 0;

    line-height: 21px;

}



.services li {

    font-weight: 300;

    font-size: 18px;

    letter-spacing: 0.1em;

    text-align: center;

    color: #DADADA;

    margin: 0 0 20px 0;

    line-height: 21px;

}



.services .btn {

    display: block;

    text-align: center;

    max-width: 160px;

    margin: 0 auto;

}



.owl-prev {

    position: absolute;

    top: 50%;

    left: -50px;

    -webkit-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%);

    border: none;

    margin: 0 !important;

    width: 51px;

    height: 50px;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.owl-next {

    position: absolute;

    top: 50%;

    right: -50px;

    -webkit-transform: translate(0, -50%);

    -ms-transform: translate(0, -50%);

    transform: translate(0, -50%);

    border: none;

    margin: 0 !important;

    width: 51px;

    height: 50px;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.owl-nav button:hover {

    background: transparent !important;

    -webkit-transform: translate(0, -50%) scale(1.3) !important;

    -ms-transform: translate(0, -50%) scale(1.3) !important;

    transform: translate(0, -50%) scale(1.3) !important;

}



.barbers {

    background: rgb(35, 31, 32);

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 31, 32, 1)), color-stop(25%, rgba(0, 0, 0, 1)), color-stop(75%, rgba(0, 0, 0, 1)), to(rgba(35, 31, 32, 1)));

    background: -o-linear-gradient(top, rgba(35, 31, 32, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 75%, rgba(35, 31, 32, 1) 100%);

    background: linear-gradient(180deg, rgba(35, 31, 32, 1) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 75%, rgba(35, 31, 32, 1) 100%);

}



.barbers--block .btn-main {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    opacity: 0;

}



.barbers--block img {

    max-width: 240px;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;



}



.barbers--block {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



.barbers-slider {

    padding: 0 50px;

}



.barber-name {

    font-weight: 400;

    font-size: 16px;

    line-height: 19px;

    letter-spacing: 0.05em;

    color: #FFFFFF;

    margin: 0 0 3px 0;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.barber-work {

    font-weight: 400;

    font-size: 13px;

    line-height: 16px;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: #ADADAD;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.barbers--block:hover .barbers-photo,

.barbers--block:hover .barber-name,

.barbers--block:hover .barber-work {

    opacity: 0.5;

}



.barbers--block:hover .btn-main {

    opacity: 1;

}



.works--block .btn {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    opacity: 0;

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

    height: 100%;

    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.works--block .btn img {

    width: 40px;

    height: 40px;

}



.works--block:hover .btn {

    opacity: 1;

}



.works--block img {

    -webkit-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

    object-fit: cover;

    height: 290px;

}



.works--block:hover>img {

    opacity: 1;

    border: 1px solid #D9B559;

}



.works--block {

    position: relative;

}



.works-slider {

    position: relative;

    padding: 0 50px;

}



.works-slider .owl-stage-outer::before {

    content: "";

    position: absolute;

    width: 200px;

    left: 0;

    top: 0;

    bottom: 0;

    z-index: 9;

    background: -webkit-gradient(linear, right top, left top, from(rgba(2, 0, 36, 0)), color-stop(81%, rgba(35, 31, 32, 1)));

    background: -o-linear-gradient(right, rgba(2, 0, 36, 0) 0%, rgba(35, 31, 32, 1) 81%);

    background: linear-gradient(270deg, rgba(2, 0, 36, 0) 0%, rgba(35, 31, 32, 1) 81%);

}



.works-slider .owl-stage-outer::after {

    content: "";

    position: absolute;

    width: 200px;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: 9;

    background: -webkit-gradient(linear, left top, right top, from(rgba(2, 0, 36, 0)), color-stop(81%, rgba(35, 31, 32, 1)));

    background: -o-linear-gradient(left, rgba(2, 0, 36, 0) 0%, rgba(35, 31, 32, 1) 81%);

    background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, rgba(35, 31, 32, 1) 81%);

}



.owl-nav button {

    z-index: 8;

}



.leason {

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.leason::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgb(0 0 0 / 71%);

    -webkit-backdrop-filter: blur(1px);

    backdrop-filter: blur(1px);

    z-index: -1;

}



.leason::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    z-index: -2;

}



.leason-inner {

    max-width: 750px;

}



.leason--info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.leason-title {

    font-weight: 300;

    font-size: 34px;

    line-height: 40px;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    text-align: center;

    color: #FFFFFF;

    margin: 0 0 30px 0;

}



.leason--info p {

    font-weight: 400;

    font-size: 18px;

    letter-spacing: 0.1em;

    text-align: center;

    color: #DADADA;

    margin: 0 0 20px 0;

    line-height: 21px;

}



.leason--info .leason-text {

    width: 100%;

    max-width: 680px;

    font-weight: 400;

    font-size: 18px;

    line-height: 1.65;

    letter-spacing: 0.08em;

    text-align: center;

    color: #e8e8e8;

    margin: 0 auto 28px;

}



.leason--info .leason-text p,
.leason--info .leason-text div:not(.btn),
.leason--info .leason-text span {

    color: inherit;

    font-size: inherit;

    line-height: inherit;

}



.leason--info .leason-text p[style*="color"],
.leason--info .leason-text span[style*="color"] {

    color: #e8e8e8 !important;

}



.leason--info .leason-text p {

    margin: 0 0 1em 0;

}



.leason--info .leason-text p:last-child {

    margin-bottom: 0;

}



#leason-pop-up .leason-popup-text {

    font-size: 16px;

    line-height: 1.65;

    color: #e8e8e8;

}



#leason-pop-up .leason-popup-text p,
#leason-pop-up .leason-popup-text div {

    line-height: 1.65;

    margin: 0 0 1em 0;

}



#leason-pop-up .leason-popup-text p[style*="color"],
#leason-pop-up .leason-popup-text span[style*="color"] {

    color: #e8e8e8 !important;

}



.grid-sizer,

.grid-item {

    width: 16.6666%;

}



.grid-item {

    float: left;

}



.grid-item img {

    display: block;

    max-width: 100%;

}



.grid:after {

    content: '';

    display: block;

    clear: both;

}



.grid {

    max-height: 1200px;

    overflow: hidden;

    position: relative;

}



.grid::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 350px;

    background: -webkit-gradient(linear, left top, left bottom, from(rgba(35, 31, 32, 0)), color-stop(40.63%, rgba(35, 31, 32, 0.5)), color-stop(60.42%, rgba(35, 31, 32, 0.7)), color-stop(80.73%, rgba(35, 31, 32, 0.95)), to(#231F20));

    background: -o-linear-gradient(top, rgba(35, 31, 32, 0) 0%, rgba(35, 31, 32, 0.5) 40.63%, rgba(35, 31, 32, 0.7) 60.42%, rgba(35, 31, 32, 0.95) 80.73%, #231F20 100%);

    background: linear-gradient(180deg, rgba(35, 31, 32, 0) 0%, rgba(35, 31, 32, 0.5) 40.63%, rgba(35, 31, 32, 0.7) 60.42%, rgba(35, 31, 32, 0.95) 80.73%, #231F20 100%);

}



.grid-btn {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    position: absolute;

    bottom: 20px;

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    letter-spacing: 0.3em;

    text-transform: uppercase;



    color: #FFFFFF;

    white-space: nowrap;

    z-index: 9;

    font-weight: 300;

    font-size: 26px;

    line-height: 30px;

}



.contacts--reviews {

    position: absolute;

    bottom: 5px;

    right: 1px;

}



.contacts-map {

    position: relative;

}



.contacts--reviews>img {

    width: 44px;

    height: 44px;

    margin: 0 10px 0 0;

}



.contacts--reviews {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    background: #231F20;

    padding: 10px;

    color: #D2D2D2;

}



.stars img {

    width: 19px;

}



.contacts--reviews a {

    color: #8AB4F8;

}



.stars {

    margin: 0 5px 0 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.stars img:first-child {

    margin: 0 0 0 5px;

}



.contacts-info .hero-bottom--item {

    max-width: 100%;

    width: 100%;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 auto;

    flex: 0 0 auto;

}



.contacts-info {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    height: 100%;

    position: relative;

}



.footer {

    background: #1D1A1B;

    padding: 48px 0;

}



.footer-inner {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.footer p {

    font-weight: 300;

    font-size: 18px;

    line-height: 21px;

    text-align: center;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    margin: 0 0 5px 0;

    color: #FFFFFF;

}



.footer div {

    text-align: center;

    font-weight: 300;

    font-size: 14px;

    line-height: 16px;

    letter-spacing: 0.3em;

    text-transform: uppercase;



    color: #585858;

}



.footer div a {

    color: #585858;

    text-decoration: underline;

}



.mobile-nav {

    display: none;

}



.barbers-photo {

    position: relative;

}



.barbers-photo::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 40px;

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0 0 0 / 0%)), color-stop(30%, rgb(0 0 0 / 30%)), color-stop(60%, rgb(0 0 0 / 60%)), to(rgb(0 0 0)));

    background: -o-linear-gradient(top, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 30%) 30%, rgb(0 0 0 / 60%) 60%, rgb(0 0 0) 100%);

    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 30%) 30%, rgb(0 0 0 / 60%) 60%, rgb(0 0 0) 100%);

}



.tabs__content {

    display: none;

}



.tabs__content.active {

    display: block;

}



.tabs__caption {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin: 0 0 1rem 0;

}



.tabs__caption li {

    font-weight: 400;

    font-size: 18px;

    line-height: 21px;

    color: #D0D0D0;

    cursor: url(/assets/barberpole/img/pointer.svg), auto;

    margin: 0 1rem 0 0;

    text-align: center;

}



.tabs__caption li.active {

    color: #D9B559;

    text-decoration: underline;

}



.popup {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100% !important;

    height: 100% !important;

    z-index: 999999;

    display: none;

}



.popup-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: #000000d1;

    z-index: 9;

    cursor: url(/assets/barberpole/img/close.svg), auto;

}



.popup-inner {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    z-index: 9;

    color: #fff;

    max-width: 650px;

    width: 100%;

    padding: 20px;

    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    overflow: auto;

}



.popup-box {

    padding: 20px;

    background: #231F20;

    border-radius: 10px;

    position: relative;

}



#price .popup-inner {

    max-width: 1440px;

}



.popup-info p {

    margin: 0 0 1rem 0;

    color: #c9c9c9;

}



.popup-title {

    font-size: 30px;

    margin: 0 0 1.5rem 0;

}



.popup-title span {

    font-size: 14px;

    display: block;

    margin: 0.5rem 0 0 0;

    text-decoration: underline;

}



.popup-footer {

    padding: 1rem 0 0 0;

}



.popup-close {

    top: -15px;

    right: -15px;

    position: absolute;

    background: #231F20;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    cursor: url(/assets/barberpole/img/pointer.svg), auto;

    -webkit-transition: all.3s;

    -o-transition: all.3s;

    transition: all.3s;

}



.popup-close:hover {

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

}



.popup-close img {

    width: 40px;

}



.popup-barber {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

}



.popup-barber-photo {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 40%;

    flex: 0 0 40%;

    max-width: 40%;

}



.popup-barber-photo img {

    border-radius: 10px;

    height: 100%;

    -o-object-fit: cover;

    object-fit: cover;

}



.popup-barber-info {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 60%;

    flex: 0 0 60%;

    max-width: 60%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 10px 0 10px 30px;

}



.popup-barber-info p {

    font-size: 20px;

    margin: 0 0 2rem 0;

    text-align: justify;

    letter-spacing: 0.1px;

    font-weight: 400;

}



.popup-barber-info .btn {

    padding: 15px 25px;

    width: 100%;

    text-align: center;

}



#reg .popup-box {

    padding: 0;

}



.popup-price-table table {

    width: 100%;

    border-collapse: collapse;

}



th,

td {

    text-align: left;

    padding: 10px;

    border: 1px solid #d9b559;

}



.popup-price-table table tr:first-child {

    background: #d9b559;

    color: #231f20;

    font-size: 17px;

}



th {

    font-weight: 800;

}



#price .main-title {

    margin: 0 auto 50px;

}



.popup-price-table {

    overflow: auto;

}



@media(max-width:1200px) {



    .main-title,

    .leason-title {

        font-size: 30px;

        line-height: 35px;

    }



    .grid-sizer,

    .grid-item {

        width: 20%;

    }

}



@media(max-width:990px) {

    .popup-inner {

        display: block;

    }

}



@media(max-width:990px) {

    #reg .popup-inner {

        display: flex;

    }

}



@media(max-width:768px) {

    .header {

        display: none;

    }



    body {

        padding: 0 0 77px 0;

    }



    .main-title {

        margin: 0 auto 50px;

    }



    .service-1,

    .service-3 {

        top: auto;

    }



    .hero-info img {

        width: 60%;

    }



    .hero {

        padding: 50px 0 10px 0;

        /* min-height: auto; */

    }



    .hero .hero-bottom--item p {

        font-size: 13px;

        line-height: 15px;

    }
	.hero-bottom--item a{
		        font-size: 12px;

        line-height: 13px;
	}


    .hero-bottom--item {

        flex: 0 0 33.333%;

        max-width: 33.333%;

    }



    .hero-bottom {

        position: relative;

        top: auto;

        bottom: auto;

        margin: 50px 0 0 0;

        padding: 10px;

    }



    .hero-inner {

        padding: 0 10px;

        margin-top: -24px;

    }



    section,

    .services {

        padding: 40px 0;

    }





    .leason--info p,
    .leason--info .leason-text {

        padding: 0 15px;

        font-size: 16px;

        line-height: 1.6;

    }



    .contacts-info .btn-main {

        margin: 2rem 0 0 0;

    }



    .contacts-info .hero-bottom--item {

        margin: 1rem 0;

    }



    .contacts--reviews {

        width: calc(100% - 3px);

        left: 1px;

    }



    .main-title,

    .leason-title {

        font-size: 24px;

        line-height: 30px;

    }



    .grid-sizer,

    .grid-item {

        width: 25%;

    }



    .grid {

        max-height: 800px;

        overflow: hidden;

        position: relative;

    }



    .grid-btn {

        font-size: 17px;

        line-height: 25px;

    }

}



@media(max-width:700px) {



    .works-slider .owl-stage-outer::before {

        width: 50px;

    }



    .works-slider .owl-stage-outer::after {

        width: 50px;

    }



    .mobile-nav {

        position: fixed;

        display: block;

        bottom: 0;

        left: 0;

        right: 0;

        width: 100%;

        z-index: 999;

        background: rgba(255, 255, 255, 0.05);

        -webkit-backdrop-filter: blur(50px);

        backdrop-filter: blur(50px);

    }



    .mobile-nav-inner {

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -ms-flex-pack: distribute;

        justify-content: space-around;

    }



    .mobile-nav-inner a {

        font-size: 12px;

        font-weight: 300;

        color: #fff;

        padding: 10px 5px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-orient: vertical;

        -webkit-box-direction: normal;

        -ms-flex-direction: column;

        flex-direction: column;

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        justify-content: center;

        color: #D9B559;

    }



    .header-nav a {

        display: none;

    }



    .header-nav .header-logo {

        display: block;

        -webkit-transform: scale(1) !important;

        -ms-transform: scale(1) !important;

        transform: scale(1) !important;

        padding: 10px;

    }



    .header-logo img {

        width: 60px;

    }



    .mobile-nav a img {

        width: 30px;

        margin: 0 0 0.3rem 0;

    }

}



@media(max-width:660px) {

    #reg-frame {

        width: 88vw;

        height: 90vh;

    }

}



@media(max-width:578px) {

    .popup-barber-photo {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

        height: 340px;

        overflow: hidden;

        border-radius: 10px;

    }



    .popup-barber-info {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 100%;

        flex: 0 0 100%;

        max-width: 100%;

        padding: 10px;

    }



    .popup-barber {

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

    }

}



@media(max-width:500px) {
    .service--item .name {
        font-size: 14px;
    }

    .service--item .price {
        font-size: 12px;
    }

    .service--title {

        font-size: 20px;

        line-height: 26px;

    }



    #price .col-lg-4 {

        padding: 0;

    }



    .service--block {

        padding: 15px;

    }



    .top-right {

        display: none;

    }



    .service--item {

        font-size: 15px;

        line-height: 18px;

    }



    .service-list {

        padding: 0;

    }



    .services p,
    .services .services-text {

        font-size: 15px;

        line-height: 1.55;

    }



    .hero .hero-bottom--item img {

        width: 34px;

        height: 34px;

    }



    .hero .hero-bottom--item p {

        font-size: 11px;

        line-height: 14px;

    }

	.hero-bottom--item a{
		        font-size: 11px;

        line-height: 14px;
	}



    .service--block>img {

        width: 90px;

    }



    .benefits--item img {

        width: 85px;

        height: 85px;

    }



    .hero-info h1 {

        font-size: 19px;

        line-height: 20px;

    }



    .main-title,

    .leason-title {

        font-size: 20px;

        line-height: 26px;

    }



    .grid-sizer,

    .grid-item {

        width: 33.333%;

    }



    .grid {

        max-height: 500px;

    }



    .grid-btn {

        font-size: 13px;

        line-height: 16px;

    }



    .works-slider .owl-stage-outer::before {

        content: none;

    }



    .works-slider .owl-stage-outer::after {

        content: none;

    }

}



@media(max-width:350px) {

    .grid-btn {

        white-space: initial;

    }

}



@media(min-width:500px) {

    body {

        font-variant: small-caps;

    }

}