@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,500,700);

.button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 16px;
    border-radius: 32px;
    border: 1px solid rgba(0, 167, 158, 0.649);
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
    color: #0b9f8c;
    -webkit-transition: border-color .25s, opacity .25s;
    transition: border-color .25s, opacity .25s
}

.button,
.button>div {
    justify-content: center;
    align-items: center
}

.button>div {
    display: flex;
    line-height: 1;
    height: 48px;
    font-size: 16px;
    white-space: nowrap
}

.button--secondary {
    border: 1px solid #335fff;
    color: #335fff
}

.button--danger {
    color: #f66
}

.button--danger,
.button:focus,
.button:hover {
    border-color: currentColor
}

.button--filled {
    color: #fff;
    border-color: transparent;
    background-color: #0e2433
}

.button--disabled {
    pointer-events: none;
    opacity: .4
}

.button--filled.button--secondary,
.button--filled.button--toggled {
    color: #fff;
    background-color: #335fff
}

.button--filled.button--secondary {
    border-color: transparent
}

.button--filled.button--primary:focus,
.button--filled.button--primary:hover {
    border-color: transparent;
    background-color: rgba(14, 36, 51, 0.8)
}

.button--big>div {
    height: 64px
}

.cookies {
    z-index: 1000000;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .3s ease-out;
    transition: max-height .3s ease-out;
    background-color: #f3f4f5;
    will-change: max-height
}

.cookies--shown {
    max-height: 100%
}

.cookies>div {
    display: flex;
    align-items: center;
    line-height: 1.5;
    padding: 16px 24px;
    opacity: 0;
    -webkit-transition: opacity .15s ease-out;
    transition: opacity .15s ease-out
}

.cookies.cookies--shown>div {
    opacity: 1
}

.cookies__text {
    flex: 1 1;
    text-align: left;
    padding-right: 32px
}

.cookies__accept a {
    border: 1px solid rgba(47, 51, 51, .2);
    color: rgb(47, 51, 51)
}

.cookies__mobile {
    position: static
}

.cookies__mobile>div {
    flex-direction: column
}

.cookies__mobile .cookies__accept {
    margin-top: 8px;
    width: 100%
}

.cookies__mobile .cookies__text {
    font-size: 14px;
    line-height: 1.2;
    padding-right: 0
}

.cookies__mobile .button>div {
    height: 32px;
    font-size: 14px
}

.icon {
    display: block;
    fill: currentColor
}

.icon--40x40 {
    width: 40px;
    height: 40px
}

.icon--24x24 {
    width: 24px;
    height: 24px
}

.icon--arrow {
    width: 18px;
    height: 13px
}

.icon--arrow-left {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.icon--calendar {
    width: 24px;
    height: 24px
}

.icon--calendar path,
.icon--calendar rect {
    fill: none;
    stroke: currentColor
}

.icon--cashPayment {
    width: 24px;
    height: 24px;
    fill: currentColor
}

.icon--check {
    width: 10px;
    height: 8px
}

.icon--chevron {
    width: 16px;
    height: 10px
}

.icon--chevron-up {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
}

.icon--chevron-down {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.icon--chevron-left {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.icon--clock {
    width: 12px;
    height: 12px
}

.icon--cross {
    width: 10px;
    height: 10px
}

.icon--dollar {
    width: 24px;
    height: 24px;
    fill: currentColor
}

.icon--dots {
    width: 20px;
    height: 4px
}

.icon--crossed-eye,
.icon--eye {
    width: 18px;
    height: 18px
}

.icon--eye {
    fill: transparent;
    stroke: currentColor
}

.icon--facebook {
    width: 18px;
    height: 18px
}

.icon--failure {
    width: 52px;
    height: 52px
}

.icon--filter {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none
}

.icon--gender {
    width: 20px;
    height: 20px
}

.icon--golf {
    width: 15px;
    height: 16px
}

.icon--google {
    width: 18px;
    height: 18px
}

.icon--hand-wave {
    width: 16px;
    height: 16px
}

.icon--inbox {
    width: 56px;
    height: 50px
}

.icon--level {
    width: 20px;
    height: 20px
}

.icon--magnifier {
    height: 12px;
    width: 12px
}

.icon--marker {
    width: 9px;
    height: 12px
}

.icon--menu {
    width: 12px;
    height: 12px
}

.icon--minus {
    width: 12px;
    height: 1.5px
}

.icon--paddle {
    width: 16px;
    height: 16px
}

.icon--paper-plane {
    width: 14px;
    height: 15px
}

.icon--plus {
    width: 12px;
    height: 12px
}

.icon--power {
    width: 16px;
    height: 18px
}

.icon--shield {
    width: 10.5px;
    height: 13.5px
}

.icon--shield path {
    fill: none;
    stroke-width: 1px;
    stroke: currentColor
}

.icon-social-copy,
.icon-social-facebook,
.icon-social-mail,
.icon-social-messenger,
.icon-social-twitter,
.icon-social-whatsapp {
    width: 32px;
    height: 32px
}

.icon-social-share {
    width: 24px;
    height: 24px
}

.icon--star {
    width: 20px;
    height: 20px
}

.icon--success {
    width: 52px;
    height: 52px
}

.icon--target {
    width: 16px;
    height: 16px
}

.icon--target circle,
.icon--target path {
    fill: none;
    stroke: currentColor;
    stroke-width: .5px
}

.icon--target path {
    stroke-linejoin: miter
}

.icon--tennis {
    width: 16px;
    height: 16px
}

.icon--trash {
    width: 18px;
    height: 18px
}

.icon--trash path {
    fill: currentColor;
    stroke-width: 1px;
    stroke: none
}

.icon--user {
    width: 16px;
    height: 18px
}

.icon--warning {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor
}

.select {
    display: block;
    position: relative
}

.select select {
    display: block;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.select>div {
    display: flex;
    align-items: center
}

.select>div>div {
    white-space: nowrap
}

.select>div>div+div {
    margin-left: 8px;
    color: #335fff
}

.tab-menu {
    display: flex;
    align-items: center;
    font-size: 16px
}

.tab-menu>a {
    display: block;
    padding: 1em 0;
    line-height: 1em;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    opacity: .6;
    -webkit-transition: all .15s;
    transition: all .15s;
    position: relative
}

.tab-menu>a+a {
    margin-left: 2em
}

.tab-menu>a.tab-menu__link--active {
    opacity: 1;
    border-bottom-color: #335fff
}

.tab-menu>a.tab-menu__link--danger {
    color: #f66
}

.tab-menu>a.tab-menu__link--danger:after {
    content: "";
    position: absolute;
    top: 12px;
    right: -4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #f66
}

.spinner {
    position: relative;
    width: 3em
}

.spinner:before {
    content: "";
    display: block;
    padding-top: 100%
}

.spinner svg {
    -webkit-animation: spinner-rotate 2s linear infinite;
    animation: spinner-rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.spinner circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: spinner-dash 1.5s ease-in-out infinite;
    animation: spinner-dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: currentColor;
    stroke-width: 6px;
    stroke-miterlimit: 10;
    fill: none
}

.button .spinner {
    width: 25px;
    margin-right: 8px
}

.button .spinner+* {
    margin-left: 15px
}

@-webkit-keyframes spinner-rotate {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spinner-rotate {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }

    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35
    }

    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124
    }
}

.drop-down {
    position: absolute;
    min-width: 100%;
    top: 100%;
    right: 0;
    border-radius: 0 0 4px 4px;
    background-color: #fdfdfd;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    z-index: 1000
}

.drop-down--open {
    visibility: visible;
    opacity: 1
}

.avatar,
.drop-down__container {
    position: relative
}

.avatar {
    display: flex;
    align-items: center
}

.avatar__name {
    border-bottom: 1px solid rgba(47, 51, 51, .2);
    margin-right: 12px;
    padding-bottom: 4px
}

.avatar__image,
.avatar__name {
    cursor: pointer;
    -webkit-transition: border-color .25s;
    transition: border-color .25s
}

.avatar__image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 2px;
    border: 1px solid rgba(47, 51, 51, .05);
    overflow: hidden
}

.avatar__image:focus,
.avatar__image:hover,
.avatar__name:hover {
    border-color: rgba(47, 51, 51, .6)
}

.avatar__image>div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(51, 95, 255, 0.1);
    background-image: url(/static/media/placeholder.276c01a7.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.avatar__drop {
    position: absolute;
    top: 100%;
    right: 0;
    padding: 8px 16px;
    border-radius: 0 0 4px 4px;
    background-color: #fdfdfd;
    box-shadow: 0 24px 32px 0 rgba(47, 51, 51, .05);
    visibility: hidden;
    opacity: 0;
    z-index: 1000
}

.avatar__drop,
.avatar__drop>a {
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.avatar__drop>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    font-size: 16px;
    opacity: .6;
    text-decoration: none;
    cursor: pointer
}

.avatar__drop>a+a {
    border-top: 1px solid rgba(47, 51, 51, .05)
}

.avatar__drop>a:hover {
    opacity: 1
}

.avatar__drop>a>div {
    white-space: nowrap;
    margin-right: 24px
}

.avatar__drop--open {
    visibility: visible;
    opacity: 1
}

.account .spinner {
    color: #335fff
}

.avatar__manager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 48px;
    height: 48px;
    border: solid rgba(47, 51, 51, .05);
    border-width: 1px 0 0;
    background-color: transparent;
    font-size: 16px;
    opacity: .6;
    cursor: pointer;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.avatar__manager:hover {
    opacity: 1
}

.avatar__manager svg {
    margin-right: -13px
}

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    z-index: 1000
}

.modal,
.modal__background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.modal__background {
    position: absolute;
    background-color: #292933;
    opacity: .9;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.modal__win {
    position: relative
}

.modal__content {
    border-radius: 4px;
    background-color: #fff;
    max-height: calc(100vh - 96px);
    overflow: auto
}

.modal__close {
    display: block;
    position: absolute;
    padding: 0 0 4px 4px;
    top: 0;
    right: 0;
    -webkit-transform: translate(100%, -100%);
    transform: translate(100%, -100%);
    color: #fff;
    font-size: 1.6px;
    pointer-events: none
}

.modal__close .icon {
    width: 16px;
    height: 16px
}

@media (max-width:575px) {
    .modal__close {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

.privacy__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding-bottom: 24px
}

.privacy__subtitle {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 16px
}

.privacy__option+.privacy__option {
    margin-top: 32px
}

.privacy__checkbox {
    margin-bottom: 8px
}

.privacy__text {
    margin-left: 24px;
    opacity: .6;
    font-size: 16px;
    line-height: 1.5
}

.privacy__textDelete {
    margin-left: 0
}

.privacy__delete {
    margin-top: 16px;
    width: 182px
}

.privacy__buttons {
    display: flex;
    margin-top: 48px
}

.privacy__buttons>a+a {
    margin-left: 16px
}

.privacy__modal {
    padding: 48px;
    max-width: 500px
}

.privacy__checkbox .spinner {
    width: 16px;
    height: 16px;
    color: #335fff
}

@media (max-width:600px) {
    .privacy {
        padding: 24px
    }

    .privacy__title {
        display: none
    }

    .privacy__subtitle {
        font-size: 16px;
        line-height: 1.19
    }

    .privacy__checkbox .check-box__tick {
        width: 24px;
        height: 24px;
        margin-right: 16px
    }

    .privacy__checkbox .check-box__label {
        flex: 1 1;
        line-height: normal
    }

    .privacy__text {
        font-size: 14px;
        margin-left: 0
    }

    .privacy__textDelete {
        margin-left: 0
    }

    .privacy__delete {
        width: 100%
    }

    .privacy__buttons {
        flex-direction: column;
        margin-top: 32px
    }

    .privacy__buttons>a+a {
        margin-left: 0;
        margin-top: 16px
    }
}

.check-box {
    display: flex;
    align-items: center;
    cursor: pointer
}

.check-box__input {
    display: none
}

.check-box__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: #335fff;
    border: 1px solid;
    background-color: #fff;
    -webkit-transition: background-color .15s;
    transition: background-color .15s;
    flex-shrink: 0
}

.check-box__tick .icon {
    color: #fff
}

.check-box--checked .check-box__tick {
    background-color: currentColor
}

.check-box--error,
.check-box--error .check-box__tick {
    color: #f66
}

.check-box__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.profile__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding-bottom: 24px
}

.field {
    min-height: 48px
}

.field__input {
    position: relative
}

.field__label {
    color: rgba(47, 51, 51, .4);
    display: block;
    font-size: 14px;
    line-height: 16px;
    height: 16px
}

.field__error {
    font-size: 14px;
    line-height: 1.2;
    min-height: 1.2em;
    margin-top: 4px
}

.field--error .field__label,
.field__error {
    color: #ee3663
}

form>.field+.field {
    margin-top: 4px
}

.alert {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    font-size: 16px;
    line-height: 1.12;
    border-radius: 4px;
    background-color: rgba(250, 202, 100, .2)
}

.alert--error {
    color: #fff;
    background-color: #f66
}

.alert>a {
    margin-left: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 1.4em
}

.alert>div {
    line-height: 1.4
}

@-webkit-keyframes alert {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

@keyframes alert {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(0);
        transform: translate(0)
    }
}

.ui-text-input {
    font-size: 16px;
    font-weight: 400;
    box-sizing: border-box;
    outline: none;
    --moz-appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    border: solid rgba(14, 36, 51, 0.3);
    border-width: 0 0 1px;
    -webkit-transition: color .15s, border-color .15s, opacity .15s;
    transition: color .15s, border-color .15s, opacity .15s;
    height: 40px;
    text-align: left;
    background: transparent
}

.ui-text-input::-webkit-input-placeholder {
    color: rgba(47, 51, 51, .4)
}

.ui-text-input::-moz-placeholder {
    color: rgba(47, 51, 51, .4)
}

.ui-text-input:-ms-input-placeholder {
    color: rgba(47, 51, 51, .4)
}

.ui-text-input::-ms-input-placeholder {
    color: rgba(47, 51, 51, .4)
}

.ui-text-input::placeholder {
    color: rgba(47, 51, 51, .4)
}

.ui-text-input[type=button] {
    cursor: pointer
}

.ui-text-input:disabled {
    opacity: .4
}

.ui-text-input:focus {
    border-color: #335fff
}

.ui-text-input--invalid {
    color: #ee3663;
    border-color: rgba(238, 54, 99, .4)
}

.ui-text-input--invalid:focus {
    border-color: #ee3663
}

.option-list__icon {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 8px
}

.option-list__icon * {
    fill: currentColor
}

.option-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.option-list__option {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #e7e9eb
}

.option-list__title {
    color: #33302e;
    font-size: 14px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px
}

.option-list__option--active {
    color: #335fff
}

.option-list__option--active .option-list__label {
    font-weight: 700
}

.option-list__label {
    font-weight: 400;
    font-size: 14px
}

.suggest__main {
    position: relative
}

.suggest__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 0;
    overflow-y: auto;
    padding: 0 24px;
    border-radius: 0 0 4px 4px;
    background-color: #fafafa;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.suggest__list>* {
    opacity: 0;
    -webkit-transition: opacity .15s ease-out;
    transition: opacity .15s ease-out
}

.suggest__open {
    visibility: visible;
    opacity: 1;
    max-height: 250px;
    will-change: max-height
}

.suggest__open>* {
    opacity: 1
}

.phone-input__inputs {
    display: flex
}

.phone-input__code {
    position: relative;
    width: 80px
}

.phone-input__code>svg {
    position: absolute;
    top: 14px;
    right: 16px
}

.phone-input__number {
    flex: 1 1
}

.phone-input__icon {
    width: 12px;
    height: 12px;
    fill: #335fff
}

.phone-input--invalid {
    fill: #f66
}

.phone-input--disabled {
    opacity: .4
}

.edit-profile__alert {
    margin-bottom: 42px
}

.m-edit-profile {
    padding: 16px
}

.m-edit-profile .edit-profile__alert {
    margin-bottom: 0
}

.m-edit-profile .buttons {
    display: flex;
    flex-direction: column;
    margin-top: 40px
}

.m-edit-profile .buttons>.button+.button {
    margin-left: 0;
    margin-top: 16px
}

.mobile-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    -webkit-transform: translateY(120%);
    transform: translateY(120%);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out;
    z-index: 100;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    will-change: transform
}

.mobile-modal--shown {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.mobile-modal__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px
}

.mobile-modal__content {
    min-height: calc(100vh - 64px)
}

.mobile-modal__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6
}

.mobile-modal__cross {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 16px;
    opacity: .3;
    cursor: pointer;
    flex-shrink: 0
}

.mobile-modal__cross>svg {
    height: 16px;
    width: 16px
}

.popup {
    max-width: 536px;
    padding: 48px
}

.popup__title {
    border-bottom: 1px solid rgba(47, 51, 51, .2);
    padding-bottom: 24px
}

.popup__text {
    font-size: 14px;
    line-height: 1.43;
    opacity: .6
}

.popup__text+.popup__text {
    margin-top: 16px
}

.popup__buttons {
    margin-top: 32px
}

.popup__buttons>.button+.button {
    margin-top: 16px
}

.sign-buttons {
    display: flex;
    align-items: center
}

.sign-buttons .account {
    flex-shrink: 0
}

.sign-buttons>.button {
    border: none;
    color: rgb(47, 51, 51);
    padding-bottom: 4px
}

.sign-buttons.Static>.button {
    color: rgb(255, 255, 255);
    width: auto
}

.sign-buttons .button>div {
    height: 26px;
    font-weight: 400;
    -webkit-transition: border-bottom .25s;
    transition: border-bottom .25s;
    border-bottom: 1px solid rgba(47, 51, 51, .2)
}

.sign-buttons.Static>.button>div {
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.sign-buttons>.button>div:hover {
    border-bottom: 1px solid rgba(47, 51, 51, .6)
}

.sign-buttons.Static>.button>div:hover {
    border-bottom: 1px solid rgba(255, 255, 255, .6)
}

.sign-buttons.Static>.button:last-child {
    background-color: #ecff00;
    margin-left: 16px;
    -webkit-transition: background-color .25s;
    transition: background-color .25s;
    padding: 0 16px;
    color: #0e2433
}

.sign-buttons.Static>.button:last-child:hover {
    background-color: rgba(238, 255, 0.8)
}

.sign-buttons.Static>.button:last-child>div {
    border-bottom: none;
    height: 40px
}

.sign-buttons__modal {
    width: 536px;
    padding: 48px
}

.sign-buttons__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    margin: 0 0 8px
}

.sign-buttons__subtitle {
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 16px;
    opacity: .6;
    text-align: center
}

.button--facebook {
    color: #fff
}

.button--facebook,
.button--facebook:hover {
    background-color: rgb(47, 78, 139);
    border-color: transparent
}

.button--facebook>div {
    height: 40px
}

.button--facebook span {
    font-weight: 500
}

.button--facebook .icon {
    margin-left: -12px;
    width: 36px;
    height: 36px
}

.password-input {
    position: relative
}

.password-input__toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: none;
    cursor: pointer;
    margin: 0;
    opacity: .6;
    background: transparent
}

.input--error+.password-input__toggle {
    color: #f66
}

.separator {
    display: flex;
    align-items: center;
    min-height: 18px;
    margin: 24px 0
}

.separator:after,
.separator:before {
    content: "";
    display: block;
    height: 1px;
    flex: 1 1;
    background-color: rgba(47, 51, 51, .1)
}

.separator>div {
    margin: 0 24px;
    color: rgba(47, 51, 51, .4)
}

.sign__title {
    line-height: 1.25;
    font-size: 24px;
    font-weight: 700
}

.sign__title--checkout {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(47, 51, 51, .1)
}

.sign__subtitle {
    font-size: 16px;
    line-height: 1.75;
    margin-top: 8px;
    opacity: .6;
    text-align: center
}

.sign__text {
    font-size: 16px;
    line-height: 1.5;
    margin: 32px 0 24px;
    opacity: .6
}

.sign__caption {
    opacity: .4;
    font-size: 14px;
    line-height: 1.5;
    text-align: center
}

.sign__icon {
    display: flex;
    justify-content: center
}

.sign__icon svg {
    color: rgb(1, 112, 105);
    margin-bottom: 24px;
    width: 100%;
    height: 60px
}

.sign__button {
    margin-top: 40px
}

.sign__oauth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 24px;
    grid-gap: 16px;
    gap: 16px
}

.sign__oauth>* {
    flex: 1 1 auto;
    max-width: 300px;
    overflow: hidden
}

.sign__form .field:last-child {
    margin-bottom: 24px
}

.sign form button#sign-in__submit,
.sign form button#sign-up__submit {
    border: 1px solid rgba(47, 51, 51, .2);
    color: rgb(47, 51, 51)
}

.sign form button#sign-in__submit:hover,
.sign form button#sign-up__submit:hover {
    border: 1px solid rgba(47, 51, 51, .05);
    color: rgba(47, 51, 51, .6)
}

.sign form button#sign-up__submit {
    margin-top: 16px
}

.sign__little-note {
    font-size: 14px;
    margin-top: 24px;
    opacity: .4
}

.sign__bar {
    background-color: rgba(47, 51, 51, .05);
    color: rgba(47, 51, 51, .6);
    font-size: 14px;
    margin: 24px 0 -48px -48px;
    width: calc(100% + 96px);
    padding: 24px;
    text-align: center
}

.sign__form>.sign-up__checkBox+.sign-up__checkBox {
    margin-top: 16px
}

.sign-up__checkBox .check-box__tick {
    width: 24px;
    height: 24px;
    margin-right: 16px
}

.sign-up__checkBox .check-box__label {
    font-size: 14px;
    font-weight: 700;
    opacity: .9
}

.sign-up__checkBox .sign-up__checkText {
    margin-left: 40px;
    opacity: .6;
    font-size: 14px
}

