/* ROOT */
:root {
    --color-abf: #38409b;
    --color-abc: #10c9d3;
    --color-asc: #ef9622;
    --color-abh: #38503f;
    --color-beach-house: #38503f;
}

/* GENERAL */
a {
    text-decoration: none;
}

body {
    background-color: var(--outlet-bg-color);
}

.pointer {
    cursor: pointer;
}

.text-bg-dark::placeholder {
    color: #ccc;
}

/* LOADER */
#loader {
    z-index: 9999;
}

/* BREADCRUMB */
#breadcrumb {
    top: 7.5rem;
    z-index: 1029;
}

/* FAQ */
#faqs {
    scroll-margin-top: 13rem;
}

/* NEWS */
.news img {
    width: 100% !important;
    height: unset !important;
    max-width: 100% !important;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 10px;
}

/* TESTIMONY */
.ratio-instagram-story {
    --bs-aspect-ratio: 177.78%;
}

/* MENU */
#menu .btn.active {
    filter: brightness(75%);
}

#menu-category-mobile {
    top: 9.5rem;
    z-index: 1029;
}

#menu-category-desktop {
    top: 11rem;
}

/* HOVER */
.hover-lift-top {
    transition: transform 0.5s ease;
}

.hover-lift-top:hover {
    transform: translateY(-10px);
}

/* HOVER */
.hover-lift-end {
    transition: transform 0.5s ease;
}

.hover-lift-end:hover {
    transform: translateX(10px);
}

/* ABF - ATLAS BEACH FEST - BLUE */
.text-abf {
    color: var(--color-abf);
}

.bg-abf {
    background-color: var(--color-abf);
    color: #ffffff;
}

.btn-abf {
    color: #fff;
    background-color: var(--color-abf);
    border-color: var(--color-abf);
}

.btn-abf:hover,
.btn-abf:focus,
.btn-abf:active,
.btn-abf.active,
.show > .btn-abf.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abf);
    border-color: var(--color-abf);
}

.btn-abf:disabled,
.btn-abf.disabled {
    color: #fff;
    background-color: var(--color-abf);
    border-color: var(--color-abf);
    opacity: 0.65;
}

.btn-outline-abf {
    color: var(--color-abf);
    border-color: var(--color-abf);
}

.btn-outline-abf:hover,
.btn-outline-abf:focus,
.btn-outline-abf:active,
.btn-outline-abf.active,
.show > .btn-outline-abf.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abf);
    border-color: var(--color-abf);
}

.btn-outline-abf:disabled,
.btn-outline-abf.disabled {
    color: var(--color-abf);
    background-color: transparent;
}

/* ABC - ATLAS BEACH CLUB - TEAL */
.text-abc {
    color: var(--color-abc);
}

.bg-abc {
    background-color: var(--color-abc);
    color: #ffffff;
}

.btn-abc {
    color: #fff;
    background-color: var(--color-abc);
    border-color: var(--color-abc);
}

.btn-abc:hover,
.btn-abc:focus,
.btn-abc:active,
.btn-abc.active,
.show > .btn-abc.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abc);
    border-color: var(--color-abc);
}

.btn-abc:disabled,
.btn-abc.disabled {
    color: #fff;
    background-color: var(--color-abc);
    border-color: var(--color-abc);
    opacity: 0.65;
}

.btn-outline-abc {
    color: var(--color-abc);
    border-color: var(--color-abc);
}

.btn-outline-abc:hover,
.btn-outline-abc:focus,
.btn-outline-abc:active,
.btn-outline-abc.active,
.show > .btn-outline-abc.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abc);
    border-color: var(--color-abc);
}

.btn-outline-abc:disabled,
.btn-outline-abc.disabled {
    color: var(--color-abc);
    background-color: transparent;
}

/* ASC - ATLAS SUPER CLUB - ORANGE */
.text-asc {
    color: var(--color-asc);
}

.bg-asc {
    background-color: var(--color-asc);
    color: #ffffff;
}

.btn-asc {
    color: #fff;
    background-color: var(--color-asc);
    border-color: var(--color-asc);
}

.btn-asc:hover,
.btn-asc:focus,
.btn-asc:active,
.btn-asc.active,
.show > .btn-asc.dropdown-toggle {
    color: #fff;
    background-color: var(--color-asc);
    border-color: var(--color-asc);
}

.btn-asc:disabled,
.btn-asc.disabled {
    color: #fff;
    background-color: var(--color-asc);
    border-color: var(--color-asc);
    opacity: 0.65;
}

.btn-outline-asc {
    color: var(--color-asc);
    border-color: var(--color-asc);
}

.btn-outline-asc:hover,
.btn-outline-asc:focus,
.btn-outline-asc:active,
.btn-outline-asc.active,
.show > .btn-outline-asc.dropdown-toggle {
    color: #fff;
    background-color: var(--color-asc);
    border-color: var(--color-asc);
}

