/* THE CLUB WE LOVE
/* OTHER ALIAS LTD
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* VARIABLES
/* ---------------------------------------------- */
:root {
    --black: #0C0C0E;
    --offblack: #161616;
    --grey: #a19e9e;
    --red: #BC082A;
    --white: #FFFFFF;
}

/* ---------------------------------------------- */
/* GENERAL
/* ---------------------------------------------- */

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: var(--offblack);
    background: var(--white);
}

a {
    color: var(--red);
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

.no-underline:hover {
    text-decoration: underline;
}

a:focus, a:hover {
    color: var(--offblack);
    text-decoration: none;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.img-shadow {
    -webkit-box-shadow: 0px 0px 40px -14px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 40px -14px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 40px -14px rgba(0,0,0,0.3);
}

.tombstone {
    background-color: var(--white);
    transition: all .3s ease-in-out;
}

.tombstone:hover {
    background-color: #ffffff;
    cursor:pointer;
    transition: all .3s ease-in-out;
    /*transform: scale(1.02);*/
    transform: translateY(-9px);

}

/* ---------------------------------------------- */
/* TYPOGRAPHY
/* ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
     font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* H1  */
h1 {
    font-size: 65px;
    line-height: 70px;
    color: var(--offblack);
}

/* H2  */
h2 {
    font-size: 45px;
    line-height: 50px;
    color: var(--offblack);
}

/* H3  */
h3 {
    font-size: 33px;
    line-height: 40px;
    color: var(--offblack);
    margin: 0px 0px 30px 0px;
}

/* BODY COPY  */
p {
     font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: var(--offblack);
    margin: 0 0 16px;
}


strong, .bold {
     font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.small-text {
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0px;
}

/* ---------------------------------------------- */
/* BUTTONS
/* ---------------------------------------------- */

.btn.focus, .btn:focus {
    color: var(--white);
    background-color: var(--red);
    text-decoration: none;
}

.btn-primary {
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
    border-radius: 5px;
    padding: 11px 18px;
    font-size: 15px;
    letter-spacing: 1.2px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:active:hover {
    color: var(--white);
    background-color: var(--offblack);
    border-color: var(--offblack);
}

.btn-secondary {
    color: var(--white);
    background-color: var(--offblack);
    border-color: var(--offblack);
    border-radius: 5px;
    padding: 11px 18px;
    font-size: 15px;
    letter-spacing: 1.2px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:active:hover {
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
}

/* ---------------------------------------------- */
/* MODAL
/* ---------------------------------------------- */

.modal-backdrop {
    opacity:0.9 !important;
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1450px;
    }
}

.modal-content {
    background-color: #000000;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg> ");
}

.modal-body {
    padding: 0;
}
/* ---------------------------------------------- */
/* VIDEO
/* ---------------------------------------------- */

video {
    width: 100%;
    height: auto;
}

/* ---------------------------------------------- */
/* SLICK SLIDER
/* ---------------------------------------------- */

.slider-2 .slick-slide {
    padding: 0px 10px 0px 10px;
}

.slick-prev:before, .slick-next:before {
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: var(--blue);
}

.slider-sustainability img {
    margin:0 auto;
}

/* ---------------------------------------------- */
/* ACCORDION
/* ---------------------------------------------- */

.accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--black);
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-top {
    border-top: 1px solid var(--black);
}

.accordion-button:not(.collapsed) {
    color: var(--black);
    background-color: transparent;
    box-shadow: none;
}

.accordion-button {
    font-weight: bold;
    letter-spacing: 2px;
    padding: 0.2rem .5rem 0.2rem 0;
    color: var(--black);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234A0D00'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

}

.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.accordion-button {
    background-color: transparent;
}

/* ---------------------------------------------- */
/* HEADER
/* ---------------------------------------------- */

.bg-header {
    background: rgb(41, 107, 182);
    background: -moz-radial-gradient(circle, rgba(41, 107, 182, 1) 0%, rgba(2, 10, 36, 1) 100%);
    background: -webkit-radial-gradient(circle, rgba(41, 107, 182, 1) 0%, rgba(2, 10, 36, 1) 100%);
    background: radial-gradient(circle, rgba(41, 107, 182, 1) 0%, rgba(2, 10, 36, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#296bb6", endColorstr="#020a24", GradientType=1);
}

/* ---------------------------------------------- */
/* FOOTER
/* ---------------------------------------------- */

footer {
    background: var(--white);
}

footer p {
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0px;
    color: var(--offblack);
}

footer hr {
    height:1px;
    border:none;
    color:var(--offblack);
    background-color:var(--offblack);
    width:100%;
    text-align:left;
    margin: 0 auto 0 0;
}

footer a {
    color: var(--red);
    text-decoration: none;
}

footer a:hover {
    color: var(--red);
    text-decoration: underline;
}

/* ---------------------------------------------- */
/* BACKGROUND COLOURS
/* ---------------------------------------------- */

.bg-black {
    background: var(--black);
}

.bg-offblack {
    background: var(--offblack);
}

.bg-red {
    background: var(--red);
}

.bg-white {
    background: var(--white);
}

/* ---------------------------------------------- */
/* TEXT COLOURS
/* ---------------------------------------------- */

.text-black {
    color: var(--black);
}

.text-offblack {
    color: var(--offblack);
}

.text-grey {
    color: var(--grey);
}

.text-red {
    color: var(--red);
}

.text-white {
    color: var(--white);
}

/* ---------------------------------------------- */
/* DESKTOP LAYOUT
/* ---------------------------------------------- */

@media (min-width: 992px){

    .ptd6 {
        padding-top: 120px;
    }
    .ptd5 {
        padding-top: 100px;
    }
    .ptd4 {
        padding-top: 80px;
    }
    .ptd3 {
        padding-top: 60px;
    }
    .ptd2 {
        padding-top: 40px;
    }
    .ptd1 {
        padding-top: 20px;
    }
    .pbd6 {
        padding-bottom: 120px;
    }
    .pbd5 {
        padding-bottom: 100px;
    }
    .pbd4 {
        padding-bottom: 80px;
    }
    .pbd3 {
        padding-bottom: 60px;
    }
    .pbd2 {
        padding-bottom: 40px;
    }
    .pbd1 {
        padding-bottom: 20px;
    }
    .psdn {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .psd1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .psd2 {
        padding-left: 30px;
        padding-right: 30px;
    }
    .psd3 {
        padding-left: 40px;
        padding-right: 40px;
    }
    .tcd {
        text-align: center;
    }
    .tld {
        text-align: left;
    }
    .trd {
        text-align: right;
    }

}

/* ---------------------------------------------- */
/* MOBILE LAYOUT
/* ---------------------------------------------- */

@media (max-width: 991px){

    .ptm6 {
        padding-top: 60px;
    }
    .ptm5 {
        padding-top: 50px;
    }
    .ptm4 {
        padding-top: 40px;
    }
    .ptm3 {
        padding-top: 30px;
    }
    .ptm2 {
        padding-top: 20px;
    }
    .ptm1 {
        padding-top: 10px;
    }
    .pbm6 {
        padding-bottom: 60px;
    }
    .pbm5 {
        padding-bottom: 50px;
    }
    .pbm4 {
        padding-bottom: 40px;
    }
    .pbm3 {
        padding-bottom: 30px;
    }
    .pbm2 {
        padding-bottom: 20px;
    }
    .pbm1 {
        padding-bottom: 10px;
    }
    .psmn {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .psm1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .psm2 {
        padding-left: 30px;
        padding-right: 30px;
    }
    .psm3 {
        padding-left: 40px;
        padding-right: 40px;
    }
    .tcm {
        text-align: center;
    }
    .tlm {
        text-align: left;
    }
    .trm {
        text-align: right;
    }
    .container {
        padding-left: 35px;
        padding-right: 35px;
    }

}

/* ---------------------------------------------- /*
 * LARGE BREAK POINT
/* ---------------------------------------------- */

@media only screen and (min-width : 1500px) {
    .container {
        max-width: 1440px;
    }
}