.sign .link--secondary {
    opacity: 1;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.sign .link--secondary:hover {
    opacity: .4
}

.snack {
    position: fixed;
    left: 50%;
    max-width: calc(100vw - 48px);
    box-sizing: content-box;
    padding: 16px;
    line-height: 1.4;
    border-radius: 4px;
    background-color: rgba(47, 51, 51, .9);
    box-shadow: 0 8px 24px 0 rgba(34, 34, 34, .03);
    color: hsla(0, 0%, 100%, .6);
    opacity: 0;
    bottom: 0;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    -webkit-animation: snack-in .25s forwards;
    animation: snack-in .25s forwards;
    visibility: hidden;
    z-index: 10000
}

.snack--out,
.snack:last-child {
    visibility: visible
}

.snack--out {
    -webkit-animation: snack-out .35s forwards;
    animation: snack-out .35s forwards
}

.snack--error {
    color: #f66;
    background-color: #f4e7e5
}

@-webkit-keyframes snack-in {
    0% {
        opacity: 0;
        bottom: 0;
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%)
    }

    to {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
}

@keyframes snack-in {
    0% {
        opacity: 0;
        bottom: 0;
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%)
    }

    to {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }
}

@-webkit-keyframes snack-out {
    0% {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }

    10% {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%, -10%);
        transform: translate(-50%, -10%)
    }

    to {
        opacity: 0;
        bottom: 0;
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%)
    }
}

@keyframes snack-out {
    0% {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }

    10% {
        opacity: 1;
        bottom: 24px;
        -webkit-transform: translate(-50%, -10%);
        transform: translate(-50%, -10%)
    }

    to {
        opacity: 0;
        bottom: 0;
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%)
    }
}

.modal .oAuthSignUp {
    width: 536px;
    padding: 48px
}

.mobile-modal .oAuthSignUp {
    padding: 16px
}

.mobile-modal .oAuthSignUp__title {
    font-size: 24px;
    margin-bottom: 16px
}

.oAuthSignUp__checkBox+.oAuthSignUp__checkBox {
    margin-top: 16px
}

.oAuthSignUp__checkBox .check-box__tick {
    width: 24px;
    height: 24px;
    margin-right: 16px
}

.oAuthSignUp .check-box__label {
    font-size: 14px;
    font-weight: 700;
    opacity: .9
}

.oAuthSignUp__checkBox .oAuthSignUp__checkText {
    font-size: 14px;
    margin-left: 40px;
    margin-top: 4px;
    opacity: .6
}

.oAuthSignUp__form>button {
    margin-top: 24px
}

.welcome {
    padding: 48px;
    width: 536px
}

.welcome__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: center;
    margin: 0 0 24px
}

.welcome__description p {
    font-size: 14px;
    line-height: 1.5
}

.welcome__description p+p {
    margin-top: 24px
}

.welcome__actions {
    margin-top: 56px
}

.welcome .icon {
    display: block;
    margin: 0 auto 24px;
    height: 64px;
    width: 64px;
    color: rgb(1, 112, 105)
}

.disclaimer {
    color: #f66;
    font-size: 12px
}

.radio-list__option {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 4px;
    -webkit-transition: background-color .15s;
    transition: background-color .15s;
    cursor: pointer;
    background-color: rgba(51, 95, 255, 0.1)
}

.radio-list__option:hover {
    background-color: #d6dfff
}

.radio-list__option+.radio-list__option {
    margin-top: 8px
}

.radio-list__radio {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
    border: 1px solid #335fff;
    background-color: #fff;
    -webkit-transition: border-width .15s;
    transition: border-width .15s
}

.radio-list__option--picked,
.radio-list__option--picked:hover {
    background-color: rgba(1, 112, 105, .2)
}

.radio-list__option--picked .radio-list__radio {
    border-width: 4px
}

.radio-list__label {
    flex: 1 1
}

.booking {
    display: flex;
    flex-direction: column
}

.booking__layers {
    flex: 1 1;
    overflow: auto
}

.booking--desktop {
    width: 500px;
    height: 590px;
    padding: 32px
}

.booking--mobile {
    padding: 0 16px 16px
}

.booking__header {
    flex-shrink: 0
}

.booking__header .disclaimer {
    margin-left: 32px
}

.booking-layer__body {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height .15s;
    transition: max-height .15s;
    will-change: max-height
}

.booking-layer:last-child .booking-layer__body {
    max-height: 100vh
}

.booking__header-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 20px;
    overflow: hidden;
    line-height: 1.2
}

.booking__header-date {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-top: 4px
}

.booking__header-date>div:first-letter {
    text-transform: uppercase
}

.booking__header .icon--calendar {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    opacity: .5
}

.booking-layer {
    background-color: #fff
}

.booking-layer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 8px;
    font-size: 16px;
    cursor: default;
    border-bottom: 1px solid rgba(47, 51, 51, .1)
}

.booking__finalStep {
    font-weight: 700
}

a.booking-layer__header {
    cursor: pointer
}

.booking-layer__header .icon {
    color: #335fff;
    height: 14px
}

.booking-layer__body>p {
    line-height: 1.5;
    opacity: .6;
    padding: 16px 0 32px
}

.booking-layer__option-price {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.list-input .input {
    cursor: pointer
}

.list-input .drop-down {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 0 24px
}

.list-input__option {
    display: block;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #000
}

.list-input__option:hover {
    background-color: transparent;
    color: #335fff
}

.list-input__option>div {
    line-height: 24px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f5
}

@font-face {
    font-family: Arbeit;
    src: url(/assets/fonts/woff/Arbeit-SemiBold.woff2) format("woff2"), url(/assets/fonts/woff/Arbeit-SemiBold.woff) format("woff"), url(/assets/fonts/otf/Arbeit-SemiBold.otf) format("opentype");
    font-weight: 800
}

@font-face {
    font-family: Arbeit;
    src: url(/assets/fonts/woff/Arbeit-Regular.woff2) format("woff2"), url(/assets/fonts/woff/Arbeit-Regular.woff) format("woff"), url(/assets/fonts/otf/Arbeit-Regular.otf) format("opentype");
    font-weight: 400
}

@font-face {
    font-family: Arbeit;
    src: url(/assets/fonts/woff/Arbeit-Light.woff2) format("woff2"), url(/assets/fonts/woff/Arbeit-Light.woff) format("woff"), url(/assets/fonts/otf/Arbeit-Light.otf) format("opentype");
    font-weight: 300
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    /* vertical-align: baseline */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1.5
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    font-family: Arbeit, sans-serif;
    color: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    scroll-behavior: smooth
}

* {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    outline: none;
    color: inherit
}

b,
strong {
    font-weight: 700
}

.modal-title {
    font-size: 24px;
    letter-spacing: -.5px;
    text-align: center;
    margin: 0 0 32px
}

.link {
    cursor: pointer;
    padding: 4px 0;
    border-width: 0 0 1px;
    border-bottom-style: solid;
    opacity: .4;
    text-decoration: none;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    font-size: inherit;
    background-color: transparent
}

.link:hover {
    opacity: 1
}

.link--primary {
    border-bottom-color: #0e2433
}

.link--secondary {
    border-bottom-color: #cfd3d6
}

.input,
.textarea {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 7px 0;
    line-height: 1.8;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(14, 36, 51, 0.3);
    -webkit-transition: border-color .25s;
    transition: border-color .25s
}

.textarea {
    min-height: 100px;
    resize: vertical
}

.input--focus,
.input:focus,
.textarea--focus,
.textarea:focus {
    border-bottom-color: #335fff
}

.input--error,
.input--error:focus,
.textarea--error,
.textarea--error:focus {
    border-bottom-color: #f66
}

.input::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder {
    color: rgba(1, 1, 1, .4);
    font-size: 16px
}

.input::-moz-placeholder,
.textarea::-moz-placeholder {
    color: rgba(1, 1, 1, .4);
    font-size: 16px
}

.input:-ms-input-placeholder,
.textarea:-ms-input-placeholder {
    color: rgba(1, 1, 1, .4);
    font-size: 16px
}

.input::-ms-input-placeholder,
.textarea::-ms-input-placeholder {
    color: rgba(1, 1, 1, .4);
    font-size: 16px
}

.input::placeholder,
.textarea::placeholder {
    color: rgba(1, 1, 1, .4);
    font-size: 16px
}

.inertia-scroll {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translateZ(0);
    overflow-y: scroll
}

.error {
    color: #ee3663;
    margin-bottom: 16px;
    line-height: 1.4
}

.little-note {
    font-size: 14px;
    opacity: .4
}

.little-note,
.text-center {
    text-align: center
}

.big-text {
    color: rgba(47, 51, 51, .6);
    font-size: 20px;
    margin-top: 32px;
    line-height: 1.1
}

.medium-text {
    line-height: 1.5;
    opacity: .8
}

.big-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1
}

.medium-title {
    font-weight: 600;
    line-height: 1.4;
    font-size: 32px;
    margin-bottom: 32px
}

.small-title {
    font-weight: 500;
    line-height: 1.8;
    font-size: 16px;
    margin-bottom: 32px
}

.medium-subtitle {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.175;
    margin-bottom: 24px
}

.buttons {
    display: flex;
    align-items: center;
    margin-top: 48px
}

.buttons>.button+.button {
    margin-left: 32px
}

.field+.buttons {
    margin-top: 80px
}

.semi-bold {
    font-weight: 600
}

.bold,
.m-big-title {
    font-weight: 700
}

.m-big-title {
    font-size: 28px;
    line-height: 1.07
}

.m-medium-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25
}

.m-small-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.19
}

.m-medium-subtitle {
    font-size: 20px;
    line-height: 1.5
}

.m-small-subtitle {
    opacity: .8;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75
}

.m-big-text {
    font-size: 16px;
    line-height: 1.5;
    opacity: .6
}

.m-medium-text {
    font-size: 14px
}

@media (min-width:576px) {
    .d-sm-none {
        display: none !important
    }

    .d-sm-block {
        display: block !important
    }
}

@media (min-width:768px) {
    .d-md-none {
        display: none !important
    }

    .d-md-block {
        display: block !important
    }
}

@media (min-width:992px) {
    .d-lg-none {
        display: none !important
    }

    .d-lg-block {
        display: block !important
    }
}

@media (min-width:1200px) {
    .d-xl-none {
        display: none !important
    }

    .d-xl-block {
        display: block !important
    }
}

.error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #fafafa
}

.error-page__button {
    margin-top: 32px
}

.date-picker {
    width: 280px
}

.date-picker__nav {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.date-picker__nav .button+.button {
    margin-left: 16px
}

.date-picker__nav .button {
    flex: 1 1;
    border-radius: 2px
}

.date-picker__week {
    display: flex;
    padding-bottom: 8px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(1, 1, 1, .6);
    border-bottom: 1px solid rgba(1, 1, 1, .1)
}

.date-picker__week>li {
    flex: 1 1;
    text-align: center;
    text-transform: uppercase
}

.date-picker__days:after {
    content: "";
    display: block;
    clear: both
}

.date-picker__days>li {
    float: left;
    width: 40px;
    height: 40px
}

.date-picker__day,
.date-picker__days>li {
    display: flex;
    justify-content: center;
    align-items: center
}

.date-picker__day {
    font-size: 16px;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    color: rgb(47, 51, 51);
    cursor: pointer
}

.date-picker__day--out {
    color: rgba(51, 95, 255, 0.4)
}

.date-picker__day--disabled {
    color: rgba(1, 1, 1, .4);
    pointer-events: none
}

.date-picker__day--picked {
    color: #fff;
    background-color: #335fff
}

.date-picker__month {
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none
}

.date-picker__month-text {
    text-transform: lowercase;
    font-size: 16px;
    font-weight: 700
}

.date-picker__month-text:first-letter {
    text-transform: uppercase
}

.date-picker__month-arrow {
    cursor: pointer
}

.date-picker__month-arrow .icon {
    color: #335fff;
    font-size: 1.4px
}

.date-input .input {
    cursor: pointer
}

.date-input .drop-down {
    padding: 24px;
    border-radius: 0 0 4px 4px;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.bbq-search {
    display: flex;
    border-radius: 4px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
    background-color: #fff
}

.bbq-search__form {
    flex: 1 1;
    display: flex;
    padding: 0 32px;
    box-sizing: border-box
}

.bbq-search__form>div {
    width: 176px;
    padding-top: 6px
}

.bbq-search__form>div+div {
    margin-left: 24px
}

.bbq-search__form .field {
    margin-top: 1em
}

.bbq-search__form .field__error {
    min-height: 1em
}

.bbq-search__form .input {
    padding: 10px 0;
    height: 50px
}

.bbq-search__info {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f5f5;
    padding: 16px 32px
}

.bbq-search__info>div+div {
    margin-left: 56px
}

.bbq-search__infoSubtitle {
    font-size: 14px;
    color: rgba(47, 51, 51, .4);
    padding-bottom: 8px
}

.bbq-search__infoText {
    font-size: 20px;
    letter-spacing: -.6px;
    color: rgba(47, 51, 51, .8);
    font-weight: 500
}

.reservations-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px
}

.reservations-empty__icon {
    color: #335fff
}

.reservations-empty__title {
    margin-top: 32px
}

.reservations-empty__body {
    color: #566670;
    line-height: 1.2
}

.reservations-empty__body p+p {
    margin-top: 1em
}

.filter-input {
    position: relative;
    font-size: 16px
}

.filter-input__label {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer
}

.filter-input__count {
    opacity: .6;
    flex: 1 1;
    margin: 0 8px
}

.filter-input__label .icon {
    color: #335fff
}

.filter-input__options {
    position: absolute;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    border-radius: 0 0 4px 4px;
    background-color: #fdfdfd;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    z-index: 100;
    padding: 8px
}

.filter-input__options--open {
    visibility: visible;
    opacity: 1
}

.filter-input__option {
    padding: 16px;
    border-radius: 4px
}

.filter-input__option+.filter-input__option {
    margin-top: 8px
}

.filter-input__buttons {
    display: flex
}

.filter-input__buttons>a {
    display: block;
    flex: 1 1;
    font-weight: 700;
    line-height: 1;
    padding-top: 24px;
    padding-bottom: 24px;
    cursor: pointer;
    text-align: center
}

.filter-input__buttons--disabled {
    opacity: .4;
    pointer-events: none
}

.filter-input__button-apply {
    color: #335fff;
    padding-right: 8px
}

.filter-input__button-cancel {
    color: #566670;
    padding-left: 8px
}

.filter {
    display: flex;
    align-items: center;
    border: solid rgba(1, 1, 1, .05);
    border-width: 1px 0 0;
    background-color: #fafafa
}

.filter>li+li {
    border-left: 1px solid rgba(1, 1, 1, .05)
}

.filter>li {
    min-width: 175px
}

.filter__resource_feature,
.filter__resource_type {
    width: 220px
}

.filter-reset {
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 16px;
    height: 48px;
    padding: 0 16px;
    cursor: pointer
}

.filter-reset__icon {
    margin-right: 8px;
    padding: 4px;
    border: 1px solid;
    border-radius: 50%;
    color: #335fff
}

.filter-reset__icon .icon {
    width: 7px;
    height: 7px
}

.filter-reset--disabled {
    pointer-events: none;
    opacity: .4
}

.bbq-activity__container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.bbq-activity__modal .bbq-activity__row {
    margin-bottom: 16px
}

.bbq-activity__modal .bbq-activity__row:last-child {
    margin-bottom: 0
}

.bbq-activity__row>.bbq-activity__tag+.bbq-activity__tag {
    margin-left: 8px
}

.bbq-activity__tag {
    display: flex;
    align-items: center;
    background-color: rgb(47, 51, 51, .1);
    border-radius: 16px;
    padding: 4px 8px;
    white-space: nowrap
}

.bbq-activity__tag svg {
    margin-right: 4px;
    flex-shrink: 0
}

.bbq-activity__modal .spinner {
    color: #335fff;
    margin-bottom: 16px;
    width: 32px
}

.bbq-activity__players {
    justify-content: space-around
}

.bbq-match__team {
    display: flex
}

.bbq-match__level-bar svg {
    display: block;
    width: 57px;
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.bbq-match__level-bar .level-colored,
.bbq-match__level-bar .level-gray {
    fill: none;
    stroke-width: 4px;
    stroke-linecap: round
}

.bbq-match__level-bar .level-colored {
    stroke: url(#level-bar__gradient);
    stroke-dasharray: 0, 100;
    -webkit-transition: stroke-dasharray .35s ease-out;
    transition: stroke-dasharray .35s ease-out
}

.bbq-match__level-bar .level-gray {
    stroke: rgba(47, 51, 51, .1);
    stroke-dasharray: 66, 100
}

.bbq-match__player {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.bbq-match__player+.bbq-match__player {
    margin-left: 8px
}

.bbq-match__avatar {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-radius: 50%;
    width: 41px;
    height: 41px;
    position: absolute;
    top: 8px;
    left: 8px
}

.bbq-activity__players .vs {
    padding: 8px
}

.bbq-match__level {
    font-size: 12px;
    width: 50px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.bbq-match__player-empty {
    background-clip: padding-box;
    background-color: rgb(250, 250, 250);
    border: 1px dashed rgb(164, 217, 108);
    border-radius: 50%;
    margin: 8px 0;
    width: 41px;
    height: 41px
}

.bbq-hours {
    left: 0;
    width: 2em;
    flex-shrink: 0;
    border-right: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff;
    box-shadow: 0 4px 16px 0 rgba(1, 1, 1, .2), 0 2px 2px 0 rgba(0, 0, 0, .15)
}

.bbq-hours,
.bbq-hours:before {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10
}

.bbq-hours:before {
    top: 0;
    display: block;
    content: "";
    height: 55px;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 0 4px 8px 0 rgba(1, 1, 1, .04), 0 2px 2px 0 rgba(0, 0, 0, .05);
    background-color: inherit
}

.bbq-hours__hour,
.bbq-hours__hours {
    list-style: none;
    padding: 0;
    margin: 0
}

.bbq-hours__hour {
    height: 1em;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .1)), to(rgba(0, 0, 0, .1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom
}

.bbq-hours__hour>div {
    font-size: 14px;
    padding: .25em;
    text-align: right;
    opacity: .4
}

.bbq-resources {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 56px;
    background-color: #fff;
    padding: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    box-shadow: 0 4px 8px 0 rgba(1, 1, 1, .04), 0 2px 2px 0 rgba(0, 0, 0, .05);
    z-index: 9
}

.bbq-resource,
.bbq-resources {
    list-style: none;
    margin: 0;
    display: flex
}

.bbq-resource {
    flex-shrink: 0;
    flex-grow: 1;
    width: 0;
    max-width: 350px;
    padding: 0 8px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    border-right: 1px solid rgba(0, 0, 0, .05)
}

.bbq-resource>div {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    flex-shrink: 1
}

.bbq-resource__name {
    margin-bottom: 4px;
    font-weight: 700;
    opacity: .8;
    text-transform: uppercase
}

.bbq-resource__props {
    opacity: .45
}

.bbq-resource__props,
.bbq-resource__tooltip {
    text-transform: lowercase
}

.bbq-resource__tooltip {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    border-radius: 4px;
    color: #2f3333;
    background-color: currentColor;
    padding: 12px;
    text-align: center;
    z-index: 10;
    list-style: none;
    margin: 0;
    display: none;
    box-sizing: border-box;
    box-shadow: 0 8px 16px 0 rgba(50, 50, 50, .08), 0 1px 3px 0 rgba(50, 50, 50, .08), 0 0 0 1px rgba(50, 50, 50, .04);
    pointer-events: none
}

.bbq-resource__tooltip:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: currentcolor
}

:hover>.bbq-resource__tooltip {
    display: block
}

.bbq-resource__tooltip>li {
    color: #fff;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    white-space: nowrap
}

.bbq-resource__tooltip>li+li {
    margin-top: 8px
}

.bbq-activity {
    position: absolute;
    right: 0;
    left: 0;
    padding: 4px
}

.bbq-activity__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #6475dc;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    height: 100%;
    font-size: 14px;
    padding: 4px;
    overflow: hidden;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.bbq-activity__content:hover {
    opacity: .8
}

.bbq-activity__row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bbq-activity__content .bbq-activity__row {
    pointer-events: none
}

.bbq-hole {
    position: absolute;
    right: 0;
    left: 0;
    padding: 4px;
    cursor: not-allowed
}

.bbq-hole>div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 4px;
    background-color: #f4f5f5;
    color: rgba(47, 51, 51, .6);
    font-size: 14px;
    font-weight: 500;
    overflow: hidden
}

.bbq-hole__text {
    font-weight: 600;
    text-align: right
}

.bbq-slot__hover {
    position: absolute;
    right: 0;
    left: 0;
    cursor: pointer
}

.bbq-slot__hover:hover+.bbq-slot__visual {
    opacity: 1;
    z-index: 1
}

.bbq-slot__visual {
    position: absolute;
    right: 0;
    left: 0;
    padding: 4px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none
}

.bbq-slot__visual>div {
    box-sizing: border-box;
    padding: 4px;
    height: 100%;
    line-height: 1;
    font-size: 14px;
    border-radius: 4px;
    background-color: rgb(164, 217, 108);
    color: #fff;
    position: relative
}

.bbq-slot__top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bbq-slot__word {
    font-weight: 700
}

.bbq-slot__hour {
    font-size: 12px
}

.bbq-slot__price {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500
}

.bbq-past {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(47, 51, 51, .25);
    border-bottom: 1px solid rgb(164, 217, 108)
}

.bbq-columns-wrap {
    position: relative
}

.bbq-columns {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.bbq-columns,
.bbq-columns__column {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex
}

.bbq-columns__column {
    flex-shrink: 0;
    flex-grow: 1;
    min-width: 120px;
    max-width: 350px;
    justify-content: center;
    align-items: center;
    position: relative;
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 1px, #fff 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05) 1px, #fff 0);
    background-repeat: repeat-y;
    background-size: 100% 1em;
    background-position: 0 2em;
    border-right: 1px solid rgba(0, 0, 0, .05)
}

.bbq-form {
    display: block
}

.bbq-form__durations {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 136px;
    overflow-y: auto
}

.bbq-form__duration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: rgba(1, 112, 105, .1);
    border-radius: 4px;
    line-height: 2.4;
    cursor: pointer;
    outline: none;
    font-size: 14px
}

.bbq-form__duration+.bbq-form__duration {
    margin-top: 8px
}

.bbq-form__button {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    width: 100%;
    background-color: #a4d96c;
    color: #fff;
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    text-align: center;
    text-decoration: none
}

.bbq-form__picked {
    background-color: rgba(1, 112, 105, .35)
}

.bbq-checkout {
    position: absolute;
    z-index: 100;
    width: 100%;
    border-radius: 4px;
    background-color: rgba(55, 58, 245, .35);
    -webkit-transition: height .25s ease-out;
    transition: height .25s ease-out
}

.bbq-activity__modal,
.bbq-checkout__modal {
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(50, 50, 50, .08), 0 1px 3px 0 rgba(50, 50, 50, .08), 0 0 0 1px rgba(50, 50, 50, .04);
    z-index: 100;
    -webkit-transform: translate(-50%, -4px);
    transform: translate(-50%, -4px);
    font-size: 16px
}

.bbq-checkout__modal {
    width: 260px
}

.bbq-activity__modal {
    display: flex;
    flex-direction: column;
    min-width: 260px
}

.bbq-activity__modal:after,
.bbq-checkout__modal:after {
    content: "";
    border: 8px solid transparent;
    border-top-color: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    pointer-events: none
}

.bbq-checkout__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px
}

.bbq-checkout__club {
    font-weight: 600;
    margin-right: 8px
}

.bbq-checkout__time {
    padding-left: 1.2em;
    background: transparent url(/static/media/clock.c270b6a5.svg) no-repeat 0;
    background-size: auto 14px
}

.bbq-checkout__empty {
    text-align: center;
    font-weight: 600
}

.bbq-activity__close,
.bbq-checkout__close {
    margin: 0;
    padding: 0;
    border: none;
    width: 24px;
    height: 24px;
    background-color: #fff;
    outline: none;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    -webkit-transform: translate(25%, -25%);
    transform: translate(25%, -25%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(50, 50, 50, .08), 0 1px 3px 0 rgba(50, 50, 50, .08), 0 0 0 1px rgba(50, 50, 50, .04)
}

.bbq-layer__checkout,
.bbq-layer__slot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.bbq-layer__slot {
    pointer-events: none;
    overflow: hidden
}

.bbq-layer__slot>div {
    position: absolute;
    width: 2em;
    height: 0;
    background-color: rgba(1, 112, 105, .35);
    border-radius: 4px;
    -webkit-transition: height .25s ease-out;
    transition: height .25s ease-out
}

.bbq {
    position: relative;
    font-size: 32px;
    border-radius: 4px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
    background-color: #fff
}

.bbq__grid {
    max-height: 560px;
    overflow: scroll
}

.bbq__content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.bbq__availability {
    flex-shrink: 0;
    flex-grow: 1
}

.bbq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 560px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
    background-color: #fff;
    font-size: 1rem
}

.bbq-button {
    background-color: #fff;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    color: rgb(1, 112, 105);
    cursor: pointer;
    position: absolute;
    z-index: 10
}

.bbq-button__hide {
    display: none
}

.bbq-button.left,
.bbq-button.right {
    top: 62px;
    padding: 8px 4px
}

.bbq-button.right {
    right: 6px
}

.bbq-button.down,
.bbq-button.left {
    left: 6px
}

.bbq-button.down,
.bbq-button.up {
    bottom: 6px;
    padding: 4px
}

.bbq-button.up {
    left: 34px
}

.bbq .filter {
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.bbq .filter__resource_feature,
.bbq .filter__resource_size,
.bbq .filter__resource_type {
    width: 220px
}

.home__advantages {
    display: flex;
    margin-top: -80px;
    border-top: 80px solid #fff;
    position: relative;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1643907450/playtomic/web/info.png);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat
}

.advantages__content {
    width: 50%;
    padding-left: 156px;
    padding-right: 144px;
    padding-bottom: 175px;
    background-color: rgba(14, 36, 51, 0.6)
}

.advantages__item {
    margin-top: 48px
}

.advantages__title {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.175;
    padding-bottom: 16px
}

.advantages__info {
    color: #fff;
    font-size: 16px;
    line-height: 1.45;
    margin-top: 24px
}

.advantages__image>img {
    width: 240px;
    margin-left: 96px
}

.advantages__seal {
    width: 200px;
    position: absolute;
    bottom: -100px;
    right: 140px
}

.logo {
    display: block;
    margin: 0;
    width: 41px;
    height: 43px
}

.logo--big {
    font-size: 4px
}

.logo--mobile {
    width: 24.6px;
    height: 25.8px
}

.logo--large {
    width: 174px
}

.logo--mobile.logo--large {
    width: 104.4px
}

.logo__a {
    fill: rgb(1, 112, 105)
}

.logo__b {
    fill: rgb(164, 217, 108)
}

.logo__c {
    fill: rgb(47, 51, 51)
}

.sticky {
    box-shadow: 0 32px 48px 0 rgba(1, 1, 1, .05);
    position: fixed;
    top: 0;
    z-index: 10;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.home__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 720px;
    width: 100%
}

.banner__images {
    overflow: hidden;
    height: 720px;
    width: 100%;
    position: relative
}

.banner__image {
    top: 0;
    left: 0;
    position: absolute;
    height: 780px;
    width: 100%
}

.banner__image--animated {
    -webkit-animation-name: imageAnimation;
    animation-name: imageAnimation;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-timing-function: cubic-bezier(.04, .68, .18, .15), linear;
    animation-timing-function: cubic-bezier(.04, .68, .18, .15), linear
}

.banner__image:before {
    background: #0e2433;
    opacity: .1;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.banner__image img {
    width: 100%;
    height: 780px;
    object-fit: cover
}

.banner__elements {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%
}

.banner__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
    position: relative;
    width: 100%;
    padding: 24px 24px 0 32px;
    z-index: 100
}

.banner__header .logo * {
    fill: rgb(255, 255, 255)
}

.banner__header .account .avatar__name {
    color: rgb(255, 255, 255);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    -webkit-transition: border-bottom .25s;
    transition: border-bottom .25s
}

.banner__header .account .avatar__name:hover {
    border-bottom: 1px solid rgba(255, 255, 255, .6)
}

.banner__header .account .avatar__image>div {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1536584655/playtomic/web/avatar-white.svg)
}

.banner__header .avatar__image:focus,
.banner__header .avatar__image:hover {
    border-color: rgba(255, 255, 255, .6)
}

.banner__header .account .avatar__drop {
    color: rgb(47, 51, 51)
}

.banner__content {
    color: rgb(255, 255, 255);
    width: 1008px;
    position: relative;
    z-index: 10
}

.banner__content h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.3px;
    margin-bottom: 24px
}

