:root{
	--text: #40444e;
    --main: #155eaf;
    --gray: #e8e8eb;
    --light-gray: #f4f4f4;
}

@font-face {
    font-family: 'MyriadPro';
    src: local('MyriadPro'), 
		 local('MyriadPro-Regular'),
		 url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
         url('../fonts/MyriadPro-Regular.woff') format('woff'),
		 url('../fonts/MyriadPro-Regular.ttf') format('truetype');
	font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyriadPro';
    src: local('MyriadPro Italic'), 
		 local('MyriadPro-It'),
		 url('../fonts/MyriadPro-It.woff2') format('woff2'),
         url('../fonts/MyriadPro-It.woff') format('woff'),
		 url('../fonts/MyriadPro-It.ttf') format('truetype');
	font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'MyriadPro';
    src: local('MyriadPro Bold'), 
		 local('MyriadPro-Bold'),
		 url('../fonts/MyriadPro-Bold.woff2') format('woff2'),
         url('../fonts/MyriadPro-Bold.woff') format('woff'),
		 url('../fonts/MyriadPro-Bold.ttf') format('truetype');
	font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'MyriadPro';
    src: local('MyriadPro Bold Italic'), 
		 local('MyriadPro-BoldIt'),
		 url('../fonts/MyriadPro-BoldIt.woff2') format('woff2'),
         url('../fonts/MyriadPro-BoldIt.woff') format('woff'),
		 url('../fonts/MyriadPro-BoldIt.ttf') format('truetype');
	font-weight: 700;
    font-style: italic;
}