.btn-outline-asc:disabled,
.btn-outline-asc.disabled {
    color: var(--color-asc);
    background-color: transparent;
}

/* ABH - ATLAS BEACH HOUSE - GREEN */
.text-abh {
    color: var(--color-abh);
}

.bg-abh {
    background-color: var(--color-abh);
    color: #ffffff;
}

.btn-abh {
    color: #fff;
    background-color: var(--color-abh);
    border-color: var(--color-abh);
}

.btn-abh:hover,
.btn-abh:focus,
.btn-abh:active,
.btn-abh.active,
.show > .btn-abh.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abh);
    border-color: var(--color-abh);
}

.btn-abh:disabled,
.btn-abh.disabled {
    color: #fff;
    background-color: var(--color-abh);
    border-color: var(--color-abh);
    opacity: 0.65;
}

.btn-outline-abh {
    color: var(--color-abh);
    border-color: var(--color-abh);
}

.btn-outline-abh:hover,
.btn-outline-abh:focus,
.btn-outline-abh:active,
.btn-outline-abh.active,
.show > .btn-outline-abh.dropdown-toggle {
    color: #fff;
    background-color: var(--color-abh);
    border-color: var(--color-abh);
}

.btn-outline-abh:disabled,
.btn-outline-abh.disabled {
    color: var(--color-abh);
    background-color: transparent;
}

.text-abh-2 {
    color: #e7e1db;
}

.bg-abh-2 {
    background-color: #e7e1db;
}

.text-beach-house {
    color: var(--color-beach-house);
}

.bg-beach-house {
    background-color: var(--color-beach-house);
    color: #ffffff;
}

.btn-beach-house {
    color: #fff;
    background-color: var(--color-beach-house);
    border-color: var(--color-beach-house);
}

.btn-beach-house:hover,
.btn-beach-house:focus,
.btn-beach-house:active,
.btn-beach-house.active,
.show > .btn-beach-house.dropdown-toggle {
    color: #fff;
    background-color: var(--color-beach-house);
    border-color: var(--color-beach-house);
}

.btn-beach-house:disabled,
.btn-beach-house.disabled {
    color: #fff;
    background-color: var(--color-beach-house);
    border-color: var(--color-beach-house);
    opacity: 0.65;
}

.btn-outline-beach-house {
    color: var(--color-beach-house);
    border-color: var(--color-beach-house);
}

.btn-outline-beach-house:hover,
.btn-outline-beach-house:focus,
.btn-outline-beach-house:active,
.btn-outline-beach-house.active,
.show > .btn-outline-beach-house.dropdown-toggle {
    color: #fff;
    background-color: var(--color-beach-house);
    border-color: var(--color-beach-house);
}

.btn-outline-beach-house:disabled,
.btn-outline-beach-house.disabled {
    color: var(--color-beach-house);
    background-color: transparent;
}

.text-beach-house-2 {
    color: #e7e1db;
}

.bg-beach-house-2 {
    background-color: #e7e1db;
}

#bg-daypass {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url("/images/beach-house/day-pass.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.outlet-theme {
    color: var(--outlet-theme);
}

.outlet-invert-theme {
    color: var(--outlet-invert-theme);
}

.outlet-background-theme {
    background-color: var(--outlet-theme);
}

.outlet-color {
    color: var(--outlet-color);
}

.outlet-background-color {
    color: var(--outlet-theme);
    background-color: var(--outlet-color);
}

.outlet-bg-color {
    background-color: var(--outlet-bg-color);
}

.btn-outlet {
    color: var(--outlet-theme);
    background-color: var(--outlet-color);
    border-color: var(--outlet-color);
}

.btn-outlet:hover,
.btn-outlet:focus,
.btn-outlet:active,
.btn-outlet.active,
.show > .btn-outlet.dropdown-toggle {
    color: var(--outlet-theme);
    background-color: var(--outlet-color);
    border-color: var(--outlet-color);
}

.btn-outlet:disabled,
.btn-outlet.disabled {
    color: var(--outlet-theme);
    background-color: var(--outlet-color);
    border-color: var(--outlet-color);
    opacity: 0.65;
}

.btn-outline-outlet {
    color: var(--outlet-color);
    border-color: var(--outlet-color);
}

.btn-outline-outlet:hover,
.btn-outline-outlet:focus,
.btn-outline-outlet:active,
.btn-outline-outlet.active,
.show > .btn-outline-outlet.dropdown-toggle {
    color: var(--outlet-theme);
    background-color: var(--outlet-color);
    border-color: var(--outlet-color);
}

.btn-outline-outlet:disabled,
.btn-outline-outlet.disabled {
    color: var(--outlet-color);
    background-color: transparent;
}