.banner__content h2 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px
}

.banner__content .search {
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    color: #000;
    padding: 24px
}

.banner__content .search .search__button {
    flex: 1 1
}

.home__banner .sticky {
    z-index: 10
}

.home__banner .sticky-search {
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    height: 80px;
    justify-content: space-between;
    padding: 0 16px 0 32px;
    width: 100vw
}

.home__banner .sticky-search__search {
    display: flex
}

.home__banner .sticky-search__search>*+* {
    padding-left: 32px
}

@-webkit-keyframes imageAnimation {
    0% {
        opacity: .7;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25% {
        opacity: 1
    }

    to {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px)
    }
}

@keyframes imageAnimation {
    0% {
        opacity: .7;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    25% {
        opacity: 1
    }

    to {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px)
    }
}

.home__description {
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    width: 800px
}

.description__title {
    color: #000;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.3px;
    margin-bottom: 64px;
    width: 592px
}

.description__block h3 {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px
}

.description__block p {
    color: #566670;
    font-size: 14px;
    line-height: 1.71;
    text-align: justify
}

.description__block>div>p {
    margin-bottom: 16px
}

.description__block h4 {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.71
}

.description__block ul li {
    display: flex;
    margin-bottom: 16px
}

div[class^=description__element] {
    background-color: #f3f4f5;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: auto calc(100% + 5px)
}

.description__element1,
.description__element2 {
    background-position: -1%;
    margin-left: 32px
}

.description__element3,
.description__element4,
.description__element5 {
    margin-right: 32px;
    background-position: 101%
}

.description__element1 {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1537347329/playtomic/web/1.svg);
    width: 275px
}

.description__element2 {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1537347658/playtomic/web/2.svg);
    width: 436px
}

.description__element3 {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1537347658/playtomic/web/3.svg);
    width: 323px
}

.description__element4 {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1537347658/playtomic/web/4.svg);
    width: 447px
}

.description__element5 {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1537347658/playtomic/web/5.svg);
    background-position: 103%;
    width: 323px
}

.home__description .slides {
    position: relative
}

.home__description .slides__page {
    padding-bottom: 0
}

.home__description .slides__arrows>.slides__arrow:first-child {
    position: absolute;
    top: 35%;
    left: -80px
}

.home__description .slides__arrows>.slides__arrow:last-child {
    position: absolute;
    top: 35%;
    left: 101%
}

.app_download_buttons {
    display: flex;
    align-items: center;
    justify-content: center
}

.app_download_buttons a {
    display: block;
    flex: 1 1
}

.app_download_buttons a+a {
    margin-left: 8px
}

.app_download_buttons img {
    width: 100%;
    height: 56px
}

@media (max-width:576px) {
    .app_download_buttons a+a {
        margin-left: 8px
    }

    .app_download_buttons img {
        height: 36px
    }
}

.home__downloadApp {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1643908291/playtomic/web/navy_bg.webp);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 696px
}

.downloadApp__content {
    display: flex;
    justify-content: center
}

.downloadApp__image>img {
    height: 750px;
    -webkit-transform: translateY(-27px);
    transform: translateY(-27px);
    -webkit-filter: drop-shadow(8px 8px 24px rgba(47, 51, 51, .4));
    filter: drop-shadow(8px 8px 24px rgba(47, 51, 51, .4))
}

.downloadApp__info {
    padding-top: 56px
}

.downloadApp__title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.3px;
    color: #fff;
    width: 488px;
    padding-left: 80px
}

.downloadApp__rating {
    background-color: #d6dfff;
    border-radius: 4px;
    color: #0e2433;
    font-size: 14px;
    line-height: 1.71;
    margin: 40px 0 0 80px;
    padding: 24px;
    width: 384px
}

.downloadApp__stars {
    display: flex;
    margin-top: 16px
}

.downloadApp__stars>.icon+.icon {
    margin-left: 8px
}

.downloadApp__list {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 1.71;
    margin: 40px 0 40px 80px;
    padding-left: 24px
}

.downloadApp__links {
    display: flex;
    justify-content: space-between;
    margin-left: 80px;
    width: 384px
}

.slides__page {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 32px;
    padding-bottom: 40px
}

.slides__dots {
    display: flex;
    justify-content: center;
    font-size: 8px;
    margin-top: 40px
}

.slides__dot {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: rgb(1, 112, 105);
    opacity: .2;
    cursor: pointer;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.slides__dot--current {
    opacity: 1
}

.slides__dot+.slides__dot {
    margin-left: 1em
}

.slides__arrow,
.slides__arrows {
    display: flex;
    justify-content: center
}

.slides__arrow {
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, .2);
    cursor: pointer;
    height: 48px;
    width: 48px;
    -webkit-transition: border .25s, color .25s;
    transition: border .25s, color .25s
}

.slides__arrow:hover {
    color: #000
}

.slides__arrow+.slides__arrow {
    margin-left: 16px
}

.slides__arrow .icon--chevron {
    font-size: 1.5px
}

.home__highlight-clubs {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f3f4f5;
    padding: 140px 112px 80px;
    margin-top: -60px
}

.home__highlight-clubs>* {
    max-width: 1216px
}

.highlight-clubs__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.highlight-clubs__subtitle {
    margin-bottom: 48px
}

.highlight-clubs__show-more {
    font-size: 14px;
    line-height: 1.14
}

.highlight-clubs__show-more .link {
    opacity: 1
}

.highlight-clubs__show-more .link--secondary {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    -webkit-transition: border-bottom .25s;
    transition: border-bottom .25s
}

.highlight-clubs__show-more .link--secondary:hover {
    border-bottom: 1px solid rgba(47, 51, 51, .7)
}

.highlight-clubs__madrid {
    margin-bottom: 80px
}

.highlight-clubs__content {
    display: flex
}

.highlight-clubs__content .slides .slides__pages>div {
    max-width: 1216px
}

.highlight-clubs__content .card {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    -webkit-transition: box-shadow .25s;
    transition: box-shadow .25s
}

.highlight-clubs__content .card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2)
}

.highlight-clubs__content .button {
    border: 1px solid #335fff;
    color: #335fff
}

.highlight-clubs__content .button:hover {
    border: 1px solid rgba(51, 95, 255, 0.8);
    color: rgba(51, 95, 255, 0.8)
}

.home__media {
    padding: 100px 0 136px;
    margin-top: -20px;
    background-color: #f3f4f5
}

.home__media>* {
    max-width: 1216px;
    margin: 0 auto
}

.media__title {
    color: #000;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.14;
    margin-bottom: 56px;
    text-align: center
}

.media__news {
    display: flex
}

.news2 {
    display: block;
    padding: 0 16px;
    text-decoration: none
}

.news2 * {
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.news2:hover * {
    opacity: 1
}

.news2__content {
    display: flex;
    flex-direction: column;
    align-items: center
}

.news2__logo {
    margin-bottom: 40px
}

.news2__logo svg {
    opacity: .4
}

.news2__title {
    color: #566670;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 8px;
    opacity: .32
}

.news2__text {
    color: #566670;
    font-size: 14px;
    line-height: 1.71;
    opacity: .16;
    text-align: center
}

.home__metrics {
    background-color: rgb(255, 255, 255);
    display: none;
    flex-direction: column;
    padding: 80px 112px;
    align-items: center;
    position: relative
}

.metrics__content {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.metrics__data {
    color: #000
}

.metrics__number {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin-bottom: 16px
}

.metrics__number,
.metrics__text {
    line-height: 1.175;
    text-align: right
}

.metrics__text {
    font-size: 22px;
    color: #879199;
    text-transform: lowercase
}

.home__ratings {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;
    padding-top: 80px;
    margin-top: -80px
}

.home__ratings>* {
    max-width: 1216px
}

.ratings__title {
    border-top: 1px solid #f3f4f5;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.14;
    margin-bottom: 48px;
    padding-top: 48px;
    text-align: center;
    width: 100%
}

.ratings__rating {
    display: flex
}

.ratings__rating>.rating+.rating {
    margin-left: 32px
}

.rating {
    display: flex;
    flex-direction: column;
    background-color: #0e2433;
    height: 264px;
    padding: 32px;
    width: 100%;
    border-radius: 12px
}

.rating__header {
    display: flex;
    align-items: center;
    margin-bottom: 24px
}

.rating__image {
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-size: 56px 56px;
    width: 56px;
    height: 56px
}

.rating__info {
    display: flex;
    flex-direction: column;
    margin-left: 16px
}

.rating__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    color: #fff
}

.rating__name {
    font-size: 14px;
    line-height: 1.71;
    color: #fff
}

.rating__stars {
    display: flex;
    margin-bottom: 24px
}

.rating__stars>.icon+.icon {
    margin-left: 8px
}

.rating__opinion {
    font-size: 14px;
    line-height: 1.71;
    color: #fff
}

.home__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/f_auto,q_20/v1536584658/playtomic/web/3steps.webp);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 80px;
    height: 856px;
    position: relative
}

.home__steps:before {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: 1%;
    content: "";
    top: 0;
    left: 0
}

.home__steps>div {
    max-width: 1216px
}

.steps__title {
    margin: 80px 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.3px;
    color: #fff;
    text-align: center;
    z-index: 1
}

.steps__content {
    display: flex;
    position: relative;
    justify-content: center;
    grid-gap: 34px;
    gap: 34px
}

.step {
    min-height: 200px;
    background-color: #fff;
    padding: 26px 24px;
    border-radius: 12px;
    border: 1px solid #cfd3d6
}

.step__circle {
    background-color: #ecff00;
    border-radius: 50%;
    height: 21px;
    width: 21px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    font-size: 14px;
    font-weight: 600
}

.step__title {
    font-weight: 800;
    font-size: 20px;
    line-height: 23.5px;
    display: flex
}

.step__divider {
    height: 1px;
    background-color: #cfd3d6;
    border-radius: 12px;
    margin: 26.5px 0
}

.step__text {
    font-size: 14px;
    color: #879199;
    line-height: 21px
}

.links__title {
    font-weight: 500;
    margin-bottom: 16px
}

.links a,
.links p {
    border: none;
    line-height: 1.75;
    text-decoration: none;
    color: rgba(14, 36, 51, 0.4)
}

.links a {
    cursor: pointer
}

.links a .badge {
    background-color: #335fff;
    color: #fff;
    padding: 2px 16px;
    border-radius: 30px;
    font-size: 12px
}

.links a:hover {
    opacity: 1
}

.footer {
    display: flex;
    justify-content: center;
    padding: 112px 24px
}

.footer__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    grid-gap: 24px;
    font-size: 16px;
    max-width: 1216px
}

.footer__links+.footer__links {
    border-top: 1px solid rgba(0, 0, 0, .05);
    margin-top: 56px;
    padding-top: 56px
}

.footer__download-links {
    margin-top: 36px;
    margin-bottom: 40px;
    width: 100%
}

.footer__download-links .links__title {
    font-size: 14px
}

.footer__download {
    display: flex;
    margin-top: 8px
}

.footer__download>a {
    flex: 1 1;
    background-color: #000;
    border-radius: 4px;
    color: #fff;
    height: 40px
}

.footer__download>a+a {
    margin-left: 16px
}

.footer__icon {
    background-repeat: no-repeat;
    background-size: auto 24px;
    background-position: 50%;
    height: 100%
}

@media screen and (max-width:1200px) {
    .footer__links {
        grid-template-columns: repeat(2, minmax(280px, 1fr))
    }
}

@media screen and (max-width:576px) {
    .footer {
        justify-content: flex-start;
        padding: 64px 24px
    }

    .footer>div {
        width: 100%
    }

    .footer__links {
        display: block
    }

    .footer__links>li+li {
        margin-top: 24px
    }

    .footer__links+.footer__links {
        margin-top: 40px;
        padding-top: 40px
    }
}

.home__apparel {
    background-color: #f3f4f5;
    padding-bottom: 70px
}

.apparel__title {
    text-align: center;
    max-width: 1216px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.apparel__title img {
    margin-right: 8px;
    height: 26px
}

.apparel__claim {
    color: #0e2433;
    font-size: 12px;
    background-color: #ecff00;
    padding: 2px 10px;
    border-radius: 16px;
    align-self: flex-start;
    margin-left: 8px
}

.apparel__title__separator {
    margin-left: 16px;
    margin-right: 16px;
    line-height: 1
}

.apparel__subtitle {
    text-align: center;
    max-width: 1216px;
    color: #000;
    font-size: 28px;
    font-weight: 300;
    margin: 0 auto 32px
}

.apparel__collections {
    display: flex;
    flex-wrap: nowrap;
    grid-gap: 8px;
    gap: 8px;
    position: relative
}

.apparel__seal {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 60px;
    height: 90px;
    z-index: 1
}

.apparel__collection {
    height: 750px;
    background-color: grey;
    width: 50%;
    background-size: cover;
    background-position: 50%;
    position: relative
}

.apparel__collection--men {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1653302442/playtomic/web/coleccion-hombre.jpg)
}

.apparel__collection--women {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1653302442/playtomic/web/coleccion-mujer.jpg)
}

.apparel__collection .button {
    max-width: 314px;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    position: absolute;
    bottom: 100px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 300
}

.apparel__collection .button:hover {
    color: #0e2433;
    background-color: #fff;
    opacity: 1;
    border-color: #0e2433
}

.not-found-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    background-color: #fafafa
}

.not-found-page__button {
    margin-top: 32px
}

.page-header .date-input .drop-down {
    z-index: 1000
}

.page-header .search__container {
    position: relative;
    flex: 1 1;
    margin-left: 24px
}

.button__container {
    background-color: rgb(250, 250, 250);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    -webkit-transition: all .35s;
    transition: all .35s;
    z-index: 10;
    overflow: hidden
}

.button__container--hide {
    left: 100%;
    opacity: 0
}

.button__container .button {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #879199;
    width: 190px
}

.button__container .button>div {
    color: #879199;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 400
}

.button__container .button>div>svg {
    font-size: 1.7px;
    margin-right: 8px
}

.search-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden
}

.search-page__header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .1), inset 0 -1px 0 0 rgba(47, 51, 51, .15);
    z-index: 10
}

.search-page__header>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 16px;
    box-sizing: border-box
}

.search-page__header>div:first-child>div {
    display: flex;
    align-items: center
}

.search-page__logo {
    padding: 0 24px 0 8px
}

.search-page__body {
    display: flex;
    flex: 1 1
}

.search-page__results {
    position: relative;
    z-index: 5;
    width: 60vw;
    padding: 24px;
    min-width: 800px;
    box-shadow: 8px 0 24px 0 rgba(47, 51, 51, .1), inset -1px 0 0 0 rgba(47, 51, 51, .15);
    height: calc(100vh - 132px)
}

.search-page__total {
    margin-bottom: 38px
}

.search-page__cards:after {
    content: "";
    display: block;
    clear: both
}

.search-page__cards>* {
    float: left;
    width: calc(50% - 12px)
}

.search-page__cards>:nth-child(2n) {
    float: left;
    margin-left: 24px
}

.search-page__cards>:nth-child(n+3) {
    margin-top: 24px
}

.search-page__map {
    flex: 1 1;
    height: calc(100vh - 129px);
    background-color: #e5e3df
}

.clubs-page,
.page__content {
    background-color: rgb(250, 250, 250)
}

.clubs-page {
    margin: 96px auto 0;
    max-width: 800px
}

.clubs-page__title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 40px
}

.clubs-page__letters {
    background-color: rgb(250, 250, 250);
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 16px;
    font-weight: 700;
    padding: 24px 0;
    position: -webkit-sticky;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
    letter-spacing: 1em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap
}

.clubs-page__letters a {
    text-decoration: none
}

.clubs-page__letters span {
    opacity: .2
}

.clubs-page__group {
    padding-top: 72px
}

.clubs-page__group:first-child {
    margin-top: -8px
}

.clubs-page__tenant-letter h3 {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 8px;
    text-transform: uppercase
}

.clubs-page__tenants-link {
    -webkit-columns: 2;
    -moz-columns: 2;
    column-count: 2;
    font-size: 16px;
    line-height: 1.75;
    margin-top: 16px;
    opacity: .6;
    text-align: left
}

.clubs-page__tenants-link a {
    display: block
}

.clubs-page__tenants-link a+a {
    margin-top: 1em
}