html { font-size: 1.041666666vw;}
body { font:1rem/1.75 'MyriadPro', Arial, sans-serif; color:var(--text); background:#fff;}

ul { margin: 0; padding: 0; list-style: none;}
a { color:var(--text); text-decoration: none;}
a:hover { text-decoration: none; color:var(--text);}
img { max-width: 100%; height: auto;}
.row { margin-left:-1rem; margin-right: -1rem;}
[class^="col-"], [class*=" col-"] { padding-left: 1rem; padding-right: 1rem;}
.wow { visibility: hidden;}
.rubl { font-size: 0.9em;}

/* home */
#home_wrapper { height: 100vh; display: flex; align-items: center;}
.home-content { display: block; width: 100%; padding: 0 20%;}
.home-content h2 { text-align: center; font-size: 2.1rem; line-height: 2.1rem; color:var(--main); text-transform: uppercase; font-weight: bold; margin: 0 0 3.8rem;}
.home-clubs { width: 100%; display: flex; justify-content: space-between; flex-wrap:wrap;}
.home-clubs .club-col { width: 48.6%;}
.home-clubs .club-item { display: block; position:relative; text-decoration: none;}
.home-clubs .club-item .item-thumb { display: block; position: relative; padding-bottom: 80%; border-radius: 0.8rem; overflow: hidden;}
.home-clubs .club-item .item-thumb img { display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius: 0.8rem; object-fit: cover; object-position: center; transform:scale(1); transition:all 0.2s  ease;}
.home-clubs .club-item .item-thumb:before { content:''; display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius: 0.8rem; z-index: 1; background: rgba(0,0,0,0.55);}
.home-clubs .club-item .item-caption { display: block; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size: 2rem; color:#fff; font-weight: bold; text-transform: uppercase; z-index: 2;}
.home-clubs .club-item .item-thumb:hover img, .home-clubs .club-item .item-thumb:active img { transform: scale(1.05);}

#left-bar { background: #414451; position: fixed; top:0; left:0; height: 100%; width: 14.6rem; z-index: 200; overflow:auto; -ms-overflow-style: none; scrollbar-width: none;}
#left-bar::-webkit-scrollbar { display: none;}
.logo { display: block; height: 14.5rem; position: relative; padding: 2.2rem;}
.logo:before { content:''; display: none; position: absolute; left:0; top:0; width:18rem; height: 18rem; background: url(../img/logo-shadow.png) no-repeat 0 0; background-size: 100% 100%;}
.logo img { display: block; margin: 0 auto; width: 7.2rem; height: auto; position: relative; z-index: 1;}
.logo { height: auto; padding: 0;}
.logo video { display: block; width:100%; height: 14.6rem;}
.left-menu { border-top:1px solid rgba(255,255,255,0.15);}
.left-menu li { border-bottom:1px solid rgba(255,255,255,0.15);}
.left-menu li a { display: flex; align-items: center; color:#fff; height: 6.8rem; padding: 2rem 1rem 2rem 2rem; font-size: 0.9rem; text-transform: uppercase;}
.left-menu li a svg, .left-menu li a img { display: block; width: 2.8rem; height: 2.8rem; flex-shrink: 0; margin-right: 1rem;}
.left-menu li a img { object-fit: contain; object-position: center;}
.left-menu li a:hover, .left-menu li a:active, .left-menu li.active a { background:url(../img/panel-active.jpg) no-repeat 0 0; background-size:100% 100%; color:#fff;}

#wrapper { padding-left: 14.6rem; padding-top: 8rem; padding-bottom: 2rem; min-height: 100vh;}
.container, .container-fluid { padding-left: 4.5rem; padding-right: 4.5rem;}

/* header */
#header { position: fixed; top:0; left:14.6rem; right:0; height: 8rem; padding-top: 1.5rem; background: #fff; z-index: 200;}
.header-flex { height: 5.4rem;}
.header-socials { background: var(--main); border-radius: 0.7rem; padding: 0.9rem 1.5rem 1rem; font-size: 1.2rem; color:#fff; text-transform: uppercase; width: calc(100% - 23.15rem);}
.header-socials .social-btn { width: 3.5rem; height: 3.5rem; background: rgba(255,255,255,0.15); border-radius: 0.7rem; padding: 0.9rem; color:#fff; margin-right: 1.3rem;}
.header-socials .social-btn svg, .header-socials .social-btn img { display: block; margin: 0; width: 1.7rem; height: 1.7rem;}
.header-socials .slogan { margin-left: 1.5rem;}
.header-btn { display: flex; align-items: center; background: var(--main); color:#fff; border-radius: 0.7rem; width: 21.4rem; padding: 1rem 1.5rem;}
.header-btn svg, .header-btn img { display: block; margin: 0; width: 2.8rem; height: 2.8rem; margin-right: 1.8rem; flex-shrink: 0; object-fit: contain; object-position: center;}
.header-btn:hover, .header-btn:active { background: #196bc1; color:#fff;}

/* section */
.section { padding: 2.5rem 0;}
.section-heading { text-align: center; margin-bottom:2rem;}
.section h2 { font-size:2.5rem; line-height: 3rem; font-weight: bold; text-transform: uppercase; color:var(--main); margin: 0;}
.section-desc { margin-top: 0.5rem;}
.btn { display: inline-block; background: var(--main); color:#fff; font-size: 1rem; line-height: 1.5rem; padding: 1rem 1.5rem; border-radius: 0.7rem; text-align: center; text-decoration: none;}
.btn:hover { color:#fff;}

#fitness_section { padding-top: 1.5rem;}
#fitness_section .section-heading, #benefits_section .section-heading { margin-bottom: 2.4rem;}
.carousel-wrap { position: relative;}
.owl-with-scrollbar.owl-loaded { margin-right: -4.5rem; width: calc(100% + 4.5rem);}
.owl-with-scrollbar.owl-loaded .owl-stage-outer { padding-right: 4.5rem;}
.owl-with-scrollbar .owl-stage { display:flex;}
.owl-with-scrollbar .owl-stage:after { display: none;}
.owl-with-scrollbar .item { width: 20.6rem; visibility: hidden; animation-duration: 0.3s; animation-delay: 0.3s;}
.owl-with-scrollbar .item.animated { visibility: visible;}
.owl-scrollbar { width: 18.2rem; margin: 0 auto 2.4rem; height:0.3rem; position: relative; background: #fff; border-radius: 0.2rem; box-shadow:inset -2px 2px 2px rgba(0,0,0,0.18);}
.owl-scrollbar .bar-left { display: block; position: absolute; top:0; left:0; width: 0; height: 0.3rem; border-radius: 0.2rem 0 0 0.2rem; background: var(--main); z-index: 1;}
.owl-scrollbar .bar-container { position: absolute; left: 0; top: -1.25rem; padding:0; width: 2.8rem; height: 2.8rem; cursor: pointer; z-index: 2;}
.owl-scrollbar .bar-container .bar { display: block; position: relative; width: 2.8rem; height: 2.8rem; background:url(../img/marker.png) no-repeat 0 0; background-size: 100% 100%; z-index: 4;}
.owl-scrollbar .bar-container:before { content:''; display: block; position: absolute; left:0; top:0.1rem; width: 3.8rem; height:4.25rem; background:url(../img/marker-shadow.png) no-repeat 0 0; background-size: 100% 100%;  z-index: 3; pointer-events: none;}
.owl-carousel .owl-dots { display: none;}

.carousel-photos { margin-top: 2.6rem;}
.photo-item { position: relative; padding-bottom: 78.6%;}
.photo-item img { display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0.7rem;}

.virtual-box { position: relative; overflow: hidden; border-radius: 0.7rem;}
.virtual-box video { display: block; width: 100%; border-radius: 0.7rem;}
.virtual-box .box-overlay { display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); border-radius: 0.7rem;}
.virtual-box .box-overlay .hand { display: block; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 10.3rem; height: 10.3rem; padding: 2rem; background: var(--primary); border-radius: 50%; transition:all 0.2s ease;}
.virtual-box .box-overlay .hand img { display: block; width: 6.3rem; height: 6.3rem; animation: swing 1s ease-in-out infinite alternate;}
.virtual-box .box-overlay:hover .hand { width: 11.3rem; height: 11.3rem; padding: 2.5em;}
@keyframes swing {
      0% { transform: rotate(-10deg);}
      50% { transform: rotate(10deg);}
      100% { transform: rotate(-10deg);}
}


.carousel-benefits .owl-carousel { counter-reset: point;}
.owl-with-scrollbar .benefit-item { height: 100%;}
.benefit-item { background: var(--light-gray); border-radius: 0.7rem; padding:1.6rem 8%;}
.benefit-item .benefit-image { position: relative;}
.benefit-item .benefit-icon { max-width:16.2rem; margin: 0 auto;}
.benefit-item .benefit-icon img { display: block; margin: 0; width: 100%;}
.benefit-item .benefit-image:before { content: counter(point); counter-increment: point 1;  display: block; position: absolute; left:0; bottom:0.5rem; font-size: 2.5rem; line-height: 4.343m; font-weight: bold; text-align: center; width: 4.3rem; height: 4.3rem; color:#fff; background: var(--main); border-radius: 50%; z-index: 1;}
.benefit-item .caption { margin-top: 1.2rem; font-size: 0.85rem; line-height: 1.25rem;}

.abon-item { display: flex; flex-direction: column; border:1px solid var(--main); background: #fff; height: 100%; border-radius: 0.7rem; padding: 1.6rem 1.4rem;}
.abon-item .abon-period { text-align: center; margin-bottom: 1rem;}
.abon-item .item-caption { font-size: 2rem; line-height: 2.4rem; font-weight: bold; text-transform: uppercase; text-align: center; color:var(--main);}
.abon-item .item-mark { display: block; width: 6.9rem; height: 1rem; margin: 0.2rem auto 2.2rem; background: url(../img/mark.png) no-repeat center center; background-size: contain;}
.abon-item .item-mark.hidden { opacity: 0;}
.abon-item .list-check { margin-bottom: 1.2rem;}
.list-check { list-style: none;}
.list-check li { position: relative; padding-left: 1.3rem; font-size: 0.75rem; line-height: 1.1rem; margin-bottom: 0.6rem;}
.list-check li:before { content:''; display: block; position: absolute; width: 0.55rem; height: 0.4rem; left:0; top:0.35rem; background: url(../img/check.png) no-repeat 0 0; background-size: 100% 100%;}
.abon-item .item-prices { margin-top: auto;}
.item-prices .prices-flex { display: flex; align-items: flex-start; min-height: 4.35rem;}
.item-prices .old-price { font-size: 1.6rem; line-height: 1.8rem; text-decoration: line-through; opacity: 0.5; margin-right: 3rem;}
.item-prices .new-price { color:var(--main); position: relative;}
.item-prices .new-price .price-period { font-size: 1.6rem; line-height: 1.8rem; font-weight: bold;}
.item-prices .new-price .price-save { font-size: 1.1rem; line-height: 1.75rem; font-weight: bold; text-align: center; padding-top: 0.25rem; margin-top: 0.25rem; border-top:1px solid rgba(100,104,120,0.15);}
.item-prices .new-price .price small { font-weight: 400; font-size: 1rem;}
.item-prices .new-price .tooltip-mark { position:absolute; top:0.4rem; left:-1.7rem; margin:0; line-height: 1.05rem; background: transparent; color:var(--main); border:1px solid var(--main);}

.abon-item.active { background: var(--main); color:#fff;}
.abon-item.active .item-caption, .abon-item.active .item-prices .new-price { color:#fff;}
.abon-item.active .item-mark { background-image: url(../img/mark-white.png);}
.abon-item.active .list-check li:before { background-image: url(../img/check-white.png);}
.abon-item.active .item-prices .new-price .price-save { border-top:1px solid rgba(255,255,255,0.15);}
.abon-item.active .item-prices .new-price .tooltip-mark { color:#fff; border-color:#fff;}
.bottom-text { margin-top: 2.5rem; line-height: 1.5; text-align: center; color:#767676;}
.bottom-text > :last-child { margin-bottom: 0;}

.trainer-item { position: relative; color:#fff;}
.trainer-photo { display: block; position: relative; border-radius:1.25rem; overflow: hidden; padding-bottom: 130%;}
.trainer-photo img { display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius: 1.25rem; object-fit: cover; object-position: center; transform:scale(1); transition: all 0.3s ease;}
.trainer-photo:hover img { transform:scale(1.1);}
.trainer-item .item-entry { display: flex; flex-direction:column; justify-content: flex-end; padding: 1.125rem 1.25rem; font-size: 1rem; line-height: 1.25rem; position: absolute; left:0; top:0; width: 100%; height: 100%; border-radius:1.25rem; background: linear-gradient(180deg, rgba(0,0,0,0.01) 70%, rgba(0,0,0,0.87) 100%); pointer-events: none;}
.trainer-item .item-name { font-size:1.25rem; line-height:1.5rem; font-weight: bold;}
.trainer-item .item-price { margin-top: 5px;}
.tr-buttons { display: flex; justify-content: space-between; margin-top: 1.1rem;}
.tr-buttons .btn { width: calc(50% - 0.3rem);}
.tr-caption { font-size: 1.25rem; line-height: 1.5rem; font-weight: bold; text-transform: uppercase; color:var(--main); margin-bottom: 1.3rem;}
.tr-box { margin-bottom: 1.5rem;}
.tr-box:last-child { margin-bottom: 0;}
.tr-box h4 { font-size: 0.9rem; line-height: 1.2rem; font-weight: bold; text-transform: uppercase; color:var(--main); margin:0 0 0.8rem;}
.tr-box ul li { font-size: 1rem; line-height: 1.2rem; margin: 0 0 0.6rem; padding-left: 1rem;}
.tr-box ul li:before { top:0.45rem;}
.tr-box br:last-child { display: none;}

/* staff single */
.row.gutters-24 { margin-left: -0.6rem; margin-right: -0.6rem;}
.row.gutters-24>[class^="col"], .row.gutters-24>[class*=" col"] { padding-left:0.6rem; padding-right:0.6rem;}
.backdrop-overlay { display: block; visibility: hidden; opacity: 0; pointer-events: none; position: fixed; left: 0; top: 0; z-index:800; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .25); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.sidebar-active .backdrop-overlay { visibility: visible; opacity: 1; pointer-events: all;}
.sidebar-active { overflow: hidden;}
.sidebar-single { display: block; position: fixed; width: 40.5rem; right:-41rem; top:0; height: 100%; z-index: 999; background-color: #fff; -webkit-transition: .375s ease-in-out; transition: .375s ease-in-out;}
.sidebar-single.active { right:0;}
.sidebar-header { position: absolute; left:0; top:0; width: 100%; padding:1.8rem 2.5rem 0.8rem; background: #fff; z-index: 2; border-bottom:1px solid #f1f2f6;}
.sidebar-phone { font-size: 0.8rem; line-height: 1.4rem; font-weight:bold; position: relative; padding-left:0.95rem;}
.sidebar-phone svg { display: block; position: absolute; left: -0.05rem; top:0.3rem; width:0.75rem; height:0.75rem;}
.sidebar-phone svg path { fill:currentColor;}
.sidebar-phone a:hover { color:var(--main);}
.sidebar-header .sidebar-close { display: block; font-size:0.8rem; line-height:1.4rem; font-weight: bold; margin-left: auto; cursor: pointer;}
.sidebar-header .sidebar-close .close { width:1.4rem; height:1.4rem; position: relative; background:#f1f2f6; border-radius: 50%; color:var(--main); margin-left:0.45rem; top:0; vertical-align: top; opacity: 1;}
.sidebar-header .sidebar-close .close:before, .sidebar-header .sidebar-close .close:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; height:.1rem; background: currentColor; width:0.6rem;}
.sidebar-header .sidebar-close .close:before { transform: translate(-50%, -50%) rotate(45deg);}
.sidebar-header .sidebar-close .close:after { transform: translate(-50%, -50%) rotate(-45deg);}
.sidebar-header .sidebar-close:hover .close { background:#eaecf2;}
.sidebar-inner { height: 100%; overflow: auto; padding:4.8rem 2.5rem 1.2rem;}
.staff-inner .staff-name { font-size: 1.2rem; line-height:1.4rem; font-weight:bold; text-transform: uppercase; color:var(--main); margin-bottom:2.1rem;}
.staff-badges { position: absolute; bottom:0; left:0; width: 100%; display: flex; flex-wrap:wrap; padding:0.75rem 0.35rem 0.75rem 0.75rem;}
.staff-badges .badge { display: block; font-size:0.85rem; line-height:1.05rem; font-weight: 400; color:#fff; padding:0.25rem 0.9rem; background: rgba(0,0,0,0.5); border-radius:0.75rem; margin:0.4rem 0.4rem 0 0;}
.staff-inner .item-thumb { display: block; position: relative; overflow: hidden; padding-bottom: 128.5%; border-radius:1rem; margin-bottom: 1.2rem;}
.staff-inner .item-thumb img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius:1rem; transform: scale(1); transition: all 0.3s ease;}
.staff-inner .item-thumb:hover img { transform: scale(1.1);}
.staff-socials { display: flex; flex-wrap:wrap;}
.staff-socials a { display: block; width:2.5rem; height:2.5rem; background: #fff; border-radius:1rem; padding:0.65rem; color:var(--main); margin: 0 0.8rem 0.8rem 0;}
.staff-socials a svg { display: block; width: 1.2rem; height: 1.2rem;}
.staff-socials svg path { fill:currentColor;}
.staff-socials a:hover { background: var(--main); color:#fff;}
.gray-box { background:#f1f2f6; padding:1.5rem; font-size:0.85rem; line-height:1.15rem; border-radius:1rem; margin-bottom:1.2rem;}
.gray-box.h-100 { display: flex; flex-direction:column; height: calc(100% - 1.2rem) !important;}
.gray-box.h-100 .box-entry { flex:0 1 100%;}
.gray-box .box-title, .gray-box h3 { font-size: 1.1rem; line-height:1.2rem; font-weight:bold; color:var(--main); margin-bottom:1.2rem;}
.gray-box p { margin-bottom:0.45rem;}
.gray-box ul { list-style: none; margin: 0; padding: 0;}
.gray-box ul li { position: relative; padding-left:1.25rem; margin-bottom:0.45rem;}
.gray-box ul li:before { content:''; display: block; position: absolute; width: 0.7rem; height:0.7rem; top:0.2rem; left:0; background: url(../img/bulet.svg) no-repeat 0 0; background-size: contain;}
.gray-box dl { display: flex; justify-content: space-between; margin-bottom:0.45rem;}
.gray-box dl dt { font-weight: 400;}
.gray-box dl dd { margin: 0 0 0 0.25rem;}
.gray-box .box-entry > p:last-child, .gray-box ul li:last-child { margin-bottom: 0;}

.map-block img, .map-block iframe { display: block; margin: 0; width: 100%; border-radius:0.7rem;}
.feedback-form { max-width:32.5rem; margin: 0 auto;}
.feedback-form iframe { width: 100% !important;}

/* modal */
.modal-backdrop { background:var(--text);}
.modal-backdrop.show { opacity: 0.9;}
.modal .modal-dialog { max-width: 49rem;}
.modal-content { border:none; background: #fff; color:#646878; border-radius: 0.7rem; padding: 1.8rem; transition:all .3s ease-out; transform-origin: center center; transform: rotate(-200deg); opacity: 0;}
.modal.show .modal-content { transform: rotate(0); opacity: 1;}
.qr-modal .modal-dialog { max-width: 14.5rem;}
.qr-modal .modal-content { padding: 0.25rem; background: var(--main); color:#fff;}
.modal-3d .modal-dialog { max-width: 76rem;}
.modal-3d .modal-content { background: transparent; padding: 0;}
.modal-3d iframe { display: block; border-radius: 0.7rem;}
.modal-3d .modal-close { display: block; position: absolute; width: 2.5rem; height: 2.5rem; top:0; right:-3rem; cursor: pointer;}
.modal-3d .modal-close svg path { fill:#fff;}

.modal-backdrop + .modal-backdrop { z-index: 1060;}
#modal_qr { z-index: 1070;}

/* tooltip */
.tooltip-mark { display: inline-block; position: relative; top:-0.1rem; margin:0 0.1rem; width: 1.1rem; height: 1.1rem; background: var(--gray); border-radius: 50%; font-size: 0.75rem; line-height: 1.15rem; text-align: center; color:var(--main); cursor: pointer;}
.tooltip { font-family:inherit; font-size: 0.8rem;}
.bs-tooltip-auto[x-placement^=top] .arrow,.bs-tooltip-top .arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before{border-top-color:var(--text)}
.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before{border-right-color:var(--text)}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before{border-bottom-color:var(--text)}
.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before{border-left-color:var(--text)}
.tooltip-inner{max-width:14rem;background-color:var(--text);}