/*

#FFB80A - yellow
#002666 - blue

#123285 - link
#0080FC - link hover

*/

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700&subset=cyrillic');

body {background: #fff; font-size: 16px; font-family: 'Oswald', sans-serif; font-weight:300;}


a {color:#bd2e2e;}
a:hover {color:#f96666; transition: all .1s; text-decoration: none;}


.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5 {font-weight:400; margin-top:0; line-height: 1.3;}


.h1, h1 {font-size: 40px; margin-bottom: 30px; }
.h2, h2 {font-size: 36px; margin-bottom: 25px; font-weight: 400;}
.h3, h3 {font-size: 28px; margin-bottom: 20px;  font-weight: 400;}
.h4, h4 {font-size: 22px; margin-bottom: 18px;}
.h5, h5 {font-size: 16px; margin-bottom: 15px;}

p {font-size: 21px; line-height:1.4; margin-bottom:21px;}
p.lead {font-size: 23px; margin-bottom:24px; line-height: 1.3;}

li {font-size:21px; line-height:1.4; margin-bottom:8px;}
li:last-child {margin-bottom:0;}


.btn {border-radius: 0;  font-weight: 400;}
a.btn-red, .btn-red  {background: #BD2E2E; color:#fff; font-weight: 400;}
a.btn-red:hover, .btn-red:hover, .btn-red:active {background: #de3030; color:#fff;}


a.btn-gold, .btn-gold {background: #DEAF0A; color:#1A1A1A;}
a.btn-gold:hover, .btn-gold:hover, .btn-gold:active, a.btn-gold:active {background: #CFA203; color:#1A1A1A;}

.btn-outline-white {background: none; border: solid 1px #fff; color: #fff;}
.btn-outline-white:hover {background:#fff; color:#444;}


.bg-l-grey {background:#F2F2F2;}
.bg-dark-rc {background: #1a1a1a;}
.uppercase {text-transform: uppercase;}
.shadow-text {text-shadow: 1px 1px 2px rgba(0,0,0,.4);}
.shadow-box {box-shadow: 1px 1px 2px rgba(0,0,0,.3); background: #fff;}
.mask-black {background: rgba(0,0,0,0.6); color: white;}

.red {color:#BD2E2E;}

.bg-cover {background-repeat:no-repeat; background-size:cover; background-position: center center;}

.flex-center {justify-content: center; display:flex;}
.flex-center .text {align-self: center; text-align: center;}


.flex-left-bottom {justify-content: left;  display:flex;}
.flex-left-bottom .text {align-self: flex-end;}


.modal-dialog.modal-upiter {max-width: 355px;}
.modal-dialog.modal-upiter .modal-header  {position: relative;}
.modal-dialog.modal-upiter .modal-header .modal-title  {}
.modal-dialog.modal-upiter .modal-header .close {position: absolute; background: #c30; color: #fff; right:6px; top: 6px; padding: 10px;}
.modal-dialog.modal-upiter .modal-header .close span {display: block;}
.modal-upiter .modal-content  {padding:10px;}



.navbar {padding:0; position: relative; z-index: 20;}
.navbar .phone {position: absolute; width: 40px; height: 40px; right:10px; top:10px; display: block; background: url(../img/phone.svg) center center no-repeat; background-size: contain; }



nav.main ul {list-style: none; padding:0; margin:0;}
nav.main ul li {margin-bottom:0;}
nav.main > ul {display: flex;}
nav.main > ul > li {position: relative;}
nav.main > ul > li > a {text-transform: uppercase; color:#999; font-size: 18px; font-weight: 400;  display: block; padding: 15px 15px; background: #1a1a1a;}
nav.main > ul > li.active > a {color:#fff; background: #444;}
nav.main > ul > li > a:hover {color:#fff;  background: #2a2a2a;}
nav.main ul ul {display: none; position: absolute; top:100%; left:0; width: 240px; background: #2a2a2a;}
nav.main > ul > li:hover ul {display:block;}
nav.main > ul > li:hover > a {background: #2a2a2a;}
nav.main ul ul li a {text-transform: uppercase; color:#999; font-size: 16px; font-weight: 300; display: block; padding: 10px 15px;}
nav.main ul ul li.active a {color:#fff;}
nav.main ul ul li a:hover {color:#f4f4f4; background: #2f2f2f;}

.innernav {background: #444; display: none;}
.innernav ul {display: flex;}
.innernav ul li {}
.innernav ul li a {display: block; text-transform: uppercase; padding:10px; color:#ddd;}
.innernav ul li a:hover {color:#fff; background: #555;}


.page-header .mask {background: url(../img/dots.png) rgba(0,0,0,0.3); color: #fff; padding:80px 0;}
.page-header .page-header-content {
    display: grid;
    grid-template-columns: 240px auto;
    grid-template-rows: 160px auto;
}

.page-header .page-header-content .logo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    background:#BD2E2E;
}

.page-header .page-header-content .contacts {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    padding:30px;

}

.page-header .page-header-content .contacts .phone {color:#fff; font-size: 3rem; line-height: 3rem; display: block;}

.page-header .page-header-content .text {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
    
}
/*
.page-header .page-header-content .text:before {content: ""; background: rgba(0,0,0,.3); display: block; width: 300px; height: 220px; position: absolute; top: 0; left: 0;}*/

.page-header .page-header-content .text h1 {font-size: 5.6rem; color: #fff; font-weight:400; line-height: 1.2;  text-shadow: 2px 2px 3px rgba(0,0,0,.7); position: relative; z-index: 3; margin:0; padding: 30px;
    background: rgba(0,0,0,.3); display: inline-block;}
.page-header .page-header-content .text .introtext {font-size: 24px; color: #fff; position: relative; z-index: 3;}
.page-header .page-header-content .logo span, .page-header .page-header-content .logo a {
    display: block; padding:20px;
}

.page-header .page-header-content .logo img {display: block; width: 100%;}

.offers {margin: 0 -10px;}
.offer-item {background: #333; color: #ddd; margin: 0 10px;}
.offer-item .text {padding: 30px;}
.offer-item .text .title {font-weight: 300; text-transform: uppercase; font-size:22px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 2px #BD2E2E;}
.offer-item .text .title a {color:#ccc;}
.offer-item .text .title a:hover {color:#fff;}


.offers .slick-next {right:10px; top:-40px;}
.offers .slick-prev {right:50px; top:-40px; left: auto;}

.fitness-type-item a {display: block; padding: 20px; color:#ccc; border:solid 1px #BD2E2E; height: 120px;}
.fitness-type-item a:hover {background:#202020; color:#f0f0f0;}
.fitness-type-item .title {display: inline-block; font-size:20px; font-weight:300;}

.digit big {display: block; color:#BD2E2E; font-size: 60px; line-height: 1;}
.digit small {display: block; color:#999; font-size: 16px; }

.half-width {max-width: 540px;}


.club-card {padding: 30px; border: solid 1px #ddd;}
.club-card .title {border-bottom: solid 3px #BD2E2E; font-size: 32px; padding-bottom: 15px; margin-bottom: 15px;}
.club-card .prices {margin-bottom: 30px; font-size: 32px; line-height: 1;}
.club-card .prices .price {margin-bottom:5px; color:#BD2E2E;}
.club-card .prices .old-price {color:#999; font-size: 24px;}

.club-card.card-vip {color:#f4f4f4; background: #1a1a1a;}
.club-card.card-vip .title {border-bottom: solid 3px #DEAF0A;}
.club-card.card-vip .prices .price {color: #DEAF0A;}

.club-card.card-junior-card .title {border-bottom: solid 3px #0D96DA;}
.club-card.card-junior-card .prices .price {color: #0D96DA;}


.club-card .desc ul {padding: 0; margin: 0; list-style: none;}
.club-card .desc ul li:last-child {margin-bottom:0;}
.club-card .desc ul li {position: relative; font-size: 18px; padding: 0 0 0 20px;}
.club-card .desc ul li:before {content:""; left:0; top:10px; width: 6px; height:6px; display: block; position: absolute; background: #BD2E2E;}
.club-card.card-vip .desc ul li:before {background: #DEAF0A;}



#slick-slider {position: relative;}
#slick-slider .item-slide {position: relative;}
#slick-slider .item-slide img {border-radius: 5px; display: inline-block;}
#slick-slider .item-slide .text {position: absolute; right:0; top:30px; bottom:30px; color:#fff; background: rgba(189,46,46,0.8); padding: 30px; width: 360px; border-radius: 5px;}
#slick-slider .item-slide .text a {color:#fff; text-decoration: underline; opacity:.7;}
#slick-slider.item-slide .text a:hover {opacity:1;}
#slick-slider .slick-prev, #slick-slider .slick-next {bottom: 30px; top: auto;}
#slick-slider .slick-prev {right: 60px; left:auto;}
#slick-slider .slick-next {right: 20px; }
#slick-slider .slick-dots {left: 20px; width:30%; text-align: left; }


#shedule-select {list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;}
#shedule-select li {margin:0 3px 3px 0; font-size: 16px;}
#shedule-select li a {display:inline-block; text-transform: uppercase; color: #999; padding: 10px; background: #2a2d2f;}
#shedule-select li a:hover {background: #21272b; color:#fff;}
#shedule-select li a.active {background: #21272b; color:#fff;}
#shedule-select li a.active:hover {background: #21272b; color:#fff;}

.time-line {border-bottom:solid 1px #ddd;}
.time-line .time {padding:10px 20px; font-size: 28px;}


.shedule .day {padding: 0 0 15px 0; font-size: 28px; font-weight: 400;}

.shedule-item {min-height: 75px; background: #f0f0f0; color:#777; padding: 15px; position: relative; border-left:solid 2px #ddd;}
.shedule-item .title {color:#1a1a1a; margin:0 0 10px 0; font-size: 16px; font-weight: 400; line-height: 1.1;}

.shedule-item.bg-18 {border-left: solid 2px #bd2e2e;}
.shedule-item.bg-18 .title {color:#bd2e2e;}
#shedule-select li.type-18 {border-left: solid 4px #bd2e2e;}

.shedule-item.bg-19 {border-left: solid 2px #0d96da;}
.shedule-item.bg-19 .title {color:#0d96da;}
#shedule-select li.type-19 {border-left: solid 4px #0d96da;}

.shedule-item.bg-20 {border-left: solid 2px #06A67A;}
.shedule-item.bg-20 .title {color:#06A67A;}
#shedule-select li.type-20 {border-left: solid 4px #06A67A;}

.shedule-item.bg-104 {border-left: solid 2px #A65206;}
.shedule-item.bg-104 .title {color:#A65206;}
#shedule-select li.type-104 {border-left: solid 4px #A65206;}

.shedule-item.bg-105 {border-left: solid 2px #A60665;}
.shedule-item.bg-105 .title {color:#A60665;}
#shedule-select li.type-105 {border-left: solid 4px #A60665;}




.offer-item-v .img {display: block;}
.offer-item-v .text {padding:30px; background: #f9f9f9; height: 160px;}
.offer-item-v .text .title {font-size: 24px; margin-bottom: 20px; line-height: 1.2;}
.offer-item-v .text .title a {display: inline-block;}

.spa  {height:500px;}
.spa .blue-mask {padding: 30px; background: rgba(8,135,200,0.7); color: #fff;}

footer {background: #1a1a1a;}

footer .phone {color: #fff; text-align:right;}
footer .phone .big {font-size: 40px; line-height: 1;}
footer .phone .small {font-size: 18px;}

.social {white-space: nowrap;}
.social a {display: inline-block;   width: 32px;  height: 32px;  background-repeat: no-repeat; background-position: center center; background-size: contain;}
.social a.ig {background-image: url(../img/ig.svg);}
.social a.vk {background-image: url(../img/vk.svg);}



@media (max-width: 1200px) {
    
    .container.shedule {width: 1120px; max-width: 1120px;}
    .shedule-scroll {overflow-x: scroll;}

}

@media (min-width: 992px) { 
    .navbar.fixed-top {position:fixed;}
    
    
}

@media (max-width: 992px) {
    
    .half-width {max-width:450px;}
    .navbar {padding:10px;}
    nav.main > ul {display:block;}
    nav.main > ul ul {display:block; position: static; background: none; margin-left: 30px; }
    nav.main > ul ul li a {padding: 10px;}
    
    .page-header .page-header-content .text {grid-column-start: 1;  grid-column-end: 3;}
    .page-header .page-header-content .text:before {display: none;}
    .page-header .page-header-content .text {padding: 30px 0;}
    .page-header .page-header-content .text h1 {font-size: 48px;}
    .offer-item .text {padding: 20px;}
    .offer-item .text .title {font-size:18px;}
    
    .innernav {display: block;}
    

    

}

@media (max-width: 768px) {

.half-width {max-width:350px;}
    .h2, h2 {font-size: 25px;text-align:center;}
    #shedule-select {flex-wrap: nowrap; flex-direction: column; }
    #shedule-select li a {display: block; }
    p.lead {font-size: 21px; line-height: 1.2;}

}


@media (max-width: 576px) {

    .half-width {max-width:100%;}
    
    nav.main  {padding:20px 0 0 0;}
    nav.main > ul > li > a {padding:10px;}
    
    .page-header .page-header-content {display: block;}
    .page-header .page-header-content .text h1 {font-size: 32px; display:block; text-align: center; margin-bottom: 20px; padding:0; background:none;}
    .page-header .page-header-content .text {padding: 30px;}
    .h1 {font-size: 28px; font-weight:400; text-align:center;}
    .page-header .page-header-content .text .introtext {font-size: 21px; text-align:center; line-height:1.2;}

    .page-header .contacts {display: none;}
    .page-header .mask {padding: 40px 0;}
    .page-header .logo {width:200px; margin:0 auto;}
    .page-header .logo {width:200px; margin:0 auto;}
    
    h2 {font-size: 25px;}
    p.lead {font-size: 18px;}
    footer {text-align:center;}
    footer .phone {text-align:center;}
    
}

@media (max-width: 320px) {
    p {font-size:18px;}
    .half-width {max-width:100%;}
    .offer-item {padding: 20px 0;}
    .offer-item .text {padding: 20px 0 0 0;}
}