@media only screen and (max-width:600px) {
    .clubs-page {
        margin-top: 0;
        padding: 16px 16px 0
    }

    .clubs-page__tenants-link {
        -webkit-columns: auto auto;
        -moz-columns: auto auto;
        columns: auto
    }
}

.markdown {
    line-height: 1.4
}

.markdown h2 {
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 24px
}

.markdown h3 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px
}

.markdown *+h3 {
    margin-top: 32px
}

.markdown h4 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px
}

.markdown p {
    line-height: 1.5
}

.markdown p+p {
    margin-top: 16px
}

.markdown ul {
    list-style: disc;
    padding-left: 1em
}

.markdown li+li,
.markdown ul {
    margin-top: 1em
}

.anchors {
    background-color: #fff;
    border-bottom: 1px solid rgba(1, 1, 1, .05);
    color: rgba(1, 1, 1, .8);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.5px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100
}

.anchors>ul {
    display: flex;
    margin: 0 auto;
    width: 1008px
}

.anchors>ul>li {
    padding: 16px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent
}

.anchors>ul>li:hover {
    border-bottom-color: rgba(51, 95, 255, 0.1)
}

.anchors>ul>li>a {
    text-decoration: none;
    text-transform: uppercase
}

.anchors .selected {
    border-bottom-color: #335fff
}

.tenant-cash-payment {
    display: flex
}

.tenant-cash-payment__icon {
    margin-right: 24px
}

.tenant-cash-payment__icon>svg {
    width: 64px;
    height: 64px;
    color: rgb(1, 112, 105)
}

.tenant-cash-payment__title {
    font-size: 14px;
    font-weight: 700;
    color: #33302e
}

.tenant-cash-payment__text {
    color: #010101;
    font-size: 14px;
    line-height: 1.43;
    margin-top: 8px;
    opacity: .4;
    width: 302px
}

.m-tenant-page .tenant-cash-payment__text {
    width: auto
}

.facilities {
    flex-wrap: wrap
}

.facilities,
.facility {
    display: flex;
    align-items: center
}

.facility {
    justify-content: flex-start;
    opacity: .6;
    width: 50%
}

.facility:nth-child(n+3) {
    margin-top: 32px
}

.facility__icon {
    width: 32px;
    margin-right: 24px;
    fill: currentColor
}

.tenant-page__map {
    height: 430px
}

.tenant-page__address {
    border-bottom: 1px solid rgba(47, 51, 51, .05);
    margin-top: 16px;
    padding: 16px 0
}

.tenant-page__address>div {
    font-weight: 500
}

.tenant-page__transport {
    margin-top: 16px;
    opacity: .6
}

.tenant-page__transport>li {
    display: flex;
    align-items: center;
    margin-top: 8px
}

.transport__icon {
    fill: currentColor;
    height: 20px;
    margin-right: 8px
}

.tenant-schedule__day {
    border-bottom: 1px solid rgba(47, 51, 51, .05);
    display: flex;
    justify-content: space-between;
    padding: 8px 0
}

.tenant-schedule__day:last-child {
    border-bottom: none;
    display: block;
    padding-top: 24px
}

.tenant-schedule__day:last-child>.tenant-schedule__dayOfWeek,
.tenant-schedule__day:last-child>.tenant-schedule__hours {
    display: inline-block
}

.tenant-schedule__day:last-child>.tenant-schedule__hours {
    color: rgba(47, 51, 51, .4);
    font-size: 14px;
    margin-left: 0
}

.tenant-schedule__day:last-child>.tenant-schedule__hours:before {
    content: "\00a0"
}

.tenant-schedule__dayOfWeek {
    color: rgba(47, 51, 51, .4);
    font-size: 14px;
    line-height: 2
}

.tenant-schedule__hours {
    color: rgba(47, 51, 51, .8);
    font-size: 16px;
    line-height: 1.75
}

.tenant-pageBBQ .sports {
    display: block
}

.tenant-pageQB .sports {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.tenant-pageBBQ .sport,
.tenant-pageQB .sport {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    opacity: .6
}

.tenant-pageQB .sport {
    width: 50%
}

.tenant-pageBBQ .sport+.sport,
.tenant-pageQB .sport:nth-child(n+3) {
    margin-top: 32px
}

.tenant-pageBBQ .sport__icon,
.tenant-pageQB .sport__icon {
    width: 32px;
    margin-right: 24px;
    fill: currentColor
}

.carousel {
    max-width: 800px
}

.carousel__images {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 4px;
    background-color: rgba(47, 51, 51, .1)
}

.carousel__image {
    position: absolute;
    display: block;
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.carousel__image--first {
    z-index: 2;
    opacity: 1
}

.carousel__image--current:not(.carousel__image--first) {
    z-index: 2;
    -webkit-animation: carousel-show .15s ease-out;
    animation: carousel-show .15s ease-out
}

.carousel__image--before {
    z-index: 1;
    opacity: 1
}

.carousel__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px
}

.carousel__controls>*+* {
    margin-left: 48px
}

.carousel__progress {
    width: 280px;
    background-color: rgba(47, 51, 51, .1)
}

.carousel__progress>div {
    height: 1px;
    background-color: rgb(47, 51, 51);
    -webkit-transition: width .15s ease-out;
    transition: width .15s ease-out
}

.carousel__numbers {
    font-size: 14px;
    font-weight: 500
}

.carousel__numbers>span {
    opacity: .4
}

.carousel__arrows {
    display: flex
}

.carousel__arrows>button {
    display: block;
    padding: 8px;
    border: none;
    background-color: transparent;
    margin: 0;
    cursor: pointer
}

.carousel__arrows--disabled {
    pointer-events: none;
    opacity: .4
}

@-webkit-keyframes carousel-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes carousel-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.breadcrumbs {
    font-size: 14px
}

.breadcrumbs>li {
    display: inline
}

.breadcrumbs>li+li:before {
    content: "/";
    color: rgba(47, 51, 51, .4);
    margin: 0 8px
}

.breadcrumbs>li>a {
    border-bottom: 1px solid rgba(47, 51, 51, .4);
    padding: 4px 0;
    opacity: 1;
    color: #879199
}

.breadcrumbs>li>a:hover {
    color: #000
}

.breadcrumbs>li:last-child {
    pointer-events: none
}

.breadcrumbs>li:last-child>a {
    border-bottom: none
}

.tenant-page__title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 24px;
    color: #fff
}

.tenant-page__subtitle {
    font-weight: 500;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(47, 51, 51, .05);
    color: rgba(47, 51, 51, .8)
}

.tenant-page__header {
    position: relative;
    padding: 32px 120px;
    color: #fff;
    background-color: rgb(1, 112, 105);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

.tenant-page__header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(16%, rgba(0, 0, 0, .16)), to(#000));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .16) 16%, #000);
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .16) 16%, #000)
}

.tenant-page__header>* {
    position: relative
}

.tenant-page__header__address {
    font-size: 16px;
    font-weight: 400;
    opacity: .6
}

.tenant-page__anchors .anchors {
    padding: 0 120px
}

.tenant-page__anchors .anchors>ul {
    width: auto
}

.tenant-page__breadcrumbs {
    padding: 32px 120px 16px
}

.tenant-page__disclaimer {
    padding: 0 120px
}

.tenant-page__side {
    width: 384px;
    margin-left: 32px;
    z-index: 3
}

.tenant-content {
    max-width: 1440px;
    margin: 0 auto
}

.tenant-content,
.tenant-qb__content {
    display: flex;
    justify-content: space-between;
    padding: 0 120px
}

.tenant-page__main {
    max-width: 1000px;
    margin-top: 24px
}

.tenant-page__main .markdown {
    text-align: justify
}

.tenant-content__left-side {
    flex: 1 1;
    padding-top: 64px;
    margin-top: -32px
}

.tenant-content__left-side .markdown {
    text-align: justify
}

.tenant-content__right-side {
    padding-top: 64px;
    margin-top: -32px;
    min-width: 280px;
    margin-left: 160px
}

.tenant-content__right-side>div+div {
    padding-top: 64px
}

.tenant-content__left-side>div+div,
.tenant-page__main>div+div {
    padding-top: 32px
}

.tenant-page__bbq {
    padding: 32px 120px
}

.tenant-page__book .button {
    color: #fff;
    border-color: currentColor
}

.tenant-page--bg {
    background-color: #fafafa
}

@media screen and (max-width:1200px) {
    .tenant-content {
        display: block
    }

    .tenant-content__right-side {
        min-width: 280px;
        margin-left: 0
    }
}

.tenant-availability {
    width: 384px;
    padding: 32px;
    margin: 16px 0 48px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
    position: -webkit-sticky;
    position: sticky;
    top: 64px
}

.tenant-availability__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2
}

.tenant-availability__text {
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.71;
    opacity: .8
}

.tenant-availability__loading {
    display: flex;
    align-items: center;
    height: 48px;
    color: rgba(47, 51, 51, .6);
    letter-spacing: -.5px
}

.tenant-availability__loading .spinner {
    color: #335fff;
    width: 1.2em;
    margin-right: 8px
}

.tenant-availability__message {
    margin-bottom: 16px
}

.tenant-availability .tenant-cash-payment {
    bottom: -112px;
    left: 8px;
    position: absolute
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(250, 250, 250);
    height: 80px;
    padding: 16px 16px 16px 32px
}

.page__body {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px)
}

.page__content {
    flex: 1 1;
    display: flex;
    flex-direction: column
}

.debts {
    padding: 16px
}

.debts__title {
    display: none
}

.debts__total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.debts__debt-text {
    margin-bottom: 8px
}

.debts__caption {
    color: #f66;
    font-size: 34px;
    font-weight: 700
}

.debts__total>.button {
    flex-basis: 20%
}

.debts__history {
    margin-top: 24px
}

.debts__history-text {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    color: rgba(47, 51, 51, .6);
    padding-bottom: 8px
}

.debts__month {
    font-size: 14px;
    font-weight: 700;
    margin-top: 24px
}

.debt__element {
    display: flex;
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding: 16px 0
}

.debt__date {
    margin-right: 16px;
    text-align: center
}

.debt__day {
    font-size: 28px;
    font-weight: 700
}

.debt__weekday {
    font-size: 14px;
    opacity: .8;
    text-align: center
}

.debt__info {
    font-size: 14px;
    font-weight: 500;
    padding: 4px;
    width: 100%
}

.debt__description,
.debt__info {
    display: flex;
    justify-content: space-between
}

.debt__description {
    flex-direction: column
}

.debt__amount {
    color: #f66
}

.debts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px
}

.debts-empty__title {
    font-size: 22px;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px
}

.debts-empty__icon {
    color: #335fff
}

.debts-empty__icon svg {
    width: 36px;
    height: 36px
}

.debts-empty__text {
    color: #566670;
    line-height: 1.2
}

@media only screen and (min-width:576px) {
    .debts {
        padding: 0
    }

    .debts__title {
        display: block;
        border-bottom: 1px solid rgba(47, 51, 51, .1);
        padding-bottom: 24px
    }

    .debts__history {
        margin-top: 36px
    }
}

.m-account-page__menu {
    border-top: 1px solid rgb(47, 51, 51, .1)
}

.m-account-page__menu .select.input {
    padding: 16px;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .05)
}

.m-account-page__menu .select>div {
    justify-content: space-between
}

.m-account-page__content {
    background-color: rgb(250, 250, 250)
}

.m-checkout-login,
.mobile-modal__content {
    min-height: inherit
}

.m-checkout-login>.sign,
.mobile-modal__content>.sign {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px)
}

.m-checkout-login>.sign>*,
.mobile-modal__content>.sign>* {
    padding: 0 16px
}

.m-checkout-login>.sign>.sign__bar,
.mobile-modal__content>.sign>.sign__bar {
    margin: 24px 0 0;
    padding: 24px 16px;
    width: auto;
    flex: 1 1
}

.checkout-page-details {
    font-size: 14px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    min-height: 100%
}

.checkout-page-details__image {
    height: 141px;
    background-size: cover;
    background-color: rgba(47, 51, 51, .4);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px
}

.checkout-page-details header {
    margin-bottom: 24px
}

.checkout-page-details header>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.checkout-page-details header>*+* {
    margin-top: 8px
}

.checkout-page-details h1 {
    font-size: 16px
}

.checkout-page-details h2 {
    font-size: 16px;
    opacity: .4
}

.checkout-page-details footer,
.checkout-page-details li {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.checkout-page-details li {
    line-height: 1.8;
    padding: 8px 0
}

.checkout-page-details li+li {
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.checkout-page-details footer>div+div,
.checkout-page-details li>div+div {
    text-align: right
}

.checkout-page-details h3,
.checkout-page-details li>div+div {
    opacity: .4
}

.checkout-page-details__taxes {
    margin-left: 8px;
    opacity: .4
}

.checkout-page-details__price {
    display: flex;
    flex-direction: column;
    margin-top: 8px
}

.checkout-page-details__price>div {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.checkout-page-details__price>div+div {
    margin-top: 8px
}

.checkout-page-details__total-price {
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    color: rgb(1, 112, 105)
}

.checkout-page-details__total-price--discount {
    color: #f66
}

.checkout-page__cancelation-policy {
    margin-top: 24px
}

.checkout-page__cancelation-policy .m-small-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5
}

.checkout-page__cancelation-policy>div+div {
    margin-top: 16px
}

.checkout-page__cancelation-policy .spinner circle {
    color: #335fff
}

.checkout-page__disclaimer {
    margin-top: 8px
}

.m-checkout-page {
    padding: 16px
}

.m-checkout-page__club {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 8px
}

.m-checkout-page__info {
    opacity: .6;
    margin-bottom: 24px
}

.m-checkout-page__info>div+div {
    margin-top: 8px
}

.m-checkout-page__button {
    margin-top: 24px
}

.m-checkout-error {
    padding: 0 16px 16px
}

.checkout-loading {
    display: flex;
    align-items: center;
    height: 1.4em;
    color: rgba(47, 51, 51, .6);
    letter-spacing: -.5px;
    padding: 16px
}

.checkout-loading .spinner {
    color: #335fff;
    width: 1.2em;
    margin-right: 8px
}

.m-home__advantages {
    background-color: #f3f4f5;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px;
    position: relative
}

.m-home__advantages>div+div {
    padding: 0 16px
}

.m-advantages__image img {
    width: 100%;
    height: 360px;
    object-fit: cover
}

.m-advantages__title {
    color: #000;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.28;
    margin-top: 16px
}

.m-advantages__item {
    border-radius: 4px;
    margin-top: 16px;
    padding: 16px
}

.m-advantages__subtitle {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 16px
}

.m-advantages__subtitle:after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: #566670;
    margin-top: 22px
}

.m-advantages__text {
    color: #566670;
    font-size: 16px;
    line-height: 1.5;
    padding-top: 16px
}

.m-advantages__seal {
    width: 176px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%)
}

.m-home__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(250, 250, 250);
    padding: 40px 16px 0;
    text-align: center
}

.m-banner__title {
    margin-bottom: 16px
}

.m-banner__search {
    margin-top: 48px;
    width: 100%
}

.m-banner__search .button {
    background-color: #fff;
    border: none;
    box-shadow: 0 8px 32px 0 rgba(47, 51, 51, .05);
    color: rgba(47, 51, 51, .6);
    font-weight: 400
}

.m-banner__search .button>div {
    font-weight: 400;
    position: relative
}

.m-banner__search .button svg {
    width: 20px;
    height: 20px;
    margin-right: 16px;
    position: absolute;
    left: 0
}

.m-home__description {
    padding: 168px 16px 40px
}

.m-home__description h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 16px
}

.m-home__description h4 {
    font-weight: 700;
    margin-bottom: 8px
}

.m-home__description p {
    font-size: 16px;
    color: #566670;
    line-height: 1.5;
    margin-bottom: 16px
}

.m-home__description .button {
    margin-top: 16px
}

.m-home__description .button>div {
    font-weight: 400
}

.m-description__text {
    max-height: 490px;
    overflow: hidden;
    -webkit-transition: max-height 1.5s;
    transition: max-height 1.5s
}

.m-description__text--opened {
    max-height: 5000px
}

.m-home__downloadApp {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1643908291/playtomic/web/navy_bg.webp);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 48px 16px 0;
    margin-bottom: 100px
}

.m-downloadApp__title {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.28
}

.m-downloadApp__rating {
    background-color: rgba(47, 51, 51, .2);
    border-radius: 4px;
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.5;
    margin-top: 48px;
    padding: 16px 16px 32px
}

.m-downloadApp__stars {
    display: flex;
    margin-top: 16px
}

.m-downloadApp__stars>.icon+.icon {
    margin-left: 8px
}

.m-downloadApp__list {
    margin-top: 32px;
    padding: 0 16px
}

.m-downloadApp__list>ul>li {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px
}

.m-downloadApp__links {
    display: flex;
    margin-top: 40px;
    margin-bottom: 56px
}

.m-downloadApp__image {
    display: flex;
    justify-content: center;
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
}

.m-downloadApp__image img {
    height: 588px
}

.m-home__highlight-clubs {
    background-color: #f3f4f5;
    padding: 48px 0 40px
}

.m-highlight-clubs__title {
    padding: 0 16px 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25
}

.m-highlight-clubs__content .slides__dots {
    margin-top: 8px
}

.m-highlight-clubs__content .slides__dot {
    background-color: #0e2433
}

.m-highlight-clubs__card {
    padding: 0 16px;
    max-width: 100%
}

.m-highlight-clubs__barcelona {
    padding-top: 40px
}

.m-highlight-clubs__content .button {
    border: 1px solid #335fff;
    color: #335fff
}

.m-home__media {
    background-color: #f3f4f5;
    padding: 40px 0
}

.m-media__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 40px;
    text-align: center
}

.m-media__news .news2__logo svg,
.m-media__news .news2__title {
    opacity: 1
}

.m-media__news .news2__text {
    opacity: .8
}

.m-media__news .slides__dots {
    margin-top: 0
}

.m-media__news .slides__dot {
    background-color: #0e2433
}

.m-home__metrics {
    padding: 32px 16px 0;
    display: none
}

.m-metrics__content {
    background-color: #fff;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    padding-bottom: 24px
}

.m-metrics__number {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.28;
    text-align: center;
    color: #000
}

.m-metrics__text {
    font-size: 16px;
    line-height: 1.5;
    opacity: .6;
    text-align: center;
    text-transform: lowercase;
    color: #879199
}

.m-home__ratings {
    padding: 24px 16px 32px
}

.m-ratings__title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 24px
}

.m-ratings__rating .slides__dots {
    margin-top: 0
}

.m-ratings__rating .slides__dot {
    background-color: #0e2433
}

.m-home__steps {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1644226768/playtomic/web/3steps-m.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f3f4f5;
    display: flex;
    flex-direction: column;
    padding-bottom: 40px
}

.m-home__steps>div+div {
    padding: 0 16px
}

.m-steps__title {
    color: #000;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.175;
    margin-top: 66px;
    padding: 0 32px;
    width: 200px;
    margin-bottom: 328px
}

.m-steps__item {
    background-color: #fff;
    border: 1px solid #cfd3d6;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .03);
    margin-top: 24px;
    padding: 16px;
    min-height: 200px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .2)
}

.m-steps__subtitle {
    border-bottom: 1px solid #cfd3d6;
    color: #000;
    padding-bottom: 16px;
    font-weight: 800;
    font-size: 20px;
    line-height: 23.5px;
    display: flex
}

.m-steps__text {
    color: #879199;
    font-size: 14px;
    line-height: 1.175;
    padding-top: 16px
}

.m-steps__circle {
    background-color: #ecff00;
    border-radius: 50%;
    height: 21px;
    width: 21px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    font-size: 14px;
    font-weight: 600
}

.m-home__apparel {
    background-color: #f3f4f5;
    padding-bottom: 70px
}

.m-apparel__title {
    text-align: center;
    padding: 0 16px;
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #000
}

.m-apparel__title img {
    height: 16px
}

.m-apparel__claim {
    color: #0e2433;
    font-size: 12px;
    background-color: #ecff00;
    padding: 2px 10px;
    border-radius: 16px;
    align-self: flex-start;
    margin-left: 8px
}

.m-apparel__title__separator {
    margin-left: 16px;
    margin-right: 16px
}

.m-apparel__subtitle {
    text-align: center;
    color: #000;
    font-size: 18px;
    font-weight: 300;
    margin: 0 auto 32px
}

.m-apparel__collections {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5px;
    gap: 5px;
    position: relative
}

.m-apparel__collection {
    height: 360px;
    background-color: grey;
    width: 100%;
    background-size: cover;
    background-position: 50%;
    position: relative
}

.m-apparel__collection--men {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1653302442/playtomic/web/coleccion-hombre.jpg)
}

.m-apparel__collection--women {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1653302442/q_auto,f_auto/playtomic/web/coleccion-mujer.jpg)
}

.m-apparel__seal {
    position: absolute;
    right: 45px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    height: 60px;
    z-index: 1
}

.m-apparel__collection .button {
    max-width: 314px;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 16px;
    position: absolute;
    bottom: 54px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 18px
}

.m-apparel__collection .button:hover {
    color: #0e2433;
    background-color: #fff;
    opacity: 1;
    border-color: #0e2433
}

.m-not-found-page {
    background-color: rgb(250, 250, 250);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
    text-align: center
}

.m-not-found-page__cta,
.m-not-found-page__text {
    margin-top: 24px
}

.m-not-found-page__cta__buttons {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-bottom: 16px
}

.mobile-menu__icon .icon--menu {
    width: 24px;
    height: 24px;
    color: #000
}

.mobile-menu__drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 16px;
    background-color: #fff;
    z-index: 100;
    -webkit-transform: translate(100%);
    transform: translate(100%);
    -webkit-transition: -webkit-transform .15s;
    transition: -webkit-transform .15s;
    transition: transform .15s;
    transition: transform .15s, -webkit-transform .15s;
    will-change: transform
}

.mobile-menu__drawer--open {
    -webkit-transform: translate(0);
    transform: translate(0)
}

.mobile-menu__top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px
}

.mobile-menu__cross {
    opacity: .3
}

.mobile-menu__cross>svg {
    height: 16px;
    width: 16px
}

.mobile-menu__links+.mobile-menu__links {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.mobile-menu__link,
.mobile-menu__links a {
    display: flex;
    align-items: center
}

.mobile-menu__links a {
    height: 40px;
    margin-left: 16px;
    text-decoration: none
}

.mobile-menu__links form {
    margin-left: 16px
}

.mobile-menu__links form button {
    background-color: transparent;
    border: none;
    opacity: 1
}

.mobile-avatar {
    display: flex;
    align-items: center;
    margin-bottom: 24px
}

.mobile-avatar .avatar__image {
    border: none;
    padding: 0
}

.mobile-avatar__name {
    margin-left: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6
}

.m-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: rgb(250, 250, 250)
}

.m-page-header__white {
    background-color: #fff
}

.m-search-page__header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .1), inset 0 -1px 0 0 rgba(47, 51, 51, .15);
    z-index: 10
}

.m-search-page__body {
    display: flex;
    flex: 1 1
}

.m-search-page__results {
    padding: 16px;
    width: 100%
}

.m-search-page__total {
    margin-bottom: 24px
}

.m-search-page__cards>* {
    margin-top: 24px
}

.web-or-app__stay {
    display: block;
    width: 100%;
    height: 1.4em;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding: 0;
    margin: 24px 0 0;
    border: none;
    background: transparent
}

.m-facilities {
    margin-top: 20px
}

.m-facility {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    opacity: .6
}

.m-facility__icon {
    width: 32px;
    margin-right: 24px;
    fill: currentColor
}

.m-tenant-page__map {
    height: 200px
}

.m-tenant-page__address {
    padding: 16px 0;
    border-bottom: 1px solid rgba(47, 51, 51, .05)
}

.m-tenant-page__address>div {
    font-weight: 500
}

.m-tenant-page__transport {
    opacity: .6;
    margin-top: 16px
}

.m-tenant-page__transport>li {
    display: flex;
    align-items: center;
    margin-top: 8px
}

.m-transport__icon {
    height: 20px;
    margin-right: 8px;
    fill: currentColor
}

.m-sports {
    margin-top: 20px
}

.m-sport {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    opacity: .6
}

.m-sport__icon {
    width: 32px;
    margin-right: 24px;
    fill: currentColor
}

.m-tenant-availability__button {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 0 24px 0 rgba(1, 1, 1, .1);
    z-index: 10
}

.m-tenant-availability,
.m-tenant-unbookable {
    padding: 16px
}

.m-tenant-unbookable__button {
    margin-top: 32px
}

.m-tenant-page__header {
    position: relative;
    padding: 64px 0;
    color: #fff;
    background-color: rgb(1, 112, 105);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.m-tenant-page__header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(16%, rgba(0, 0, 0, .16)), to(#000));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .16) 16%, #000);
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .16) 16%, #000)
}

.m-tenant-page__header>* {
    position: relative
}

.m-tenant-page__header-content {
    padding: 0 16px
}

.m-tenant-page__header-title {
    margin-top: 24px
}

.m-tenant-page__header__seo {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4
}

.m-tenant-page__header__address {
    font-size: 14px;
    font-weight: 500;
    opacity: .8;
    margin-top: 8px
}

.m-tenant-page__content {
    padding: 48px 16px
}

.m-tenant-page__main .breadcrumbs {
    margin-top: -24px;
    font-size: 16px
}

.m-tenant-page__main>*+* {
    margin-top: 24px
}

.m-tenant-page__subtitle {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(47, 51, 51, .05)
}

.m-tenant-page__image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    height: 200px;
    border-radius: 4px
}

.m-page.tenant-page .m-footer {
    padding-bottom: 112px
}

.offers__switch {
    margin-top: 32px
}

.offers__switch .spinner {
    color: #335fff;
    margin-left: 16px;
    width: 32px
}

.offers-title {
    display: flex
}

.offers-title.medium-title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    margin-bottom: 0;
    padding-bottom: 24px
}

.offers-list {
    margin-bottom: 32px
}

.offers-list__text {
    line-height: 24px;
    padding: 24px 0;
    opacity: .4
}

.offers-item,
.offers-item>a {
    display: flex
}

.offers-item {
    padding: 16px
}

.offers-item:last-child>a {
    padding-bottom: 0
}

.offers-item+.offers-item {
    border-top: 1px solid rgba(1, 1, 1, .05)
}

.offers-item__info {
    cursor: pointer
}

.offers-item__money {
    margin-right: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 700
}

.offers-item__money>div:first-child {
    margin-bottom: 4px
}

.offers-item__money>div:last-child {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.14
}

.offers-item__name {
    opacity: .9;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px
}

.offers-item__expiry {
    opacity: .4;
    font-size: 14px
}

.offers-item__button {
    margin-left: auto
}

.offers-add-vouchers>.button>div {
    justify-content: unset
}

.offers-add-vouchers__icon {
    padding-left: 8px
}

.offers-add-vouchers__text {
    width: 100%;
    text-align: center
}

.offers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px
}

.offers-empty__title.medium-title {
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 8px
}

.offers-empty__icon {
    color: #335fff
}

.offers-empty__icon svg {
    width: 36px;
    height: 36px
}

.offers-empty__body {
    color: #566670;
    line-height: 1.2
}

.offers-empty__body p+p {
    margin-top: 1em
}

.offer-movements {
    min-width: 536px;
    padding: 48px
}

.offer-movements .spinner {
    color: #335fff
}

.offer-movements__offer-tenant.medium-title {
    margin-bottom: 24px
}

.offer-movements__offer-title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 16px
}

.offer-movements__balance {
    display: flex;
    justify-content: space-between;
    margin-top: 8px
}

.offer-movements__balance .button {
    width: auto
}

.offer-movements__qty {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25
}

.offer-movements__balance-title {
    font-size: 14px;
    opacity: .6
}

.movements__month-date {
    font-size: 14px;
    font-weight: 700;
    margin-top: 24px
}

.movement {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid rgba(47, 51, 51, .1)
}

.movements .movement:last-child {
    border-bottom: none
}

.movement-date {
    margin-right: 16px
}

.movement-date__day {
    font-size: 28px;
    font-weight: 700
}

.movement-date__weekday {
    font-size: 14px;
    opacity: .8;
    text-align: center
}

.movement-description {
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
    padding: 4px 0;
    max-width: 500px
}

.movement-description>div {
    margin-bottom: 4px
}

.movement-balance {
    margin-left: auto;
    padding: 4px 0
}

.movement-units {
    color: #f66
}

.movement-units.movement-units__positive {
    color: rgb(1, 112, 105)
}

.movement-units.movement-units__positive:before {
    content: "+"
}

.addvouchermodal {
    width: 592px;
    padding: 48px
}

.addvouchermodal__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    padding-bottom: 24px
}

.addvouchermodal__detail {
    width: 60%
}

.addvouchermodal__detail>* {
    margin-bottom: 12px
}

.addvouchermodal__button {
    margin-top: 32px
}

.addvouchermodal__text {
    line-height: 24px;
    opacity: .6;
    padding-bottom: 8px;
    padding-top: 16px
}

.addvouchermodal__input {
    padding-top: 40px;
    padding-bottom: 24px
}

.about-security {
    display: flex;
    align-items: center;
    opacity: .4;
    margin-bottom: 48px
}

.about-security .icon {
    margin-right: 8px;
    width: 15.75px;
    height: 20.25px
}

.payment-method-icon {
    flex-shrink: 0
}

.payment-method-icon--visa {
    width: 40px;
    height: 26px
}

.payment-method-icon--mastercard {
    width: 42px;
    height: 28px
}

.payment-method-icon--amex,
.payment-method-icon--unknown {
    width: 40px;
    height: 26px
}

.payment-method-icon--wallet {
    width: 40px;
    height: 40px
}

.payment-methods-icons {
    display: flex;
    align-items: center
}

.payment-methods-icons .payment-method-icon {
    opacity: .1;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.payment-methods-icons .payment-method-icon--current {
    opacity: 1
}

.payment-methods-icons .payment-method-icon+.payment-method-icon {
    margin-left: 24px
}

.payment-methods__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding-bottom: 24px
}

.payment-methods__security {
    display: flex;
    align-items: center;
    opacity: .4;
    margin-bottom: 16px
}

.payment-methods__security .icon {
    margin-right: 8px;
    font-size: 1.5px
}

.payment-methods__actions {
    margin-top: 32px
}

.payment-methods-list:after {
    content: "";
    display: block;
    clear: both
}

.payment-methods-item {
    border: 1px solid rgba(47, 51, 51, .2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 24px;
    float: left;
    width: calc(50% - 16px)
}

.payment-methods-item:nth-child(n+3) {
    margin-top: 32px
}

.payment-methods-item svg {
    fill: #000
}

.payment-methods-item:nth-child(2n) {
    margin-left: 32px
}

.payment-methods-item__info {
    flex: 1 1;
    margin: 0 12px
}

.payment-methods-item__card-type {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: capitalize
}

.payment-methods-item__actions .button {
    border: none;
    padding: 0
}

.payment-methods-item__actions .icon--trash {
    color: rgba(47, 51, 51, .4);
    height: 24px;
    width: 24px
}

.payment-methods__actions .button .icon {
    margin-right: 12px
}

@media (max-width:1019px) {
    .payment-methods-item {
        width: auto;
        float: none
    }

    .payment-methods-item:nth-child(2n) {
        margin-left: 0
    }

    .payment-methods-item+.payment-methods-item {
        margin-top: 32px
    }
}

.add-payment-method {
    width: 592px;
    padding: 48px
}

.add-payment-method__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 24px;
    padding-bottom: 24px
}

.add-payment-method__actions {
    display: none;
    justify-content: space-between;
    margin-top: 32px
}

.add-payment-method__actions>.button:first-child {
    margin-right: 20%
}

.add-payment-method__actions>.button {
    border-color: rgba(47, 51, 51, .2);
    color: rgb(47, 51, 51)
}

.stripe__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px
}

.stripe__rest {
    display: flex;
    margin: 16px 0
}

.stripe__rest>* {
    width: 54%
}

.stripe__rest>*+* {
    margin-left: 24px;
    flex: 1 1
}

.stripe__button {
    margin-top: 32px
}

.stripe__cards {
    margin-top: 16px
}

.stripe__more .check-box__label {
    font-size: 14px
}

.stripe__voucher {
    margin-top: 24px
}

.stripe__back {
    display: flex;
    margin-top: 16px
}

.stripe__back .button {
    border: none;
    padding: 0;
    width: auto
}

.stripe__back .button>div {
    border-bottom: 1px solid rgba(47, 51, 51, .15);
    color: rgba(47, 51, 51, .4);
    font-size: 14px;
    font-weight: 400;
    height: 24px;
    -webkit-transition: all .25s;
    transition: all .25s
}

.stripe__back .button>div:hover {
    border-bottom: 1px solid rgba(47, 51, 51, .4);
    color: rgba(47, 51, 51, .6)
}

.m-stripe {
    padding: 0 16px 16px
}

.reservations__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding-bottom: 24px
}

.reservations-list {
    padding: 8px 0
}

.reservations-item>a {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    cursor: pointer
}

.reservations-item:last-child>a {
    padding-bottom: 0
}

.reservations-item+.reservations-item {
    border-top: 1px solid rgba(1, 1, 1, .05)
}

.reservations-item__date {
    margin-right: 16px;
    text-align: center
}

.reservations-item__date-day {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px
}

.reservations-item__date-month {
    opacity: .6;
    font-size: 14px;
    color: #010101;
    text-transform: capitalize
}

.reservations-item__tenant {
    opacity: .9;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px
}

.reservations-item__description {
    opacity: .4;
    font-size: 14px;
    margin-bottom: 16px
}

.reservations-item__status {
    opacity: .6;
    font-size: 14px;
    text-transform: capitalize
}

.reservations-item__status--canceled {
    color: #f66
}

.reservations-item__status--paid {
    color: rgb(1, 112, 105)
}

.reservation {
    width: 592px;
    padding: 48px
}

.reservation__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    padding-bottom: 24px
}

.reservation__actions {
    display: none;
    justify-content: space-between;
    margin-top: 32px
}

.reservation__actions>.button:first-child {
    margin-right: 20%
}

.reservation__actions>.button {
    border-color: rgba(47, 51, 51, .2);
    color: rgb(47, 51, 51)
}

.reservation__image {
    flex: 1 1;
    height: 84px;
    background-size: cover;
    background-color: rgba(47, 51, 51, .4);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px
}

.reservation__detail {
    width: 60%
}

.reservation__detail>* {
    margin-bottom: 12px
}

.reservation__button {
    margin-top: 16px
}

.reservation__content header {
    display: flex;
    padding-bottom: 8px;
    margin: 24px 0
}

.reservation__content header>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.reservation__content h1 {
    font-size: 16px;
    font-weight: 700
}

.reservation__content h2 {
    font-size: 16px;
    opacity: .6
}

.reservation__content footer,
.reservation__content li {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.reservation__content ul {
    background-color: rgba(47, 51, 51, .02);
    padding: 0 16px
}

.reservation__content li {
    line-height: 1.8;
    padding: 12px 0
}

.reservation__content li+li {
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.reservation__content footer>div+div,
.reservation__content li>div+div {
    text-align: right
}

.reservation__content li>div:first-child {
    font-weight: 500
}

.reservation__content h3,
.reservation__content li>div+div {
    opacity: .6
}

.reservation__content footer {
    margin-top: 32px;
    font-size: 14px
}

.reservation__taxes {
    margin-left: 8px;
    opacity: .6
}

.reservation__price {
    font-size: 28px;
    font-weight: 700;
    text-align: right;
    color: rgb(1, 112, 105)
}

.reservation__resend-button {
    margin-top: 32px
}

.suggestion-modal {
    padding: 48px;
    width: 536px
}

.suggestion-modal__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: center;
    margin: 0 0 24px
}

.suggestion-modal__content {
    font-size: 14px;
    line-height: 1.5
}

.suggestion-modal__content p+p {
    margin-top: 24px
}

.suggestion-modal__actions {
    margin-top: 56px
}

.suggestion-modal .icon {
    display: block;
    margin: 0 auto 24px;
    height: 64px;
    width: 64px;
    color: rgb(1, 112, 105)
}

.suggestion__title {
    border-bottom: 1px solid rgba(47, 51, 51, .1);
    padding-bottom: 24px
}

.suggestion__description {
    color: rgba(47, 51, 51, .4);
    margin-bottom: 32px
}

.suggestion__form .field {
    height: auto;
    max-width: 440px
}

.suggestion__form .field+.buttons {
    margin-top: 32px
}

.account-page {
    flex: 1 1;
    background-color: #fafafa
}

.account-page__menu {
    display: flex;
    justify-content: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .1);
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid rgba(1, 1, 1, .05)
}

.account-page__content {
    padding: 80px
}

.account-page__content>div {
    padding: 48px;
    max-width: 1008px;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
    background-color: #fff
}

.account-page__form {
    margin-top: 32px
}

.account-page__form .field {
    max-width: 440px
}

.app-download {
    padding: 24px;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.app-download__text {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1em;
    max-width: 500px
}

.facebook_sign_in {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 48px;
    border: 0;
    color: #fff;
    background-color: #2f4e8b;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer
}

.facebook_sign_in>span {
    display: inline-block;
    padding: 8px 0 8px 36px;
    background: transparent url(https://res.cloudinary.com/playtomic/image/upload/v1560335712/playtomic/web/icons/facebook_sign_in.svg) no-repeat 0;
    background-size: contain
}

.checkout__vouchers__add,
.checkout__vouchers__loading {
    display: flex;
    height: 64px;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 4px
}

.checkout__vouchers__loading {
    align-items: center
}

.checkout__vouchers__add>div {
    flex: 1 1;
    padding: 0 0 0 16px
}

.checkout__vouchers__add input {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    display: block;
    width: 100%;
    height: 32px;
    font-size: 16px;
    font-family: inherit;
    border: solid rgba(164, 217, 108, .3);
    border-width: 0 0 1px;
    -webkit-transition: border-color .15s;
    transition: border-color .15s
}

.checkout__vouchers__add input:focus {
    border-color: rgb(164, 217, 108)
}

.checkout__vouchers__add--invalid input {
    border-color: #f66
}

.checkout__vouchers__add__error {
    font-size: 14px;
    line-height: 28px;
    color: #f66
}

.checkout__vouchers__add button {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    display: block;
    border: none;
    margin: 0;
    padding: 0 24px;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    opacity: .6;
    cursor: pointer;
    -webkit-transition: opacity .15s;
    transition: opacity .15s
}

.checkout__vouchers__add button:focus,
.checkout__vouchers__add button:hover {
    opacity: 1
}

.checkout__vouchers__add .spinner,
.checkout__vouchers__loading .spinner {
    width: 24px;
    height: 24px;
    color: #335fff
}

.checkout__vouchers__loading .spinner {
    margin-left: 16px
}

.checkout__vouchers__back {
    font-size: 14px;
    margin-top: 8px
}

.checkout__vouchers__select {
    position: relative;
    z-index: 1
}

.checkout__vouchers__select--open {
    z-index: 2
}

.checkout__vouchers__select__toggle {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1561542038/playtomic/web/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 10px top 23px;
    background-size: 25px;
    position: relative;
    z-index: 1;
    padding: 1px
}

.checkout__vouchers__select__spinner {
    position: absolute;
    top: 50%;
    right: 16px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.checkout__vouchers__select__spinner .spinner {
    width: 20px;
    height: 20px;
    color: #335fff
}

.checkout__vouchers__select--open .checkout__vouchers__select__toggle {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1561542038/playtomic/web/icons/chevron-up.svg)
}

.checkout__vouchers__select--applying .checkout__vouchers__select__toggle {
    background-image: none
}

.checkout__vouchers__select__dropdown {
    box-sizing: border-box;
    padding-top: 64px;
    max-height: 64px;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 4px;
    display: flex;
    flex-direction: column
}

.checkout__vouchers__select--selected .checkout__vouchers__select__dropdown {
    border-color: rgba(1, 112, 105, .3)
}

.checkout__vouchers__select--open .checkout__vouchers__select__dropdown {
    border-color: rgba(1, 112, 105, .8);
    max-height: 228px
}

.checkout__vouchers__select ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: auto;
    flex: 1 1;
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.checkout__vouchers__select li {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: background-color .25s;
    transition: background-color .25s
}

.checkout__vouchers__select li:hover {
    background-color: rgba(1, 112, 105, .15)
}

.checkout__voucher {
    box-sizing: border-box;
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.checkout__voucher--current {
    background-color: rgba(1, 112, 105, .1)
}

.checkout__voucher div {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.checkout__voucher__name {
    font-weight: 500
}

.checkout__voucher__description {
    color: rgba(47, 51, 51, .5);
    margin-top: 4px
}

.checkout__voucher__discount {
    font-size: 20px;
    font-weight: 700;
    padding-right: 16px;
    flex-shrink: 0
}

.checkout {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f5f5
}

.checkout__view {
    display: flex;
    flex-direction: column;
    background-color: #fff
}

.checkout__view>div {
    flex: 1 1
}

.checkout__view>div>div {
    padding: 24px
}

.checkout__details {
    padding: 24px;
    line-height: 1.2;
    background-color: #f5f5f5;
    -webkit-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out
}

.checkout--paid .checkout__details {
    background-color: #fff
}

.checkout--paid .checkout__view {
    overflow: hidden
}

@-webkit-keyframes slide_view_up {
    0% {
        max-height: 100vh
    }

    to {
        max-height: 0
    }
}

@keyframes slide_view_up {
    0% {
        max-height: 100vh
    }

    to {
        max-height: 0
    }
}

.checkout--paid .checkout__view {
    -webkit-animation: slide_view_up 1s forwards;
    animation: slide_view_up 1s forwards
}

@media (min-width:1000px) {
    .checkout {
        padding: 16px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .checkout__content {
        width: 1000px;
        padding-top: 48px;
        background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1648207844/playtomic/web/logo_black.svg);
        background-repeat: no-repeat;
        background-position: top;
        background-size: auto 44px;
        -webkit-transition: width .5s ease-out;
        transition: width .5s ease-out
    }

    .checkout__box {
        display: flex;
        flex-direction: row-reverse;
        box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05);
        background-color: #fff;
        border-radius: 4px;
        min-height: 600px;
        -webkit-transition: min-height 1s ease-out;
        transition: min-height 1s ease-out;
        margin-top: 8px
    }

    .checkout__view {
        flex: 1 1;
        -webkit-transition: opacity 1s ease-out;
        transition: opacity 1s ease-out;
        -webkit-animation: none;
        animation: none
    }

    .checkout__details {
        width: 400px;
        flex-shrink: 0;
        box-sizing: border-box;
        border-radius: 0 4px 4px 0;
        -webkit-transition: background-color 1s ease-out;
        transition: background-color 1s ease-out
    }

    .checkout--paid .checkout__box {
        min-height: 0
    }

    .checkout--paid .checkout__content {
        width: 500px
    }

    .checkout--paid .checkout__details {
        border-radius: 4px;
        width: 500px
    }
}

.checkout__details>div {
    position: -webkit-sticky;
    position: sticky;
    top: 24px
}

.checkout__sport,
.checkout__tenant {
    margin-bottom: 8px
}

.checkout__sport {
    opacity: .4
}

.checkout__address {
    opacity: .4;
    font-size: 14px
}

.checkout__features {
    margin: 16px 0;
    font-size: 14px
}

.checkout__features>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0
}

.checkout__features>div+div {
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.checkout__features>div>div+div {
    color: rgba(47, 51, 51, .4)
}

.checkout__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    height: 32px
}

.checkout__price__money {
    font-size: 28px;
    font-weight: 700;
    color: #335fff
}

.checkout__price__money--discount {
    color: #ee3663
}

.checkout__price__taxes {
    opacity: .4
}

.checkout__cancelation_policy {
    font-size: 14px;
    margin-top: 24px
}

.checkout__cancelation_policy>div:first-child {
    font-weight: 500;
    margin-bottom: 8px
}

.checkout__split_payment {
    font-size: 14px;
    margin-top: 24px
}

.checkout__split_payment>div:first-child {
    font-weight: 500;
    margin-bottom: 8px
}

.checkout__note,
.checkout__note-asterisk {
    font-weight: 500;
    color: #ee3663
}

.checkout__note {
    font-size: 12px;
    margin-top: 16px
}

.checkout__title {
    line-height: 1.4;
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(47, 51, 51, .1)
}

.checkout__text {
    line-height: 1.5;
    opacity: .8
}

.checkout__buttons {
    margin-top: 24px
}

.checkout__buttons>*+* {
    margin-top: 16px
}

.checkout__teaser-top {
    margin-bottom: 24px;
    font-size: 14px;
    color: rgba(47, 51, 51, .4)
}

.checkout__teaser-bottom {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(47, 51, 51, .4);
    text-align: center
}

.checkout__oauth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 24px;
    grid-gap: 16px;
    gap: 16px
}

.checkout__oauth>* {
    flex: 1 1 auto;
    max-width: 300px;
    overflow: hidden
}

.sign-up__check {
    display: flex;
    align-items: flex-start
}

.sign-up__check+.sign-up__check {
    margin-top: 16px
}

.sign-up__check .check-box__tick {
    width: 24px;
    height: 24px
}

.sign-up__check-text {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    margin-left: 8px
}

.sign-up__check-text>div:first-child {
    font-weight: 700;
    margin-bottom: 8px
}

.sign-up__check-text>div+div {
    opacity: .6
}

.checkout__form {
    display: block;
    margin-top: 16px
}

.checkout__error_message {
    color: #f66;
    line-height: 1.4
}

.checkout__section+.checkout__section {
    margin-top: 24px
}

.checkout__subtitle {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px
}

.checkout__offers {
    list-style: none;
    margin: 0;
    padding: 0
}

.checkout__offers>li {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.checkout__offers>li+li {
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.checkout__offers>li>div {
    color: #2f3333;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px
}

.checkout__offers>li>button {
    display: block;
    padding: 8px 16px;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer
}

.checkout__bottom {
    margin-top: 16px
}

.stripe__card_number {
    display: flex;
    align-items: center;
    margin-top: -8px
}

.stripe__card_number>div {
    flex: 1 1
}

.stripe__card_number>img {
    display: block;
    height: 48px;
    margin-left: 16px
}

.stripe__card {
    display: grid;
    grid-column-gap: 16px
}

.stripe__card>:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2
}

.stripe__card>:nth-child(2) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3
}

.stripe__card>:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3
}

.loading-text {
    display: flex;
    align-items: center
}

.loading-text .spinner {
    width: 20px;
    height: 20px;
    color: #335fff;
    margin-right: 4px
}

.checkout__debts {
    height: 100%
}

.checkout__debts,
.checkout__debts>div {
    display: flex;
    align-items: center;
    justify-content: center
}

.checkout__debts>div {
    text-align: center;
    flex-direction: column;
    padding: 86px 0 0;
    background: transparent url(https://res.cloudinary.com/playtomic/image/upload/v1566206229/playtomic/web/icons/debts.svg) no-repeat top;
    background-size: 64px auto
}

.checkout__debts__title {
    line-height: 1.4;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 16px
}

.checkout__debts__text {
    line-height: 1.5;
    opacity: .6;
    margin-bottom: 32px
}

.checkout__accept_commercial {
    display: flex;
    margin-top: 16px
}

.checkout__accept_commercial>div:first-child {
    flex-shrink: 0;
    padding-top: 2px
}

.checkout__accept_commercial>div+div {
    flex: 1 1;
    font-size: 14px;
    line-height: 1.5;
    opacity: .4
}

.checkout__success_title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    margin-bottom: .5em
}

.fake_chat {
    background: #eee url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1536584682/playtomic/web/chat-bg.webp) repeat;
    min-height: 100vh;
    padding: 16px
}

.fake_chat__button,
.fake_chat__messages {
    max-width: 900px;
    margin: 0 auto
}

.fake_chat__messages>li {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 3px 8px 0 rgba(70, 70, 70, .1);
    overflow: hidden;
    -webkit-animation-name: fake_chat-bubble;
    animation-name: fake_chat-bubble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    max-height: 0
}

.fake_chat__messages>li>div {
    -webkit-animation-name: fake_chat-content;
    animation-name: fake_chat-content;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0
}

.fake_chat__messages>li:nth-child(2) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.fake_chat__messages>li:nth-child(3) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.fake_chat__messages>li:nth-child(2)>div {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.fake_chat__messages>li:nth-child(3)>div {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.fake_chat__messages>li>div {
    padding: 24px;
    line-height: 1.5;
    box-sizing: border-box
}

.fake_chat__button,
.fake_chat__messages>li+li {
    margin-top: 16px
}

.fake_chat__title {
    text-transform: uppercase;
    color: rgb(1, 112, 105);
    font-weight: 500
}

.fake_chat__date {
    font-size: 18px;
    font-weight: 700;
    margin: .5em 0
}

.fake_chat__date:first-letter {
    text-transform: uppercase
}

.fake_chat__tiny {
    font-size: 14px;
    color: rgba(51, 48, 46, .4)
}

.fake_chat__tiny b {
    color: rgb(164, 217, 108)
}

.fake_chat__info {
    margin-top: 16px
}

.fake_chat__players {
    margin: 16px 0 8px
}

.fake_chat__players:after {
    content: "";
    display: block;
    clear: both
}

.fake_chat__players>li {
    float: left;
    margin: 0 0 8px
}

.fake_chat__avatar {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f4f4f4;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1654514049/playtomic/web/avatar-secondary.svg);
    background-size: cover;
    background-position: 50%
}

.fake_chat__name {
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 64px
}

.fake_chat__mobile-login {
    padding: 16px
}

@-webkit-keyframes fake_chat-bubble {
    0% {
        max-height: 0
    }

    to {
        max-height: 100vmax
    }
}

@keyframes fake_chat-bubble {
    0% {
        max-height: 0
    }

    to {
        max-height: 100vmax
    }
}

@-webkit-keyframes fake_chat-content {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fake_chat-content {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fake_chat .checkout-page-sign {
    width: 520px;
    margin: 0 auto
}

.checkout__not_in_match {
    height: 100%
}

.checkout__not_in_match,
.checkout__not_in_match>div {
    display: flex;
    align-items: center;
    justify-content: center
}

.checkout__not_in_match>div {
    text-align: center;
    flex-direction: column;
    padding: 86px 0 0;
    background: transparent url(https://res.cloudinary.com/playtomic/image/upload/v1569321719/playtomic/web/icons/ic-assets-error-large.svg) no-repeat top;
    background-size: 64px auto
}

.checkout__not_in_match__title {
    line-height: 1.4;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 16px
}

.checkout__not_in_match__text {
    line-height: 1.5;
    opacity: .6;
    margin-bottom: 32px
}

.checkout__players ul {
    display: flex
}

.checkout__players li {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.checkout__players li+li {
    margin-left: 8px
}

.checkout__player_avatar {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f4f4f4;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1654514049/playtomic/web/avatar-secondary.svg);
    background-size: cover;
    background-position: 50%;
    overflow: hidden
}

.checkout__player_avatar img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover
}

.checkout__player_name {
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 64px
}

.checkout__payment_methods {
    position: relative
}

.checkout__payment_methods--open {
    z-index: 2
}

.checkout__payment_methods__toggle {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1561542038/playtomic/web/icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 10px top 23px;
    background-size: 25px;
    position: relative;
    z-index: 1;
    padding: 1px
}

.checkout__payment_methods--open .checkout__payment_methods__toggle {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1561542038/playtomic/web/icons/chevron-up.svg)
}

.checkout__payment_methods__dropdown {
    box-sizing: border-box;
    padding-top: 64px;
    max-height: 64px;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 4px;
    display: flex;
    flex-direction: column
}

.checkout__payment_methods--selected .checkout__payment_methods__dropdown {
    border-color: rgba(1, 112, 105, .3)
}

.checkout__payment_methods--open .checkout__payment_methods__dropdown {
    border-color: rgba(1, 112, 105, .8);
    max-height: 228px
}

.checkout__payment_methods ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    overflow: auto;
    flex: 1 1;
    border-top: 1px solid rgba(47, 51, 51, .1)
}

.checkout__payment_methods li {
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: background-color .25s;
    transition: background-color .25s
}

.checkout__payment_methods li:hover {
    background-color: rgba(1, 112, 105, .15)
}

.checkout__payment_method {
    box-sizing: border-box;
    height: 64px;
    padding: 0 16px 0 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: 16px;
    background-size: 40px 40px;
    cursor: pointer
}

.checkout__payment_method--current {
    background-color: rgba(1, 112, 105, .1)
}

.checkout__payment_method div {
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.checkout__payment_method__name {
    font-weight: 500
}

.checkout__payment_method__description {
    color: rgba(47, 51, 51, .5);
    margin-top: 4px
}

.checkout__offer_tenant {
    font-weight: 700;
    line-height: 1.5;
    font-size: 20px;
    margin-bottom: 24px
}

.checkout__offer_name {
    font-weight: 700;
    line-height: 1.25;
    font-size: 16px;
    margin-bottom: 16px
}

.checkout__offer_description {
    opacity: .8;
    line-height: 1.4
}

.checkout__offer_expiry {
    opacity: .4;
    line-height: 1.4;
    margin-top: 16px
}

.checkout__offer_price {
    margin-top: 48px
}

.legal-document {
    display: flex;
    flex-direction: column;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text
}

.legal-document__language-selector {
    align-self: flex-end;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 40px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center
}

.legal-document__content .notion-block {
    margin-bottom: 16px
}

.legal-document__content .notion-h1 {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 36px
}

.legal-document__content .notion-h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 24px
}

.legal-document__content .notion-h3 {
    font-size: 1.15rem;
    font-weight: 600
}

.legal-document__content .notion-text {
    margin-bottom: 16px;
    line-height: 1.5
}

.legal-document__content .notion-hash-link {
    display: none
}

.legal-document__content ul {
    list-style: outside;
    padding-left: 24px
}

.legal-document__content ol {
    list-style: decimal;
    padding-left: 24px
}

.legal-document__content .notion-simple-table {
    width: 100%
}

.legal-document__content .notion-simple-table-row td {
    width: auto !important
}

@media (max-width:576px) {
    .legal-document__content .notion-simple-table {
        overflow-x: scroll;
        display: block
    }
}

.place-input {
    position: relative
}

.place-input__list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 0;
    overflow-y: auto;
    padding: 0 24px;
    border-radius: 0 0 4px 4px;
    background-color: #fdfdfd;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
    -webkit-transition: max-height .25s ease-out;
    transition: max-height .25s ease-out
}

.place-input__list>* {
    opacity: 0;
    -webkit-transition: opacity .15s ease-out;
    transition: opacity .15s ease-out
}

.place-input__list--open {
    visibility: visible;
    opacity: 1;
    max-height: 325px;
    will-change: max-height
}

.place-input__list--open>* {
    opacity: 1
}

.m-place-input {
    padding: 0 16px
}

.search {
    display: flex
}

.search__inputs {
    position: relative;
    display: flex;
    margin-right: 24px
}

.search__place {
    width: 240px
}

.search__place .place-input__list {
    left: -24px;
    right: -24px
}

.search__sport {
    position: relative;
    width: 120px;
    margin-left: 24px
}

.search__sport .drop-down {
    left: -24px;
    right: -24px
}

.search__date {
    width: 104px
}

.search__date,
.search__hour {
    position: relative;
    margin-left: 24px
}

.search__hour {
    width: 80px
}

.search__hour .drop-down {
    left: -24px;
    right: -24px
}

.search__button {
    width: 144px
}

.search .input {
    padding: 10px 0;
    height: 50px
}

.search .drop-down__container,
.search .place-input {
    position: static
}

.invitation-welcome {
    background: #eee url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1536584682/playtomic/web/chat-bg.webp) repeat;
    min-height: 100vh;
    padding: 16px
}

.invitation-welcome__button,
.invitation-welcome__messages {
    max-width: 900px;
    margin: 0 auto
}

.invitation-welcome__messages>li {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 3px 8px 0 rgba(70, 70, 70, .1);
    overflow: hidden;
    -webkit-animation-name: invitation-welcome-bubble;
    animation-name: invitation-welcome-bubble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    max-height: 0
}

.invitation-welcome__messages>li>div {
    -webkit-animation-name: invitation-welcome-content;
    animation-name: invitation-welcome-content;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    opacity: 0
}

.invitation-welcome__messages>li:nth-child(2) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.invitation-welcome__messages>li:nth-child(3) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.invitation-welcome__messages>li:nth-child(2)>div {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.invitation-welcome__messages>li:nth-child(3)>div {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.invitation-welcome__messages>li>div {
    padding: 24px;
    line-height: 1.5;
    box-sizing: border-box
}

.invitation-welcome__button,
.invitation-welcome__messages>li+li {
    margin-top: 16px
}

.invitation-welcome__title {
    text-transform: uppercase;
    color: rgb(1, 112, 105);
    font-weight: 500
}

.invitation-welcome__date {
    font-size: 18px;
    font-weight: 700;
    margin: .5em 0
}

.invitation-welcome__date:first-letter {
    text-transform: uppercase
}

.invitation-welcome__tiny {
    font-size: 14px;
    color: rgba(51, 48, 46, .4)
}

.invitation-welcome__tiny b {
    color: rgb(164, 217, 108)
}

.invitation-welcome__info {
    margin-top: 16px
}

.invitation-welcome__players {
    margin: 16px 0 8px
}

.invitation-welcome__players:after {
    content: "";
    display: block;
    clear: both
}

.invitation-welcome__players>li {
    float: left;
    margin: 0 0 8px
}

.invitation-welcome__avatar {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f4f4f4;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1654514049/playtomic/web/avatar-secondary.svg);
    background-size: cover;
    background-position: 50%
}

.invitation-welcome__name {
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 64px
}

.invitation-welcome__mobile-login {
    padding: 16px
}

@-webkit-keyframes invitation-welcome-bubble {
    0% {
        max-height: 0
    }

    to {
        max-height: 100vmax
    }
}

@keyframes invitation-welcome-bubble {
    0% {
        max-height: 0
    }

    to {
        max-height: 100vmax
    }
}

@-webkit-keyframes invitation-welcome-content {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes invitation-welcome-content {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.invitation-welcome .checkout-page-sign {
    width: 520px;
    margin: 0 auto
}

.invitation__loading {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1536584682/playtomic/web/chat-bg.webp);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh
}

.invitation__loading-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    width: 880px
}

.invitation__loading-icon {
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite
}

.invitation__loading-icon-ball {
    font-size: 64px
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.matches {
    display: flex;
    flex-direction: column
}

.matches__header {
    display: flex;
    justify-content: center;
    padding: 16px
}

.matches__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1536311509/playtomic/web/invitation-01.webp);
    height: 560px;
    background-size: cover;
    background-position: 50%
}

.matches__title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.13;
    margin-bottom: 16px
}

.matches__subtitle,
.matches__title {
    color: #fff;
    width: 880px;
    text-align: center
}

.matches__subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.33
}

.matches__content {
    position: relative;
    display: flex;
    justify-content: center
}

.matches__card {
    background-color: #fff;
    border-radius: 4px;
    width: 552px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 48px;
    position: absolute;
    top: -264px;
    box-shadow: 0 32px 32px 0 rgba(1, 1, 1, .05)
}

.matches__card-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.07;
    color: rgb(47, 51, 51);
    margin-bottom: 32px
}

.matches__card-subtitle {
    opacity: .4;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.17;
    text-align: center;
    margin-bottom: 32px
}

.matches__card-download-icons {
    margin-bottom: 40px
}

.matches__card-download-android {
    margin-left: 24px
}

.matches__card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.matches__card-info-data {
    width: 50%;
    flex-shrink: 0
}

.matches__card-info-data-game {
    font-size: 12px;
    font-weight: 400;
    color: #335fff;
    text-transform: uppercase;
    margin-bottom: 8px
}

.matches__card-info-data-title {
    color: rgb(47, 51, 51);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.11;
    margin-bottom: 8px;
    text-transform: capitalize
}

.matches__card-info-data-subtitle {
    color: rgba(47, 51, 51, .4);
    font-size: 14px;
    margin-bottom: 4px
}

.matches__card-info-players {
    display: flex;
    width: 100%;
    justify-content: center
}

.matches__card-info-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 62px
}

.matches__card-info-player-picture {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1654514049/playtomic/web/avatar-secondary.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-bottom: 8px;
    width: 40px;
    height: 40px
}

.matches__card-info-player-name {
    opacity: .8;
    font-size: 12px;
    text-align: center;
    width: 62px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.matches .footer {
    margin-top: 280px
}

@media (max-width:650px) {
    .matches__banner {
        height: 200px;
        background-repeat: no-repeat;
        padding: 32px 16px
    }

    .matches__title {
        font-size: 24px;
        width: auto
    }

    .matches__subtitle {
        font-size: 16px;
        width: auto
    }

    .matches__card {
        width: calc(100vw - 32px);
        padding: 24px 16px;
        top: -80px
    }

    .matches__card-title {
        font-size: 24px;
        margin-bottom: 16px
    }

    .matches__card-subtitle {
        font-size: 14px;
        text-align: left;
        margin-bottom: 16px
    }

    .matches__card-download-icons {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 8px
    }

    .matches__card-download-icons>a>svg {
        width: 100%
    }

    .matches__card-info-data-game {
        font-size: 14px;
        font-weight: 700
    }

    .matches__card-info {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch
    }

    .matches__card-info-data {
        width: 100%;
        margin-bottom: 24px
    }

    .matches__card-info-data-game {
        margin-bottom: 16px
    }

    .matches__card-info-data-title {
        font-size: 18px
    }

    .matches__card-info-players {
        justify-content: center
    }

    .matches .footer {
        margin-top: 420px
    }
}

.msie {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1536584682/playtomic/web/chat-bg.webp);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    width: 100%;
    height: 100vh
}

.msie__img {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1540810152/playtomic/web/oops.png);
    background-position: 50%;
    background-size: cover;
    width: 450px;
    height: 397px
}

.msie__text,
.msie__title {
    margin-top: 16px
}

.msie__text {
    width: 738px
}

.legal-page {
    display: flex;
    justify-content: center;
    background-color: rgb(250, 250, 250);
    text-align: left;
    padding: 80px 0
}

.legal-page__content {
    width: 800px
}

.legal-page__content .language-selector__container {
    display: flex;
    justify-content: flex-end;
    margin-left: -8px
}

.legal-page__content table {
    font-size: 12px
}

.legal-page__content th {
    font-weight: 700
}

.legal-page__content td,
.legal-page__content th {
    padding: 20px 10px;
    border: 1px solid #dedede;
    text-align: left;
    vertical-align: middle
}

.legal-page__content em {
    font-style: italic
}

@media screen and (max-width:576px) {
    .legal-page {
        padding: 16px
    }

    .legal-page__content {
        width: 100%
    }

    .legal-page__content .language-selector__container {
        justify-content: flex-start;
        margin-bottom: 16px
    }

    .legal-page__content h2 {
        font-size: 20px
    }

    .legal-page__content .markdown {
        word-wrap: break-word
    }
}

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center
}

.no-results__icon {
    color: rgba(47, 51, 51, .4)
}

.no-results__icon svg {
    width: 64px;
    height: 64px;
    color: currentColor
}

.no-results__title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 48px
}

.no-results__body {
    color: rgba(47, 51, 51, .6);
    margin-top: 32px
}

.no-results__body p {
    margin-bottom: 24px
}

.no-results__list {
    margin-left: 24px
}

.no-results__list li {
    line-height: 1.5;
    list-style: disc
}

.no-results__actions {
    margin-top: 56px;
    text-align: center
}

.no-results__actions .button {
    display: inline-block;
    width: auto
}

.no-results__actions.mobile .button {
    display: block
}

@media (max-width:576px) {
    .no-results__title {
        font-size: 18px;
        font-weight: 700;
        margin-top: 8px
    }

    .no-results__body {
        font-size: 14px;
        margin-top: 16px
    }

    .no-results__body p {
        margin-bottom: 16px
    }

    .no-results__actions {
        margin-top: 16px
    }
}

.slots {
    display: grid;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: 54px;
    padding: 2px 0
}

.slots>* {
    opacity: 0;
    -webkit-animation: slot .15s ease-out;
    animation: slot .15s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.slots>:nth-child(2) {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms
}

.slots>:nth-child(3) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.slots>:nth-child(4) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s
}

.slots__noAvailability {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(47, 51, 51, .03);
    border-radius: 4px;
    color: rgb(47, 51, 51, .4);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px
}

.slots__noAvailability svg {
    flex-shrink: 0;
    margin-right: 8px
}

@-webkit-keyframes slot {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slot {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.card__header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    height: 144px;
    padding: 24px;
    border-radius: 4px 4px 0 0;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    letter-spacing: -.5px;
    color: #fff;
    font-size: 16px
}

.card--map .card__header {
    height: 140px;
    font-size: 14px
}

.card__header * {
    position: relative
}

.card__header:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .5)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .5));
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5))
}

.card__header h1 {
    font-size: 1.5em;
    font-weight: 700;
    text-shadow: 0 0 16px rgba(0, 0, 0, .5)
}

.card__header-default-image {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVcAAADkCAYAAAAsGGd3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAz7SURBVHgB7d1JchvZtQbgS4oUCZBUU7YGfpPnJTwv7e3EO/AW7B14B+UIR3jgcDuw5bKqxJ6gxM55wEoZrCJBNJnAvZnfF6FgNRpJ5I97Mv88uZEq7w/vfr6V0q82Uvq/u5TeJAAW8evrlP7/Z283/rYRwbqd0tdCFaARR1XA/mLzu/d//uXHw3++ub6+SgAs7c34SsDXv//DXf1f9vZep4ODd2lrazsBsLCjrcl/Oz8/Hv+KkN3f/0na3t5JAMztzdZj/7UO2Z2dYXr16t34KwCz25r2Pz99ukgfPvw9vaguE7w6+Gl1onXPC2AWm7P8ppvqZtfh4fv0/l9/qk60RwmA6bbm+c11yJ6cfpsO9r9Ku7sHbn4BPGKucK1FyB4dfVNdLviYdqvrsRoGAA8tFK61CNnz6/82DIQswL2lwnXSZI1rOHyjYQD0WmPhWpuscUVXdjDYTwB903i41qLGFb/UuIA+mqmKtQw1LqCPWju5/tBkjWtveH9d1s0voKtWFq61CNmTk2/T2dnH6nrsgYYB0EkrD9fa7e3tg4aBkAW6ZG3hOkmNC+iajT/+5R93EWw5UeMCSrfx4fDuLt5CcHr6IeUWsmpcQKnG4Vr/S4TsxUU1ol8cjW885ULIAqV5EK6T4hR7Up1mcwtZNS6gBE+Gay3HkA0aBkDOng3XWoTsRXW5IB5pzYmQBXI0c7jWIlwjZHO7+aXGBeRk7nCt5dowiHAdVtdl3fwC1mnhcK2pcQH82NLhWlPjAvivxsJ1khoX0HethGtNjQvoq1bDtabGBfTNSsK1psYF9MVKw7WmxgV03VrCtabGBXTVWsO1psYFdE0W4TpJjQvoguzCtabGBZQs23CtqXEBJco+XGtqXEBJignXmhoXUILiwrWmxgXkrNhwreVe4xoMXqXNzc0E9Evx4TpJjQvIRafCtabGBaxbJ8O1NhqdprOzj2pcwMp1Olxruda4BoODtL//lRoXdFAvwrWmxgWsSq/CtVaHbFw2uL29TblQ44Lu6GW41tS4gLb0OlwnqXEBTRKuP6DGBSwjLjWenX0nXJ+ixgXMI7Li5OTDl8wQrs/4/PmyOs1+zLJh8OrVOzUuWKM4pV6cH1b3bU7S1dXlg/8nXGeUa43r5cvd6jT7VsMAVigOXZeX99PtU40j4TqnOmQvq6O/931Bv/xw9J9GuC4oQvayui57Wl0yyDFkd3b2XJeFBtQ3qM4vjuf6WReuDci1xjXcPUh7+18JWVhAnE7jABU9+EUeNhKuDVLjgvLNM/pPI1xb0NRfTtOELDyuHv2n3aCal3BtkRoX5G3Z0X8a4boCalyQl1U8JCRcV0iNC9anjdF/GuG6BmpcsDpxOo1QHY3O0ioJ1zXLtca1W12PdfOLUtWPpY4uz9Z2Y1m4ZkKNC5a36tF/GuGaGTUumF+OPzfCNVM5v+9LjYsc5DD6TyNcM5dryGoYsC73r2c6ymL0f0rUHIVrIdS46LtcL5lNmpzshGthImTH32QZNgzUuGjaohupVileIrq//5Pq11cPXigqXAumxkVXtflYalPidDrYPUjDamp77C3NwrUD1LjoitJG/2mEa4eocVGinLqpT3lq9J9GuHaQGhclKGX0Hw7fpMHgYOZQrQnXDlPjIke5vra+FiEaYRqhusxBQLj2gBoX69bV0X8a4dojalysWr2RKr7mPPq3cblKuPaUGhdtiRAdjU7SxcVx1qP/XjX271bjf1v3AIRrz6lx0ZQ+jv7TCFfG1LhYVJe6qU0SrjygxsUsct9IFerRP56g2t7eSasmXHmUGhePKWUj1XDw+snHUldFuDKVGhfB6D8/4cpM1Lj6px79zy9O0tXVZcrRKm9QzUu4Mjc1rm77/PkyjS6Oi95IlQPhysIiZOPaW26nGg2DxRj9myVcWVrONa4YGddxp7gUuqntEa40Ro2rHF3fSJUD4Urj1LjylfvoHyEaNyfjlFr6h6FwpTURsjFuji5P1bjWyOi/HsKV1uVc4zqofph3q7vOXbz5FX/mUfiP/ak5j/4RqoPBfuoa4cpKqXG1y0aqfAhX1kKNq1lG//wIV9ZKjWs5uqn5Eq5kQY1rdjZSlUG4khU1rqeVMPrHn1OEal9G/2mEK1m6X213/3x732tcRv8yCVeydn/3+zTLhsHe8PX4CaI2bn6VtJFqWP052OPwY8KVYuRY46rfcd9Uw8BGqu4QrhQnQjbK8V1635fRv3uEK8WKIIobPKPRWcpJhGxcLnguhHRTu024Uryca1yPPdpZykYqo/9yhCudkXuNa2vrZfajf1w/7sJGqhwIVzon1xpXroz+7RCudFauNa5cdHkjVQ6EK72QY41rHfqykSoHwpVeybXG1Taj/+oJV3qpXiSd282vpummro9wpddybRgsw+ifB+EKqRshayNVXoQrTCixxmX0z9NWAr6IvQDjk9/GRjo5/S7d3t6kHNlIlT/hCt+7P7UeZf2sv8dSyyFc6T0bqWiDcKWX6o1U59X11Vyvreqmlk240is2UrEqwpVeKGH0t5GqW4QrnWUZNeskXOmcUkb/CNX4KlS7SbjSGbFeME6puY7+9csMZ3kFDOUTrhTN6E+uhCtFyvXlhJN0U/tNuFKMOJlenB+m0eVZ1qO/jVQE4Ur2jP6USLiSLY+lUjLhSlZKGv3jCart7Z0EjxGuZKGEjVQvX+6m4eC1x1KZiXBlrYz+dJVwZeVspKIPhCsrYyMVfSJcaZ3Rnz4SrrRCN5W+E640qpTRP5anxBIVoUpbhCuNsJEKHhKuLMzoD08Trsyt3kgVX3Me/d2gYp2EKzOJEB2NTtLFxbGNVDAD4cpURn9YjHDlUbqpsBzhyhc2UkFzhCtFjP42UlEa4dpjRn9oj3DtmXr0P784SVdXlylHblDRBcK1Jz5/vkyji2MbqWBFhGvHGf1hPYRrB+mmwvoJ1w6xkQryIVw7IPfRP0J0Z2dvfEo1+tMXwrVQRn/Im3AtTJxO4xXUsT8159E/QnUw2E/QV8K1ADZSQXmEa8aM/lAu4Zoh3VQon3DNREkbqYz+8DzhumYljP4vtrbHoWr0h9kJ1zUx+kO3CdcVKmkj1XD4Om1VJ1ZgMcJ1BWykgv4Rri0y+kN/CdeG1TeozquT6s31VcqRbiq0T7g2pJSNVEZ/WA3huqQSRv9Y72cj1XrUk0x8f9zcXKXr76eZ+HDb3t6tPuz20+7glZuHHbTx4fDuLjEXj6XynAjRw8N/zvyhu7f3Oh0cvBOyHSJc52AjFbM4O/2YTk4/zP09srn5orq5+NPxByLlc1ngGfED8unT+fiU6rFUnnNy8u34MtEibm9v0tHRN+Ov0eCgbML1CUZ/5jU+sS4YrJMioOMU6wRbNuH6A3E6jVAdjc5SrnRT8xPXWONSQFMiYHd3D1yDLZhwTTZSsbzTBa6xThOXBuKG2Lt3/5soU6/D1UYqmhCn1vPz49S0+KCP70t/72XqZbh6LJUmxcMjbYkPfze3ytSbcC1l9LeRqjyjy/bCNecDANN1PlxjZItuas6j/8uXu2k4eO2x1EJdXX1Kbbm+yXM/Bc/rbLga/VmVuPnUllyX//C8ToWrjVRALjoRrjZSsU5xffy6pQ/zeJiAMhUdrjZSkYMXL9oL1+3tnUSZigtXj6WSm52dvdY+4OPDmTIVE66ljP7D4ZvxD4RQ7Y/4EG1ip8Bj4hFYypR9uMZ6v9w3UkWYRqga/fspvgfi777p79HY8arvXK4sw9XoT2nevv2f9O9//7WxWlZ8T8XybMqVVbjaSEWp4oQZYXh8/K/UhPgec2ot29rD1UYquuLg4G26u7tZ+vqrtxF0w9rC1ehPF0Uwbmy8+H4F4XyXCOJ7LE6sgrUbVv4OLY+l0gfRe42AnXUVYXyvxXVblwK6YyXhWtLoH09QKW7TlAjZqBDG5qyrq8svU1qEaDx8EB1Zk1E3tRquNlIBfdXKNVejP9B3jYVrfYMqalQx/uTIDSpgVZYO18+fL9Po4thGKoAJC4er0R/gaXOFq24qwGxmClcbqQDmMzVcbaQCWMyPwtXoD7C8L+Eap9Mo/MdpNefR3w0qoARb5+dHVage20gF0KCtw8P3KUdGf6Bk2b2JwOgPdEEW4WojFdA1aw3X2EgVb7c0+gNds5ZwNfoDXbeycK1vUA2HXhcMdF/r4WojFdBHrYWr0R/os0bDVTcV4F4j4Wr0B3hoqXCNjVRxSjX6Azw0d7ga/QGeN3O4xuk0QnUw2E8ATDc1XG2kAljMo+Fq9AdYzoNw1U0FaMaW0R+geRvffHdzZ/QHaNamYAVonmQFaIFwBWiBcAVogXAFaIFwBWiBcAVogXAFaIFwBWjB5kZKRwmARsXJ9XcJgMbc3qXfbLw/vPv5dkpf36X0JgGwrKPrlH6x+bO3G3+7qv6hujzw6wTAouIS628jWCNX/wM7Qj3RVCCfdAAAAABJRU5ErkJggg==)
}

.card__header .cash-payments {
    align-items: center;
    border: 1px solid #fff;
    border-radius: 24px;
    display: flex;
    font-size: 14px;
    padding: 0 8px 0 4px;
    position: absolute;
    top: 16px
}

.card__address {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 16px
}

.card__address__street {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 8px
}

.card__address__postal_code {
    flex-shrink: 0
}

.card__address__postal_code:before {
    content: "\00a0"
}

.card {
    position: relative;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .15);
    border-radius: 4px;
    background-color: #fff;
    -webkit-transition: box-shadow .25s;
    transition: box-shadow .25s;
    /* height: 100% */
}

.card--map {
    position: absolute;
    width: 340px;
    left: -170px;
    top: -325px;
    -webkit-animation: card--map-open .15s ease-out;
    animation: card--map-open .15s ease-out;
    z-index: 2
}

.card--map:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border: 12px solid transparent;
    border-top-color: #fff
}

.card--map .card__slots .button {
    padding: 0 8px
}

.card__body {
    padding: 24px;
    border-radius: 0 0 4px 4px;
    font-size: 16px;
    letter-spacing: -.5px;
    color: #566670;
    background-color: #fff
}

.card__body nav {
    opacity: 0
}

.card__body nav.loaded {
    -webkit-transition: opacity .75s ease-in;
    transition: opacity .75s ease-in;
    opacity: 1
}

.card__more {
    display: inline-block;
    opacity: .54;
    padding-bottom: 8px;
    margin-top: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    -webkit-transition: border-color .25s;
    transition: border-color .25s
}

.card__more:hover {
    border-color: rgba(0, 0, 0, .3)
}

.card__header-link {
    text-decoration: none;
    display: block
}

.card--highlighted,
.card:hover {
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .02), 0 8px 32px 0 rgba(47, 51, 51, .1)
}

.card--greyed:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background-color: hsla(0, 0%, 100%, .6);
    pointer-events: none
}

@-webkit-keyframes card--map-open {
    0% {
        opacity: 0;
        top: -300px
    }

    to {
        opacity: 1;
        top: -325px
    }
}

@keyframes card--map-open {
    0% {
        opacity: 0;
        top: -300px
    }

    to {
        opacity: 1;
        top: -325px
    }
}

.toggle {
    width: 52px;
    height: 30px;
    padding: 2px;
    cursor: pointer;
    border-radius: 15px;
    background-color: rgba(47, 51, 51, .2);
    box-sizing: border-box;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    outline: none;
    opacity: .8
}

.toggle:focus {
    opacity: 1
}

.toggle:before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #fff;
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out
}

.toggled {
    /* background-color: #335fff */
}

.toggled:before {
    -webkit-transform: translate(22px);
    transform: translate(22px)
}

.disabled {
    opacity: .4;
    pointer-events: none
}

.invalid {
    color: #f66
}

.invalid,
.invalid:focus {
    border-color: #f66
}

.total-results {
    display: flex;
    align-items: center;
    color: rgba(47, 51, 51, .6);
    letter-spacing: -.5px
}

.total-results .spinner {
    color: #335fff;
    width: 1.2em;
    margin-left: 8px
}

.map {
    height: 100%
}

.map-marker {
    position: relative;
    width: 38px;
    height: 52px;
    font-size: 1px;
    background-image: url(/static/media/pin.2804910e.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    margin-top: -26px;
    margin-left: -19px;
    z-index: 1;
    -webkit-transition: -webkit-filter .25s;
    transition: -webkit-filter .25s;
    transition: filter .25s;
    transition: filter .25s, -webkit-filter .25s;
    -webkit-animation: none;
    animation: none
}

.map-marker--highlighted {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: map-marker-jump .65s infinite;
    animation: map-marker-jump .65s infinite;
    z-index: 5;
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2)
}

.map-marker--selected {
    background-image: url(/static/media/pin-selected.3f889505.svg)
}

.map-marker__no-availability {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    z-index: 0
}

.map-marker__no-availability.map-marker--highlighted {
    -webkit-filter: grayscale(1) brightness(1.2);
    filter: grayscale(1) brightness(1.2);
    z-index: 5
}

.map-marker__no-availability--selected {
    background-image: url(/static/media/no-availability-selected.55568e44.svg)
}

@-webkit-keyframes map-marker-bounce {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    5% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    15% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4)
    }

    30% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes map-marker-bounce {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    5% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    15% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4)
    }

    30% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes map-marker-jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    65% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    80% {
        -webkit-transform: scaleY(.8);
        transform: scaleY(.8)
    }

    to {
        -webkit-transform: scaleY(1) translateY(0);
        transform: scaleY(1) translateY(0)
    }
}

@keyframes map-marker-jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    65% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    80% {
        -webkit-transform: scaleY(.8);
        transform: scaleY(.8)
    }

    to {
        -webkit-transform: scaleY(1) translateY(0);
        transform: scaleY(1) translateY(0)
    }
}

.search2-page__header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .1), inset 0 -1px 0 0 rgba(47, 51, 51, .15);
    z-index: 10
}

.search2-page__header .search2-page__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 16px;
    box-sizing: border-box
}

.search2-page__header .search2-page__searcher {
    display: flex;
    align-items: center
}

.search2-page__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: -webkit-max-content;
    grid-auto-rows: max-content;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex: 1 1;
    margin-top: 16px
}

.search2-page__cards>* {
    min-height: 0
}

.search2-page__content {
    padding-top: 129px
}

.search2-page__content--with-map {
    padding-right: 30vw
}

.search2-page__results {
    padding: 16px
}

.search2-page__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
    border-top: 1px solid rgba(1, 1, 1, .05)
}

.search2-page__filters .filter {
    border: none
}

.search2-page__availabilityToggle {
    display: flex;
    align-items: center
}

.search2-page__availabilityToggle .toggle {
    margin: 0 16px
}

.search2-page__map {
    position: fixed;
    top: 129px;
    right: 0;
    bottom: 0;
    width: 30vw;
    background-color: #e5e3df
}

.search2-page__map-button {
    position: absolute;
    top: 16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
    margin: 0;
    padding: 0 16px;
    line-height: 2em;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
    background-color: #335fff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: border-color .25s;
    transition: border-color .25s;
    white-space: nowrap
}

.search2-page__map:hover .search2-page__map-button {
    display: block
}

@media (max-width:900px) {
    .search2-page__content {
        padding-right: 16px
    }

    .search2-page__map {
        display: none
    }
}

.bbq2__drop {
    position: relative
}

.bbq2__drop__toggle {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 16px;
    border: none;
    background-color: transparent;
    height: 40px;
    width: 100%;
    cursor: pointer
}

.bbq2__drop__toggle__label {
    display: block;
    line-height: 1.2;
    font-size: 1rem;
    font-weight: 400
}

.bbq2__drop__toggle__icon {
    color: #335fff;
    margin-left: 24px
}

.bbq2__drop__drop {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 120%;
    background-color: #fff;
    display: none;
    z-index: 10000;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    border: 1px solid #f2f2f2
}

.bbq2__drop__drop--open {
    display: block
}

.bbq2__sport_input {
    padding: 0 16px
}

.bbq2__sport_input>button {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    height: 48px;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    text-align: left
}

.bbq2__sport_input>button+button {
    border-top: 1px solid #f2f2f2
}

.bbq2__date_input {
    padding: 16px 16px 4px
}

.bbq2__filters_input {
    padding: 16px
}

.bbq2__filters_input>*+* {
    margin-top: 16px
}

.bbq2__filters_input__title {
    text-transform: uppercase;
    opacity: .4
}

.bbq2__filters_input__options,
.bbq2__filters_input__options>*+* {
    margin-top: 8px
}

.bbq2__filters_input__reset {
    display: block;
    width: 100%;
    padding: 0 32px;
    white-space: nowrap;
    margin: 0;
    border: 1px solid #335fff;
    border-radius: 32px;
    background-color: transparent;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    color: #335fff;
    cursor: pointer
}

.bbq2__search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #f2f2f2
}

.bbq2__search>div {
    border-right: 1px solid #f2f2f2
}

.bbq2__tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 10px;
    border-radius: 4px;
    background-color: #0e2433;
    pointer-events: none;
    z-index: 99999;
    -webkit-transform: translate(-50%, -7px);
    transform: translate(-50%, -7px)
}

.bbq2__tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border: 5px solid transparent;
    border-top: 5px solid #0e2433
}

.bbq2__tooltip p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap
}

.bbq2__tooltip p+p {
    text-transform: lowercase
}

.bbq2__resource {
    position: relative
}

.bbq2__resource__label {
    font-size: 14px;
    padding: 0 0 0 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.bbq2__resources {
    width: 160px;
    border-color: #f2f2f2;
    border-style: solid;
    border-width: 0 1px
}

.bbq2__resources>div {
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2
}

.bbq2__hours {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    pointer-events: none;
    z-index: 100;
    background-color: hsla(0, 0%, 100%, .5)
}

.bbq2__hour {
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: rgba(1, 1, 1, .4);
    border-bottom: 1px solid #f2f2f2
}

.bbq2__slot {
    position: absolute;
    top: 0;
    bottom: 0
}

.bbq2-open {
    cursor: pointer;
    background-color: transparent
}

.bbq2-open,
.bbq2-open__fill {
    height: 100%;
    box-sizing: border-box;
    position: relative
}

.bbq2-open__fill {
    display: block;
    margin: 0;
    padding: 1px 2px 1px 1px;
    border: 0;
    pointer-events: none;
    visibility: hidden
}

.bbq2-open__fill div {
    height: 100%;
    background-color: #335fff;
    border-radius: 5px
}

.bbq2-open:hover .bbq2-open__fill {
    visibility: visible
}

.bbq2-open__tooltip {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 10px;
    border-radius: 4px;
    background-color: #2f3333;
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    pointer-events: none;
    visibility: hidden;
    z-index: 99999;
    -webkit-transform: translate(-50%, -7px);
    transform: translate(-50%, -7px)
}

.bbq2-open__tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border: 5px solid transparent;
    border-top-color: #2f3333
}

.bbq2-open:hover .bbq2-open__tooltip {
    opacity: 1;
    visibility: visible
}

.bbq2-open__tooltip p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap
}

.bbq2-open__tooltip p+p {
    text-transform: lowercase
}

.bbq2__hole {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 1px 2px 1px 1px
}

.bbq2__hole div {
    height: 100%;
    border-radius: 5px;
    background-color: #879199
}

.bbq2__slots {
    position: relative
}

.bbq2__slots-resource {
    position: relative;
    border-bottom: 1px solid #f2f2f2
}

.bbq2__duration-picker {
    position: absolute;
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
    z-index: 100
}

.bbq2__duration-picker__bar {
    box-sizing: border-box;
    -webkit-transition: width .25s ease-out;
    transition: width .25s ease-out;
    padding: 1px 2px 2px;
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}

.bbq2__duration-picker__bar div {
    height: 100%;
    border-radius: 5px;
    background-color: #335fff
}

.bbq2__duration-picker__tooltip {
    font-size: 14px;
    position: absolute;
    left: 0;
    bottom: 100%;
    -webkit-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px);
    min-width: 200px;
    padding: 8px;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: 0 24px 32px 0 rgba(1, 1, 1, .05);
    z-index: 1000
}

.bbq2__duration-picker__tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    border: 8px solid transparent;
    border-top: 8px solid rgb(255, 255, 255)
}

.bbq2__duration-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.bbq2__duration-picker__resource {
    font-weight: 600;
    margin-right: 8px
}

.bbq2__duration-picker__time {
    padding-left: 16px;
    background: transparent url(/static/media/clock.c270b6a5.svg) no-repeat 0;
    background-size: auto 12px
}

.bbq2__duration-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 8px;
    background-color: rgba(51, 95, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    margin-top: 8px
}

.bbq2__duration-picker__option--picked {
    background-color: rgba(51, 95, 255, 0.3)
}

.bbq2__duration-picker__button {
    display: block;
    margin-top: 8px;
    padding: 12px 0;
    width: 100%;
    background-color: #335fff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    text-align: center;
    text-decoration: none
}

.bbq2__duration-picker__close {
    margin: 0;
    padding: 0;
    border: none;
    width: 24px;
    height: 24px;
    background-color: #fff;
    outline: none;
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 12px;
    -webkit-transform: translate(25%, -25%);
    transform: translate(25%, -25%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(50, 50, 50, .08), 0 1px 3px 0 rgba(50, 50, 50, .08), 0 0 0 1px rgba(50, 50, 50, .04)
}

.bbq2-no_resources {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px
}

.bbq2-no_resources__text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2
}

.bbq2-no_resources__button {
    margin-top: 32px
}

.bbq2-no_availability {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px
}

.bbq2-no_availability__text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2
}

.bbq2-no_availability__button {
    margin-top: 32px
}

.bbq2-searching {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px
}

.bbq2-searching__spinner {
    font-size: 10px;
    color: #335fff
}

.bbq2-searching__text {
    font-size: 18px;
    font-weight: 500;
    margin-top: 32px;
    line-height: 1.2
}

.bbq2__grid {
    display: flex
}

.bbq2__availability {
    position: relative
}

.bbq2__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    pointer-events: none;
    border-color: #f2f2f2;
    border-style: solid;
    border-width: 0 0 1px 1px;
    z-index: 100
}

.bbq2__grid-lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.bbq2__past {
    position: absolute;
    bottom: 0;
    border-right: 2px solid #335fff;
    background-color: #f9f9f9;
    background-image: -webkit-linear-gradient(45deg, transparent 25%, #fff 0, #fff 50%, transparent 0, transparent 75%, #fff 0, #fff);
    background-image: linear-gradient(45deg, transparent 25%, #fff 0, #fff 50%, transparent 0, transparent 75%, #fff 0, #fff);
    background-size: 84.85px 84.85px
}

.bbq2__legend {
    padding: 8px;
    background-color: hsla(0, 0%, 100%, .75);
    font-size: 12px;
    font-weight: 500;
    color: rgba(1, 1, 1, .4);
    border-radius: 3px 0 3px 0
}

.bbq2__legend,
.bbq2__legend>div {
    display: flex;
    align-items: center
}

.bbq2__legend>div:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #f2f2f2;
    margin-right: 8px
}

.bbq2__legend>div+div {
    margin-left: 16px
}

.bbq2__legend-available:before {
    background-color: #fff
}

.bbq2__legend-no_available:before {
    background-color: #879199
}

.bbq2__legend-your_booking:before {
    background-color: #335fff
}

.new-carousel {
    height: 375px;
    display: flex;
    align-items: center
}

.new-carousel-img {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.new-carousel-img__left {
    width: 5%;
    background-position: 100%;
    height: 80%;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.new-carousel-img__right {
    width: 5%;
    background-position: 0;
    height: 80%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.new-carousel-img__center {
    flex-grow: 1;
    margin: 0 24px;
    height: 100%;
    border-radius: 4px
}

.new_tenant_offers__content {
    padding: 32px 16px 16px
}

.new_tenant__side .new_tenant_offers .new_tenant__card {
    background-color: #0e2433;
    color: #fff
}

.new_tenant_offer__price {
    font-size: 18px;
    font-weight: 300;
    color: #ecff00
}

.new_tenant_offer__price>div {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #ecff00;
    margin: 0 auto
}

.new_tenant_offer__title {
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    padding-bottom: 8px;
    margin-bottom: 16px;
    margin-top: 16px;
    border-bottom: 1px solid #f0f0f0
}

.new_tenant_offer__description {
    text-align: center;
    line-height: 1.4;
    font-size: 14px
}

.new_tenant_offer__buy {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    border: 1px solid #335fff;
    border-radius: 32px;
    background-color: #335fff;
    margin: 16px auto 0;
    cursor: pointer
}

.new_tenant_offers__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}

.new_tenant_offers__dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    opacity: .5
}

.new_tenant_offers__dot--current {
    opacity: 1
}

.new_tenant_offers__dot+.new_tenant_offers__dot {
    margin-left: 6px
}

.new_tenant_offers__arrow {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 40px;
    height: 20px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 28px;
    cursor: pointer;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1)
}

.new_tenant_offers__arrow--prev {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1559745441/playtomic/web/icons/chevron-left.svg)
}

.new_tenant_offers__arrow--next {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1559745441/playtomic/web/icons/chevron-right.svg)
}

.new_tenant__banner {
    position: relative;
    background-color: #0e2433;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% auto
}

.new_tenant__banner:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(16%, rgba(0, 0, 0, .16)), to(rgba(0, 0, 0, .5)));
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .16) 16%, rgba(0, 0, 0, .5));
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .16) 16%, rgba(0, 0, 0, .5))
}

.new_tenant__header {
    position: relative;
    width: 1140px;
    margin: 0 auto;
    padding: 32px 0 40px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}

.new_tenant__header__name {
    font-size: 64px;
    font-weight: 600;
    line-height: 1.4
}

.new_tenant__header__address {
    font-size: 16px;
    line-height: 1.4;
    text-indent: 4px
}

.new_tenant__breadcrumbs {
    width: 1140px;
    margin: 0 auto;
    padding: 32px 0
}

.new_tenant__body {
    display: flex;
    width: 1140px;
    margin: 0 auto;
    padding-bottom: 16px
}

.new_tenant__main {
    flex-grow: 1;
    flex-shrink: 1
}

.new_tenant__main>*+* {
    margin-top: 24px
}

.new_tenant__side {
    margin-left: 24px;
    width: 250px;
    flex-shrink: 0
}

.new_tenant__side>*+* {
    margin-top: 24px
}

.new_tenant__card {
    border-radius: 8px;
    box-shadow: -1px 5px 17px 0 rgba(0, 0, 0, .1);
    background-color: #fff
}

.new_tenant__map {
    height: 220px;
    border-radius: 8px 8px 0 0;
    overflow: hidden
}

.new_tenant__card-content {
    padding: 12px;
    font-size: 14px;
    line-height: 1.2;
    color: #000;
    position: relative
}

.new_tenant__card-title {
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #e7e9eb
}

.new_tenant__card-tags {
    list-style: none;
    margin: -4px;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.new_tenant__card-tags li {
    display: flex;
    align-items: center;
    margin: 4px;
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    font-weight: 500;
    background-color: #e7e9eb;
    border-radius: 14px;
    white-space: nowrap;
    color: #000
}

.new_tenant__card-tag--icon {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 4px
}

.new_tenant__opening_hours {
    list-style: none;
    margin: -8px 0;
    padding: 0
}

.new_tenant__opening_hours li {
    margin: 0;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.new_tenant__opening_hours li+li {
    border-top: 1px solid #f0f0f0
}

.new_tenant__description {
    max-height: 140px;
    overflow: hidden;
    -webkit-transition: max-height .25s;
    transition: max-height .25s
}

.new_tenant__description:after {
    content: "";
    display: block;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    height: 40px;
    background: -webkit-gradient(linear, left bottom, left top, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, 0)));
    background: -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, 0));
    background: linear-gradient(0deg, hsla(0, 0%, 100%, .8) 0, hsla(0, 0%, 100%, 0))
}

.new_tenant__description-divider {
    height: 1px;
    width: 100%;
    background-color: #cfd3d6;
    position: absolute;
    left: 0
}

.new_tenant__description-toggle {
    display: block;
    padding: 5px 16px;
    font-size: 16px;
    color: #335fff;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
    background-color: #fff;
    border: 0;
    border-radius: 32px;
    border: 1px solid #335fff
}

.new_tenant__card-carousel {
    padding: 24px 0
}

.new_tenant__side .new_tenant__card {
    color: #000
}

.activity-detail-card {
    background-color: #fff;
    border-radius: 4px;
    padding: 40px 24px;
    width: 544px
}

.activity-detail-card__header {
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700
}

.activity-detail-card__price {
    color: #335fff
}

.activity-detail-card__list {
    background-color: #f3f4f5;
    border-radius: 4px;
    margin-top: 40px;
    padding: 0 8px
}

.activity-detail-card__list>li {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    padding: 12px 0
}

.activity-detail-card__list>li>span:last-child {
    opacity: .6
}

.activity-detail-card__list>li+li {
    border-top: 1px solid #566670
}

.activity-detail-card__app {
    margin-top: 40px;
    text-align: center
}

.activity-detail-card__app-title {
    font-size: 24px;
    font-weight: 700
}

.activity-detail-card__app-text {
    font-weight: 500;
    margin-top: 24px;
    opacity: .4
}

.activity-detail-card__app .app_download_buttons {
    margin-top: 24px
}

@media (max-width:576px) {
    .activity-detail-card {
        margin-top: 8px;
        padding: 24px 16px;
        width: 100%
    }

    .activity-detail-card__app-title,
    .activity-detail-card__header {
        font-size: 20px
    }

    .activity-detail-card__list {
        margin: 24px 0;
        padding: 0 8px
    }

    .activity-detail-card__list>li {
        font-size: 14px;
        padding: 8px 0
    }

    .activity-detail-card__app {
        margin-top: 16px
    }
}

.social-share-button .button {
    background-color: #fff;
    border: 1px solid #fff;
    color: rgb(47, 51, 51);
    width: 152px
}

.social-share-button .button:hover {
    opacity: .8
}

.social-share-button .icon {
    margin-right: 8px
}

.m-social-share-button .button {
    background-color: transparent;
    border: none;
    width: 48px
}

.m-social-share-button .button .icon {
    color: #fff
}

.m-social-share-button .button .icon path {
    stroke: #fff;
    stroke-width: .7px
}

.social-share-modal .modal__content {
    padding: 32px
}

.social-share-modal h2,
.social-share-modal p {
    width: 288px
}

.social-share-modal h2 {
    margin-bottom: 16px
}

.social-share-modal__list {
    margin-top: 16px
}

.social-share-modal__list>li {
    border-top: 1px solid #e7e9eb;
    color: #335fff;
    cursor: pointer;
    font-weight: 500;
    padding: 12px 0;
    display: flex;
    align-items: center
}

.social-share-modal__list>li:hover {
    opacity: .6
}

.social-share-modal__list>li:last-child {
    border-bottom: 1px solid #e7e9eb
}

.social-share-modal__list>li>a {
    display: flex;
    align-items: center;
    text-decoration: none
}

.social-share-modal__list>li span {
    margin-right: 8px
}

.social-share-modal input {
    opacity: 0;
    pointer-events: none
}

.social-share-modal__copy-info {
    font-size: 12px;
    font-weight: 400;
    margin-left: 16px;
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s
}

.social-share-modal__copy-info--shown {
    opacity: 1
}

.tournament {
    background-color: #fff;
    position: relative
}

.tournament .social-share-button {
    position: absolute;
    top: 40px;
    right: 40px
}

.tournament__banner {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1549553485/playtomic/web/padel-tournament.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 224px
}

.tournament__title {
    color: #fff;
    margin-bottom: 16px;
    text-align: center
}

.tournament__app-suggest {
    color: #fff;
    font-weight: 500
}

.tournament__info {
    margin: 0 auto;
    padding: 48px 0 80px;
    width: 592px
}

.tournament__tags {
    margin-top: 24px
}

.tournament__tags li {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    padding: 0 14px;
    border: 1px solid rgba(47, 51, 51, .1);
    border-radius: 11px;
    margin-right: .5em
}

.tournament__map {
    height: 430px;
    margin-top: 56px
}

.tournament__address {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(47, 51, 51, .2);
    padding: 24px 0
}

.tournament__address .icon {
    margin-right: 8px
}

.tournament__description__text {
    display: flex;
    position: relative
}

.tournament__description__text img {
    border-radius: 4px;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .6);
    cursor: pointer;
    margin-left: 32px;
    width: 200px;
    height: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 16px
}

.tournament .activity-detail-card {
    margin-top: 32px
}

@media (max-width:576px) {
    .tournament__banner {
        padding: 32px 16px
    }

    .tournament__banner .big-title {
        margin-top: 8px
    }

    .tournament__banner .big-title,
    .tournament__banner .medium-title {
        font-size: 16px
    }

    .medium-title {
        margin-bottom: 16px
    }

    .medium-text {
        font-size: 14px
    }

    .tournament__info {
        margin: 0 auto;
        padding: 24px 16px;
        width: 100%
    }

    .tournament__tags {
        margin-top: 16px
    }

    .tournament__tags li {
        margin-top: 8px
    }

    .tournament__description__text {
        flex-direction: column
    }

    .tournament__description__text img {
        margin-top: 16px
    }

    .modal__win {
        padding: 8px
    }

    .modal__content img {
        width: 100%
    }

    .social-share-modal .modal__content {
        padding: 8px
    }

    .tournament .social-share-button {
        top: 0;
        right: 0
    }

    .tournament .activity-detail-card {
        margin-top: 8px
    }
}

.info-accordion {
    background-color: #fff;
    width: 100%;
    box-shadow: 0 0 24px -4px rgba(47, 51, 51, .1)
}

.info-accordion__banner {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 24px 40px
}

.info-accordion__icon {
    margin-left: 24px;
    opacity: .4
}

.info-accordion__title {
    color: rgb(47, 51, 51);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center
}

.info-accordion__content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
    width: 100%
}

.info-accordion__content--shown {
    max-height: 400px;
    overflow: auto
}

.info-accordion__text {
    color: rgba(47, 51, 51, .6);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    text-align: justify;
    padding-bottom: 24px;
    width: 1024px
}

.info-accordion__text .button {
    border: none;
    color: rgba(47, 51, 51, .4)
}

.info-accordion__text .button>div {
    font-size: 16px;
    font-weight: 400
}

.info-accordion__text .icon {
    margin-left: 16px
}

@media (max-width:576px) {
    .info-accordion__banner {
        padding: 16px
    }

    .info-accordion__title {
        font-size: 14px
    }

    .info-accordion__content {
        padding: 0 16px
    }

    .info-accordion__text {
        padding-bottom: 0;
        width: auto
    }

    .info-accordion__content--shown {
        max-height: 240px
    }
}

.tournaments-card {
    display: flex;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .1);
    width: 376px;
    height: 232px;
    padding: 16px 0
}

.tournaments-card__banner {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/v1644503772/playtomic/web/tournament_card.png);
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px;
    box-shadow: 0 8px 24px 0 rgba(47, 51, 51, .15);
    width: 136px;
    margin-left: -32px;
    flex-shrink: 0
}

.tournaments-card__banner>img {
    border-radius: 4px;
    width: 100%;
    height: 100%
}

.tournaments-card__content {
    padding: 0 24px;
    line-height: 1.43;
    position: relative;
    min-width: 0;
    width: 100%
}

.tournaments-card__name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.tournaments-card__name,
.tournaments-card__startTime {
    font-size: 14px;
    opacity: .8
}

.tournaments-card__row {
    display: flex;
    justify-content: space-between
}

.tournaments-card__players {
    color: #335fff;
    float: right;
    font-size: 14px
}

.tournaments-card__separator {
    border-top: 1px solid rgba(47, 51, 51, .1);
    margin: 8px 0
}

.tournaments-card__info {
    display: flex;
    align-items: center;
    opacity: .8
}

.tournaments-card__price {
    color: #335fff;
    position: absolute;
    right: 24px;
    bottom: 0;
    line-height: 1
}

.tournaments-card__amount {
    font-size: 28px;
    font-weight: 700
}

.tournaments-card__caption {
    font-size: 10px;
    text-transform: lowercase
}

@media (max-width:576px) {
    .tournaments-card {
        width: 100%;
        margin-bottom: 16px
    }

    .tournaments-card__banner {
        margin-left: -16px;
        width: 120px
    }

    .tournaments-card__content {
        padding: 0 8px
    }

    .tournaments-card__info,
    .tournaments-card__name,
    .tournaments-card__players,
    .tournaments-card__startTime,
    .tournaments-card__title {
        font-size: 12px
    }

    .tournaments-card__price {
        right: 8px
    }
}

.activity-search {
    display: flex;
    margin: 0 auto;
    width: 1240px;
    padding-bottom: 8px
}

.activity-search__inputs {
    display: flex;
    align-items: center;
    position: relative
}

.activity-search .drop-down__container,
.activity-search .place-input {
    position: static
}

.activity-search__place {
    width: 220px
}

.activity-search .input {
    height: 50px;
    padding: 10px 8px
}

.activity-search__place .input {
    padding-left: 8px
}

.activity-search__date,
.activity-search__gender,
.activity-search__sport {
    border-radius: 4px;
    margin-left: 24px;
    min-width: 120px;
    position: relative;
    width: auto
}

.activity-search__date .input,
.activity-search__gender .input,
.activity-search__sport .input {
    border-color: transparent
}

.activity-search__gender .drop-down,
.activity-search__sport .drop-down {
    left: -24px;
    right: -24px
}

.tournaments__banner {
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/q_auto,f_auto/v1539677513/playtomic/web/header-activities.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    color: #fff;
    padding: 60px;
    text-align: center
}

.tournaments__banner h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.5
}

.tournaments__banner h2 {
    font-size: 20px
}

.tournaments__cards a {
    text-decoration: none
}

.tournaments__filters {
    background-color: #fff;
    padding: 8px 56px
}

.tournaments__content {
    padding: 32px
}

.tournaments__results {
    padding: 0 24px
}

.tournaments__results .spinner {
    color: #335fff;
    width: 16px
}

.tournaments__content {
    margin: 0 auto
}

.tournaments__container {
    margin-top: 24px;
    padding: 0 24px
}

.tournaments__date {
    background-color: rgb(250, 250, 250);
    font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 16px 48px;
    margin-left: -48px;
    z-index: 10
}

.tournaments__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 56px;
    margin: 24px 0
}

.tournaments__cards>a {
    text-decoration: none
}

.tournaments__accordion {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 100
}

.tournaments__accordion h2 {
    font-size: 16px;
    color: #000
}

.tournaments__accordion p {
    margin-bottom: 16px;
    color: #566670
}

@media (max-width:576px) {
    .tournaments__container {
        margin-top: 0;
        padding: 0
    }

    .tournaments__banner {
        padding: 16px
    }

    .tournaments__banner h1 {
        font-size: 24px
    }

    .tournaments__banner h2 {
        font-size: 14px
    }

    .tournaments__results {
        padding: 0
    }

    .tournaments__content {
        background-color: rgb(250, 250, 250);
        padding: 16px;
        min-height: 100vh
    }

    .tournaments__cards {
        display: block;
        margin: 8px 0;
        padding-left: 16px
    }

    .tournaments__accordion h2,
    .tournaments__accordion p,
    .tournaments__date,
    .tournaments__results {
        font-size: 14px
    }

    .tournaments__date {
        padding: 16px 48px;
        top: 90px;
        z-index: 1
    }
}

.paper {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 32px 32px 0 rgba(47, 51, 51, .05)
}

.paper__padding {
    padding: 32px
}

@media screen and (max-width:576px) {
    .paper__padding {
        padding: 16px
    }
}

.validate {
    background-color: rgb(250, 250, 250);
    display: flex;
    justify-content: center;
    padding: 40px
}

.validate .paper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 600px
}

.validate .paper>*+* {
    margin-top: 24px
}

.validate .paper .medium-title {
    margin-bottom: 0
}

.validate .paper .medium-text {
    text-align: center
}

.validate .spinner {
    color: #335fff
}

@media screen and (max-width:576px) {
    .validate {
        padding: 0 16px
    }

    .validate .paper {
        width: 100%
    }

    .validate .medium-title {
        font-size: 24px
    }
}

.partner-modal {
    padding: 24px;
    width: 480px
}

.partner-modal__img {
    border-radius: 4px;
    margin-bottom: 24px;
    width: 100%
}

.partner-modal__title {
    margin-bottom: 16px;
    text-align: center
}

.partner-modal__text {
    text-align: justify
}

.partner-modal .button {
    margin-top: 16px
}

.m-partner-modal {
    padding: 16px;
    width: calc(100vw - 32px)
}

.m-partner-modal .partner-modal__img {
    margin-bottom: 8px
}

.m-partner-modal .button {
    margin-top: 8px
}

.app-banner {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.app-banner .logo * {
    fill: #fff
}

.app-banner .logo {
    margin: 0 auto
}

.app-banner__image img {
    max-width: 100%;
    margin: 12px auto 0;
    display: block
}

.app-banner__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    color: #fff;
    background-image: url(https://res.cloudinary.com/playtomic/image/upload/c_scale,w_600/v1543494197/playtomic/web/banner.webp);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.app-banner__description {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 32px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}

.app-banner__amount {
    font-size: 1.5em
}

.app-banner__swipe {
    color: #879199;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: rgb(250, 250, 250);
    position: -webkit-sticky;
    position: sticky;
    bottom: 0
}

.app-banner__swipe .icon {
    color: #0e2433;
    font-size: 1.4px;
    margin-left: 8px
}

.app-banner__download {
    position: -webkit-sticky;
    position: sticky;
    bottom: 64px
}

.app-banner .app_download_buttons {
    margin-bottom: 12px
}

.m-app-download {
    padding: 24px;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.m-app-download__text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 1em
}

.m-app-download__buttons>*+* {
    margin-top: 16px
}

.m-search .mobile-modal__content {
    padding: 0 16px
}

.m-search-filters {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 64px)
}

.m-search-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
    border-bottom: 1px solid #ebeaea;
    margin-bottom: 16px
}

.m-search-filters__filters {
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0 8px
}

.m-search-filters__filters>li+li {
    margin-top: 16px
}

.m-search-filters__button {
    padding: 8px;
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    border-top: 1px solid #ebeaea
}

.m-search-filters__filter {
    list-style: none;
    margin: 0
}

.m-search-filters__filter-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600
}

.m-search-filters__options>ul {
    list-style: none;
    margin: -4px;
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap
}

.m-search-filters__option {
    font-weight: 600;
    padding: 8px 16px;
    margin: 4px;
    border-radius: 4px;
    color: rgba(51, 48, 46, .5);
    border: 1px solid #ebeaea;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.m-search-filters__option--selected {
    color: #fff;
    background-color: rgb(164, 217, 108);
    border-color: rgb(164, 217, 108)
}

.m-search-view__head {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff
}

.m-search-view__head-top {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #cfd3d6
}

.m-search-view__location {
    font-size: 16px;
    font-weight: 400;
    background-color: rgba(47, 51, 51, .05);
    color: #2f3333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
    margin: 0 16px;
    padding: 0 8px;
    border-radius: 4px;
    border: none;
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: left
}

.m-search-view__head-bottom {
    border-bottom: 1px solid #cfd3d6;
    display: flex;
    align-items: center;
    padding: 4px 0
}

.m-search-view__filters {
    display: block;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
    padding: 8px;
    border: none;
    background: transparent;
    color: #335fff
}

.m-search-view__head-bottom__inputs {
    display: flex;
    overflow-x: auto;
    align-items: center
}

.m-search-view__input {
    position: relative;
    background-color: rgba(47, 51, 51, .05);
    padding: 8px;
    border-radius: 4px
}

.m-search-view__input>:first-child {
    margin: 0;
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.m-search-view__input>:last-child {
    font-size: 16px;
    font-weight: 400;
    color: #2f3333;
    white-space: nowrap
}

*+.m-search-view__input {
    margin-left: 8px
}

.m-search-view__place {
    padding: 0 16px
}

.m-search-view__cards {
    padding: 8px
}

.m-search-view__cards>*+* {
    margin-top: 16px
}

.m-search-view__total {
    padding: 8px;
    line-height: 1.4
}

.m-tournaments-page .m-search-view__head-bottom {
    padding: 4px 8px
}