/* BPLAY FONTS */

@font-face{
    font-family: "Gotham-Book";
    src: url(./header/Gotham-Book.ttf);
    font-display: swap;
}

@font-face{
    font-family: "Gotham-Black";
    src: url(./header/Gotham-Black.ttf);
    font-display: swap;
}

@font-face{
    font-family: "Gotham-Thin";
    src: url(./header/Gotham-Thin.ttf);
    font-display: swap;
}

@font-face{
    font-family: "Gotham-Bold";
    src: url(./header/Gotham-Bold.ttf);
    font-display: swap;
}



/* ------ 1. LAYOUT ------ */


/* ---- 1.1. FLEX DISPLAY ---- */

/* -- 1.1.1 Horizontal -- */
.bp-row--start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-row--center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-row--end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-row--between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-row--around {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bp-row--evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* -- 1.1.2 Vertical -- */
.bp-column--start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.bp-column--center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.bp-column--end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.bp-column--between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bp-column--around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.bp-column--evenly {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
}


/* ---- 1.2. GRID DISPLAY ---- */

/* -- 1.2.1 Explicit -- */
.bp-grid--rigid { /* must be accompanied by 1 o the sizing classes below  */
    display: grid;
    grid-gap: 10px;
    align-items: center;
    justify-items: center;
}

.bp-grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.bp-grid--3x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.bp-grid--4x4 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.bp-grid--5x5 {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.bp-grid--6x6 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.bp-grid--7x7 {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

.bp-grid--8x8 {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.bp-grid--9x9 {
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
}

.bp-grid--10x10 {
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.bp-grid--11x11 {
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(11, 1fr);
}

.bp-grid--12x12 {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
}

.bp-grid--13x13 {
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(13, 1fr);
}

.bp-grid--14x14 {
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);
}

.bp-grid--15x15 {
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
}

.bp-grid--16x16 {
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(16, 1fr);
}

/* -- 1.2.1 Implicit -- */
.bp-grid--autofit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: auto;
    grid-gap: 10px;
    align-items: center;
    justify-items: center;
}


/* ---- 1.3. SPACING ---- */

/* -- 1.3.1 Margin -- */
.bp-mtop10 {
    margin-top: 10px;
}
.bp-mtop20 {
    margin-top: 20px;
}
.bp-mtop30 {
    margin-top: 30px;
}
.bp-mtop40 {
    margin-top: 40px;
}
.bp-mtop50 {
    margin-top: 50px;
}
.bp-mtop100 {
    margin-top: 100px;
}
.bp-mright10 {
    margin-right: 10px;
}
.bp-mright20 {
    margin-right: 20px;
}
.bp-mright30 {
    margin-right: 30px;
}
.bp-mright40 {
    margin-right: 40px;
}
.bp-mright50 {
    margin-right: 50px;
}
.bp-mright100 {
    margin-right: 100px;
}
.bp-mbottom10 {
    margin-bottom: 10px;
}
.bp-mbottom20 {
    margin-bottom: 20px;
}
.bp-mbottom30 {
    margin-bottom: 30px;
}
.bp-mbottom40 {
    margin-bottom: 40px;
}
.bp-mbottom50 {
    margin-bottom: 50px;
}
.bp-mbottom100 {
    margin-bottom: 100px;
}
.bp-mleft10 {
    margin-left: 10px;
}
.bp-mleft20 {
    margin-left: 20px;
}
.bp-mleft30 {
    margin-left: 30px;
}
.bp-mleft40 {
    margin-left: 40px;
}
.bp-mleft50 {
    margin-left: 50px;
}
.bp-mleft100 {
    margin-left: 100px;
}
.bp-m10 {
    margin: 10px;
}
.bp-m20 {
    margin: 20px;
}
.bp-m30 {
    margin: 30px;
}
.bp-m40 {
    margin: 40px;
}
.bp-m50 {
    margin: 50px;
}
.bp-m100 {
    margin: 100px;
}
.bp-mreset { /* makes sure there's no preexisting margin */
    margin: 0;
}

/* -- 1.3.2 Padding -- */
.bp-ptop10 {
    padding-top: 10px;
}
.bp-ptop20 {
    padding-top: 20px;
}
.bp-ptop30 {
    padding-top: 30px;
}
.bp-ptop40 {
    padding-top: 40px;
}
.bp-ptop50 {
    padding-top: 50px;
}
.bp-ptop100 {
    padding-top: 100px;
}
.bp-pright10 {
    padding-right: 10px;
}
.bp-pright20 {
    padding-right: 20px;
}
.bp-pright30 {
    padding-right: 30px;
}
.bp-pright40 {
    padding-right: 40px;
}
.bp-pright50 {
    padding-right: 50px;
}
.bp-pright100 {
    padding-right: 100px;
}
.bp-pbottom10 {
    padding-bottom: 10px;
}
.bp-pbottom20 {
    padding-bottom: 20px;
}
.bp-pbottom30 {
    padding-bottom: 30px;
}
.bp-pbottom40 {
    padding-bottom: 40px;
}
.bp-pbottom50 {
    padding-bottom: 50px;
}
.bp-pbottom100 {
    padding-bottom: 100px;
}
.bp-pleft10 {
    padding-left: 10px;
}
.bp-pleft20 {
    padding-left: 20px;
}
.bp-pleft30 {
    padding-left: 30px;
}
.bp-pleft40 {
    padding-left: 40px;
}
.bp-pleft50 {
    padding-left: 50px;
}
.bp-pleft100 {
    padding-left: 100px;
}
.bp-p10 {
    padding: 10px;
}
.bp-p20 {
    padding: 20px;
}
.bp-p30 {
    padding: 30px;
}
.bp-p40 {
    padding: 40px;
}
.bp-p50 {
    padding: 50px;
}
.bp-p100 {
    padding: 100px;
}
.bp-preset { /* makes sure there's no preexisting padding */
    padding: 0;
}


/* ---- 1.4. CENTERING ---- */

/* -- 1.4.1 Horizontal -- */
.bp-hcenter {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.bp-hcenter--block { /* to be used only by block elements within block containers */
    margin: 0 auto;
}

/* -- 1.4.2 Vertical -- */
.bp-vcenter {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* -- 1.4.3 Full -- */
.bp-center {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/* ------ 2. TYPOGRAPHY ------ */


/* ---- 2.1. STANDALONE CLASSES ---- */

/* -- 2.1.1 Size -- */
.bp-text--mini {
    font-size: 10px;
}
.bp-text--small {
    font-size: 14px;
}
.bp-text--regular {
    font-size: 16px;
}
.bp-text--medium {
    font-size: 18px;
}
.bp-text--big {
    font-size: 24px;
}
.bp-text--huge {
    font-size: 30px;
}

/* -- 2.1.2 Boldness -- */
.bp-text--thin {
    font-family: 'Gotham-Thin';
}
.bp-text--fair {
    font-family: 'Gotham-Book';
}
.bp-text--bold {
    font-family: 'Gotham-Bold';
}
.bp-text--extrabold {
    font-family: 'Gotham-Black';
}

/* -- 2.1.3 Color -- */
.bp-text--grey {
    color: #414141;
}
.bp-text--corporate {
    color: #04F77C;
}

/* -- 2.1.4 Alignment -- */
.bp-text--left {
    text-align: left;
}
.bp-text--center {
    text-align: center;
}
.bp-text--right {
    text-align: right;
}

/* -- 2.1.5 Highlighting -- */
.bp-text--underlined {
    text-decoration: underline;
}
.bp-text--highlighted {
    text-shadow: 0 0 5px #fff;
}
.bp-text--highlighted--corp {
    color: #04F77C;
    text-shadow: 0 0 5px #04F77C;
}


/* ---- 2.2. COMPOSITE CLASSES ---- */
.bplay-title {
    color: white;
    font-family: 'Gotham-Black';
    text-align: left;
    align-self: flex-start;
}

.bplay-title--section { /* must be accompanied by the "bplay-title" generic class */
    font-size: 26px;
}
@media screen and (max-width: 600px) {
    .bplay-title--section {
        font-size: 4vw;
    }
}
.bplay-title--seo { /* must be accompanied by the "bplay-title" generic class */
    color: #8b919a;
    font-size: 26px;
    text-align: center;
    align-self: center;
    display: block;
    width: 100%;
    border-bottom: 1px solid #374457;
    margin-bottom: 10px;
}
@media screen and (max-width: 400px) {
    .bplay-title--seo {
        font-size: 6vw;
    }
}
.bplay-title--underlined { /* must be accompanied by the "bplay-title" generic class */
    font-size: 20px;
    text-decoration: underline;
    text-decoration-color: #04F77C;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

.bplay-subtitle {
    color: white;
    font-family: 'Gotham-Bold';
    text-align: left;
    align-self: flex-start;
}

.bplay-subtitle--section { /* must be accompanied by the "bplay-subtitle" generic class */
    font-size: 20px;
}
@media screen and (max-width: 600px) {
    .bplay-subtitle--section {
        font-size: 3.5vw;
    }
}
.bplay-subtitle--seo { /* must be accompanied by the "bplay-subtitle" generic class */
    color: #8b919a;
    font-size: 20px;
    text-decoration: underline;
}

.bplay-paragraph {
    color: white;
    font-family: 'Gotham-Book';
    font-size: 16px;
    text-align: left;
    align-self: flex-start;
}
@media screen and (max-width: 400px) {
    .bplay-paragraph {
        font-size: 12px;
    }
}

.bplay-paragraph--seo { /* must be accompanied by the "bplay-paragraph" generic class */
    color: #8b919a;
}



/* -- 3. COMPONENTS -- */


/* -- 3.1. BUTTONS -- */

/* -- 3.1.1 Appearance -- */
.bplay-btn {
    color: #fff;
    background-color: transparent;
    padding: 10px 20px;
    min-width: 200px;
    border-radius: 50px;
    border: 1px solid #fff;
    font-family: 'Gotham-Black';
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}
.bplay-btn:hover {
    transform: scale(1.1);
}
@media screen and (max-width: 600px) {
    .bplay-btn {
        min-width: 120px;
    }
}

.bplay-btn--corporate { /* must be accompanied by the "bplay-btn" generic class */
    color: #000;
    background-color: #04F77C;
    border: none;
}
.bplay-btn--white { /* must be accompanied by the "bplay-btn" generic class */
    color: #000;
    background-color: #fff;
    border: none;
}

.bplay-brandedBtn, 
.bplay-figuredBtn {
    background-color: #262626;
    color: #fff;
    border-radius: 5px;
    height: 50px;
    min-width: 200px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bplay-brandedBtn:hover:not(.bplay-brandedBtn:disabled), 
.bplay-figuredBtn:hover:not(.bplay-figuredBtn:disabled) {
    background-color: #04F77C;
    color: #000;
}
.bplay-brandedBtn:hover:not(.bplay-brandedBtn:disabled) .bplay-brandedBtn__logo, 
.bplay-figuredBtn:hover:not(.bplay-figuredBtn:disabled) .bplay-figuredBtn__img {
    filter: invert(1);
}

.bplay-brandedBtn { /* can have an <img> element as its child */
    display: flex;
    justify-content: center;
    align-items: center;
}
.bplay-brandedBtn__logo { /* should be an <img> HTML element */
    max-width: 85%;
}

.bplay-figuredBtn { /* can have an <img> element and a text element as its children */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.bplay-figuredBtn__img { /* should be an <img> HTML element */
    width: 100%;
    max-width: 30px;
}
.bplay-figuredBtn__text { /* should be a text HTML element */
    font-family: 'Gotham-Book';
    font-size: 14px;
    margin-left: 10px;
}

/* -- 3.1.2 Functionality -- */
.bplay-btn:disabled,
.bplay-brandedBtn:disabled,
.bplay-figuredBtn:disabled { /* "disabled=true" attribute must be added to the targeted button */
    opacity: .3;
    cursor: not-allowed;
}
.bplay-btn--selected { /* must be accompanied by the "bplay-brandedBtn" or "bplay-figuredBtn" generic classes */
    color: #000;
    background-color: #04F77C;
    position: relative;
}
.bplay-btn--selected:hover .bplay-brandedBtn__logo, 
.bplay-btn--selected:hover .bplay-figuredBtn__img {
    filter: none !important;
}
.bplay-btn--selected::after {
    content: url(/img/slots/circle-close.svg);
    display: block;
    width: 12px;
    border-left: 1px solid #111;
    padding: 5px;
    position: absolute;
    right: 5px;
}


/* -- 3.2. CONTENT BOXES -- */
.bplay-box {
    background-color: #262626;
    border: none;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

/* all classes below must be accompanied by the "bplay-box" generic class */
.bplay-box--transparent { 
    background-color: transparent;
    border: 1px solid #fff;
}
.bplay-box--dashed {
    border: 1px dashed #04F77C;
}
.bplay-box--topHalved {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.bplay-box--rightHalved {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.bplay-box--bottomHalved {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.bplay-box--leftHalved {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bplay-box--tagged { 
    padding: 0;
}
/* end of notice */

.bplay-box--tagged__tag { /* must be child of a "bplay-box--tagged" HTML element */
    border: 2px solid green;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(90deg, rgba(0,102,51,1) 0%, rgba(48,225,123,1) 100%);
    text-align: center;
    padding: 10px;
}
.bplay-box--tagged__body { /* must be child of a "bplay-box--tagged" HTML element */
    border: 1px solid #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    padding: 20px;
}


/* -- 3.3. SEPARATORS -- */
.bplay-separator { /* can be a void <div> or an <hr> element */
    width: 100%;
    height: 1px;
    border: none;
    background-color: #fff;
    margin: 10px 0;
}
.bplay-separatorV { /* can be a void <div> or an <hr> element */
    min-width: 1px;
    height: 100%;
    border: none;
    background-color: #fff;
    margin: 0 10px;
}

/* all classes below must be accompanied by the "bplay-separator" or "bplay-separatorV" generic classes */
.bplay-separator--thicker {
    height: 3px;
}
.bplay-separator--thickest {
    height: 5px;
}
.bplay-separatorV--thicker {
    min-width: 3px;
}
.bplay-separatorV--thickest {
    min-width: 5px;
}

.bplay-separator--corporate {
    background-color: #04F77C;
}

.bplay-separator--marginal {
    width: 75%;
}
.bplay-separator--half {
    width: 50%;
}
.bplay-separator--quarter {
    width: 25%;
}
.bplay-separatorV--marginal {
    height: 75%;
}
.bplay-separatorV--half {
    height: 50%;
}
.bplay-separatorV--quarter {
    height: 25%;
}
/* end of notice */


/* -- 3.4. FIGURES -- */
.bplay-figure { /* must be assigned to a <div> containing 2 children: 1 <img> and 1 text element */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: max-content;
    gap: 20px;
}
.bplay-figure--horizontal { /* must be accompanied by the "bplay-figure" generic class */
    flex-direction: row;
}
.bplay-figure--vertical { /* must be accompanied by the "bplay-figure" generic class */
    flex-direction: column;
}
.bplay-figure--rimmed { /* must be accompanied by the "bplay-figure" generic class */
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 20px;
}

.bplay-figure__img { /* must be assigned to an <img> child element of a parent "bplay-figure" <div> */
    width: 100%;
    max-width: 100px;
}

/* "bplay-figure__text" class must be assigned to a text child element of a parent "bplay-figure" <div> */
.bplay-figure--vertical .bplay-figure__text {
    text-align: center;
}


/* -- 3.5. CARDS -- */
.bplay-card { /* requires 2 children <div> elements: "bplay-card__header" & "bplay-card__body" */
    height: 100%;
    background-color: #303030;
    border-radius: 20px;
    text-align: center;
    padding: 10px;
}

.bplay-card__header { /* requires a parent <div> element: "bplay-card" and a child <img> element */
    background-color: #303030;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bplay-card__header img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
}
.bplay-card__header--landscape img { /* must be accompanied by the "bplay-card__header */
    width: 100%;
}
.bplay-card__header--portrait img { /* must be accompanied by the "bplay-card__header */
    width: 50%;
    padding-top: 20px
}
.bplay-card--rimmed .bplay-card__header img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bplay-card__body { /* requires a parent <div> element: "bplay-card" */
    text-align: center;
    background-color: #303030;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.bplay-card--rimmed .bplay-card__body {
    padding-bottom: 20px;
}

/* all classes below must be accompanied by the "bplay-card" generic class */
.bplay-card--regular {
    min-height: 400px;
    min-width: 400px;
}
.bplay-card--big {
    min-height: 500px;
    min-width: 500px;
}
.bplay-card--huge {
    min-height: 600px;
    min-width: 600px;
}
.bplay-card--elongated {
    max-width: 300px;
    min-height: 550px;
}

.bplay-card--rimmed {
    border: 10px solid #262626;
    padding: 0;
}
/* end of notice */


/* -- 3.6. INPUT FIELDS -- */
.bplay-input, /* must be assigned to an <input> or a <select> HTML element */
.bplay-figureInput__field { /* must be assigned to an parent <div> element containing a children <input> and 1 or 2 <img> */
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    padding: 13px 20px;
    border-radius: 50px;
    font-family: 'Gotham-Book';
    font-size: 14px;
    min-width: 200px;
}
.bplay-input::placeholder, 
.bplay-figureInput__field::placeholder {
    color: #fff;
    opacity: .3;
    font-style: italic;
}
.bplay-input:-webkit-autofill, 
.bplay-input:-webkit-autofill:hover, 
.bplay-input:-webkit-autofill:focus, 
.bplay-figureInput__field:-webkit-autofill, 
.bplay-figureInput__field:-webkit-autofill:hover, 
.bplay-figureInput__field:-webkit-autofill:focus {
    background-color: transparent;
    border-radius: 50px;
    padding: 13px 20px;
    border: 1px solid #fff;
    -webkit-text-fill-color: fff;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}
@media screen and (max-width: 600px) {
    .bplay-input, 
    .bplay-figureInput__field {
        font-size: 11px;
    }
}

.bplay-input--bottomline { /* must be accompanied by the "bplay-input" or "bplay-figureInput" generic classes */
    border: none;
    border-bottom: 1px solid #fff;
    padding: 13px 20px;
    border-radius: 0;
}
.bplay-input--bottomline:-webkit-autofill, 
.bplay-input--bottomline:-webkit-autofill:hover, 
.bplay-input--bottomline:-webkit-autofill:focus {
    background-color: transparent;
    border-radius: 0;
    padding: 13px 20px;
    border: none;
    border-bottom: 1px solid #fff;
    -webkit-text-fill-color: fff;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.bplay-figureInput { /* must be a <div> HTML element containing a child <input> or <select> and 1 or 2 children <img> elements */
    width: 100%;
    min-width: 200px;
    position: relative;
}
.bplay-figureInput__field { /* must be an <input> HTML element within a parent <div> */
    padding: 13px 50px;
}
.bplay-figureInput__field--justleft { /* can add up to "bplay-figureInput" generic class to correct absence of right icon */
    padding-right: 20px;
}
.bplay-figureInput__field--justright { /* can add up to "bplay-figureInput" generic class to correct absence of left icon */
    padding-left: 20px;
}
.bplay-figureInput__field:-webkit-autofill, 
.bplay-figureInput__field:-webkit-autofill:hover, 
.bplay-figureInput__field:-webkit-autofill:focus {
    padding: 13px 50px;
}
.bplay-figureInput__field--justleft:-webkit-autofill, 
.bplay-figureInput__field--justleft:-webkit-autofill:hover, 
.bplay-figureInput__field--justleft:-webkit-autofill:focus {
    padding-right: 20px;
}
.bplay-figureInput__field--justright:-webkit-autofill, 
.bplay-figureInput__field--justright:-webkit-autofill:hover, 
.bplay-figureInput__field--justright:-webkit-autofill:focus {
    padding-left: 20px;
}
.bplay-figureInput__iconLeft { /* must be an <img> HTML element within a parent <div> */
    position: absolute;
    width: 100%;
    max-width: 50px;
    max-height: 80%;
    top: 50%;
    left: 0;
    transform: translateY(-58%);
}
.bplay-figureInput__iconRight { /* must be an <img> HTML element within a parent <div> */
    position: absolute;
    width: 100%;
    max-width: 50px;
    max-height: 80%;
    top: 50%;
    right: 0;
    transform: translateY(-58%);
}


/* -- 3.7. ALERT BOXES -- */
.bplay-alert { /* must be assigned to a container <div> HTML element */
    width: 100%;
    color: #fff;
    padding: 10px 20px 10px 0;
    border-radius: 5px;
    border-style: solid;
    border-width: 0 0 0 10px;
    font-size: 14px;
    font-family: "Gotham-Book";
    text-align: left;
    line-height: 25px;
    position: relative;
    background-color: #262626;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.bplay-alert:before {
    content: "";
    display: inline-block;
    width: 5%;
    min-width: 75px;
    height: 75px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* all classes below must be accompanied by the "bplay-alert" generic class */
.bplay-alert--dark {
    background-color: #000;
}

.bplay-alert--error {
    border-color:#ff5c45;
}
.bplay-alert--error:before {
    background-image: url(/css/random/popups/bad-check.png);
}

.bplay-alert--warning {
    border-color: #ffac06;
}
.bplay-alert--warning:before {
    background-image: url(/css/random/popups/warning-icon.png);
}

.bplay-alert--success {
    border-color: #30e07b;
}
.bplay-alert--success:before {
    background-image: url(/css/random/popups/good-check.png);
}

.bplay-alert--info {
    border-color: #406afe;
}
.bplay-alert--info:before {
    background-image: url(/css/random/popups/info-icon.png);
}
/* end of notice */


/* -- 3.8. INPUT BUTTONS -- */
.bplay-inputShell { /* must be a <div> HTML element with 3 children: a <label>, an <input> type radio/checkbox and an inner <div> */
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bplay-inputShell:not(.bplay-inputShell:last-child) {
    margin-bottom: 10px;
}
.bplay-inputShell > input[type="radio"],
.bplay-inputShell > input[type="checkbox"] {
    display: block;
    background-color: transparent;
    border: none;
    z-index: 10;
    cursor: pointer;
    margin-bottom: 0;
}

.bplay-inputLabel { /* must be a <label> element, first child of a parent <div> with class "bplay-inputShell" */
    color: #fff;
    font-family: 'Gotham-Book';
    font-size: 14px;
    cursor: pointer;
}
.bplay-inputLabel:hover {
    color: #04F77C;
}

.bplay-radio,
.bplay-checkbox { /* must be a <div> element nested inside the parent "bplay-inputShell" element */
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.bplay-radio { /* must be a <div> element nested inside the parent "bplay-inputShell" element */
    border-radius: 50%;
    cursor: pointer;
}
.bplay-inputShell > input[type="radio"]:checked + .bplay-radio {
    background-image: url("/img/icos/check-flat.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
}

.bplay-checkbox { /* must be a <div> element nested inside the parent "bplay-inputShell" element */
    border-radius: none;
    cursor: pointer;
}
.bplay-inputShell > input[type="checkbox"]:checked + .bplay-checkbox {
    background-image: url("/img/icos/tildeOk.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
}


/* -- 3.9. INPUT RANGE -- */
.bplay-range { /* must be assigned to a <div> element with a obligatory child <input type="range"> and an optional inner <div> child */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.bplay-range--horizontal { /* must be accompanied by the "bplay-range" generic class */
    flex-direction: row;
}

.bplay-range__track { /* OPTIONAL (if showing output): must be assigned to a child <div> of a "bplay-range" parent */
    width: 100%;
    text-align: center;
    position: relative;
    min-height: 30px;
}
.bplay-range--horizontal .bplay-range__track {
    width: 80px;
}
.bplay-range__track--left { /* must be accompanied by the "bplay-range__track" generic class */
    text-align: left;
}
.bplay-range__track--right { /* must be accompanied by the "bplay-range__track" generic class */
    text-align: right;
}

.bplay-range__output { /* OPTIONAL (if showing output): must be assigned to a child <output> of a "bplay-range__track" parent <div> */
    font-family: 'Gotham-Book';
    font-size: 12px;
}
.bplay-range__output--mobile { /* must be accompanied by the "bplay-range__output" generic class */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.bplay-range__input { /* must be a child of a parent "bplay-range" <div> container */
    -webkit-appearance: none;
    height: 6px;
    margin: 0;
    padding: 0;
}
.bplay-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #04F77C;
    height: 15px;
    width: 15px;
    border-radius: 10px;
    box-shadow: var(--test, none);
}
.bplay-range__input::-moz-range-thumb {
    -webkit-appearance: none;
    background: #04F77C;
    height: 15px;
    width: 15px;
    border-radius: 10px;
    box-shadow: var(--test, none);
}
.bplay-range__input::-ms-thumb {
    -webkit-appearance: none;
    background: #04F77C;
    height: 15px;
    width: 15px;
    border-radius: 10px;
    box-shadow: var(--test, none);
}
.bplay-range__input:active::-webkit-slider-thumb {
    box-shadow: 0 0 1px 5px #3d7f52;
}
.bplay-range__input:active::-moz-range-thumb {
    box-shadow: 0 0 1px 5px #3d7f52;
}
.bplay-range__input:active::-ms-thumb {
    box-shadow: 0 0 1px 5px #3d7f52;
}


/* -- 3.10. ACCORDION BOXES -- */
.bplay-accordion { /* must be a <div> element containing 2 mandatory children: "bplay-accordion__tag" + "bplay-accordion__body" */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.bplay-accordion__tag { /* must be a child of parent <div> "bplay-accordion". Can contain a child <img> element with class "bplay-accordion__icon" */
    width: 100%;
    color: #fff;
    border: none;
    text-align: left;
    padding: 10px;
    position: relative;
}
.bplay-accordion__tag--colored { /* must be accompanied by generic class "bplay-accordion__tag" */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #262626;
}

.bplay-accordion__icon { /* must be an <img> element, child of a "bplay-accordion__tag" element */
    width: 100%;
    max-width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transition: all .2s;
}
.bplay-accordion.active .bplay-accordion__icon{
    transform: translateY(-50%) rotate(180deg);
}

.bplay-accordion__body { /* must be a child of parent <div> "bplay-accordion". Can contain a child text element with class "bplay-accordion__text" */
    max-height: 1px;
    border: none;
    border-top: 1px solid #fff;
    overflow: hidden;
    transition: all 2s;
}
.bplay-accordion.active .bplay-accordion__tag--colored {
    background-color: #04F77C;
    color: #000;
}
.bplay-accordion.active .bplay-accordion__tag--colored .bplay-accordion__icon{
    filter: invert(1);
}
.bplay-accordion.active .bplay-accordion__body {
    max-height: 1000px;
}
.bplay-accordion.active .bplay-accordion__body--rimmed { /* must be accompanied by generic class "bplay-accordion__body" */
    border: 1px solid #fff;
}
.bplay-accordion.active .bplay-accordion__body--dashed { /* must be accompanied by generic class "bplay-accordion__body" */
    border: 1px dashed #fff;
}

.bplay-accordion__text { /* must be a child of a "bplay-accordion__body" element */
    opacity: 0;
    padding: 10px;
    transition: all 1s;
}
.bplay-accordion.active .bplay-accordion__text {
    opacity: 1;
}



/* -- 4. EFFECTS & TRANSITIONS -- */


/* -- 4.1. ELEMENT DISPLAY -- */

/* -- 4.1.1 Materialization -- */
.bp-show {
    display: block;
}
.bp-showflex {
    display: flex;
}
.bp-showgrid {
    display: grid;
}

/* -- 4.1.2 Occultation -- */
.bp-hide {
    display: none;
}


/* -- 4.2. LAYERING FILTERS -- */

/* -- 4.2.1 Functionality modifiers -- */
.bp-freeze {
    overflow: hidden;
    filter: grayscale(1);
    opacity: .3;
    pointer-events: none;
}

/* -- 4.2.2 Appearance modifiers -- */
.bp-darken {
    filter: brightness(.3);
}

.bp-sadden {
    filter: grayscale(1);
}

.bp-blur {
    filter: blur(3px);
}


/* -- 4.3. ANIMATIONS -- */
.bp-blip, 
.bp-rotation, 
.bp-beat {
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.bp-fadein, 
.bp-fadeout, 
.bp-movein, 
.bp-moveout {
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.bp-blip {
    animation-name: blip;
}
@keyframes blip {
    0% {opacity: 1}
    50% {opacity: 0}
    100% {opacity: 1}
}

.bp-rotation {
    animation-name: rotation;
}
@keyframes rotation {
    0% {transform: rotate(0deg)}
    50% {transform: rotate(180deg)}
    100% {transform: rotate(360deg)}
}

.bp-beat {
    animation-name: beat;
}
@keyframes beat {
    0% {transform: scale(1)}
    25% {transform: scale(.5)}
    50% {transform: scale(1)}
    75% {transform: scale(1.5)}
    100% {transform: scale(1)}
}

.bp-fadein {
    animation-name: fade-in;
}
@keyframes fade-in {
    0% {opacity: 0}
    100% {opacity: 1}
}

.bp-fadeout {
    animation-name: fade-out;
}
@keyframes fade-out {
    0% {opacity: 1}
    100% {opacity: 0}
}

/* classes below must be accompanied by generic class "bp-movein" */
.bp-movein--top {
    animation-name: movein-top;
}
@keyframes movein-top {
    from { transform: translateY(-150vh); }
    to { transform: translateY(0); }
}
.bp-movein--right {
    animation-name: movein-right;
}
@keyframes movein-right {
    from { transform: translateX(150vw); }
    to { transform: translateX(0); }
}
.bp-movein--bottom {
    animation-name: movein-bottom;
}
@keyframes movein-bottom {
    from { transform: translateY(150vh); }
    to { transform: translateY(0); }
}
.bp-movein--left {
    animation-name: movein-left;
}
@keyframes movein-left {
    from { transform: translateX(-150vw); }
    to { transform: translateX(0); }
}
/* end of notice */

/* classes below must be accompanied by generic class "bp-moveout" */
.bp-moveout--top {
    animation-name: moveout-top;
}
@keyframes moveout-top {
    from { transform: translateY(0); }
    to { transform: translateY(-150vh); }
}
.bp-moveout--right {
    animation-name: moveout-right;
}
@keyframes moveout-right {
    from { transform: translateX(0); }
    to { transform: translateX(150vw); }
}
.bp-moveout--bottom {
    animation-name: moveout-bottom;
}
@keyframes moveout-bottom {
    from { transform: translateY(0); }
    to { transform: translateY(150vh); }
}
.bp-moveout--left {
    animation-name: moveout-left;
}
@keyframes moveout-left {
    from { transform: translateX(0); }
    to { transform: translateX(-150vw); }
}
/* end of notice */

/* classes below must be accompanied by generic classes "bp-blip", "bp-rotation", "bp-beat", "bp-fadein", "bp-fadeout", "bp-movein" or "bp-moveout" */
.bp-animate--quick {
    animation-duration: 1s;
}
.bp-animate--quicker {
    animation-duration: .5s;
}
.bp-animate--slow {
    animation-duration: 3.5s;
}
.bp-animate--slower {
    animation-duration: 5s;
}
/* end of notice */



/* --------------------------------------------------- */
/* OLDER STYLES - DO NOT REPLACE UNTIL PLATFORM REVAMP IS COMPLETED */

/* Texts */

.bp2__text {
    font-family: "Gotham-Black";
    font-size: 14px;
}

.bp2__highlight {
    color: #04F77C;
}
.bp2__plain {
    color: white;
}

/* Positioning */

.bp2__row__center {
    display: flex;
    justify-content: center;
}
.bp2__col__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.bp2__row__between {
    display: flex;
    justify-content: space-between;
}
.bp2__col__between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bp2__row__around {
    display: flex;
    justify-content: space-around;
}
.bp2__col__around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.bp2__row__even {
    display: flex;
    justify-content: space-evenly;
}
.bp2__col__even {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.bp2__row__start {
    display: flex;
    justify-content: flex-start;
}
.bp2__col__start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bp2__align__center {
    align-items: center;
}
.bp2__sticky__div {
    position: fixed;
    bottom: 0px;
    height: 13vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
}

/* Padding & Margins */

.bp2__header__spacing {
    margin-bottom: 0;
    padding: 0 30px;
}

.bp2__no__spacing {
    margin: 0;
    padding: 0;
}

/* Menus */

.bp2__menu:active, #header-nav .active {
    /* font-weight: 900 !important; */
    text-decoration: underline !important;
    text-decoration-color: #04F77C !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px !important;
    font-family: 'Gotham-Black';
}

.bp2__menu:hover {
    text-decoration: underline !important;
    text-decoration-color: #4a9555 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 5px !important;
}

/* Buttons */
.bp2__clickable  {
    cursor: pointer;
}

.bp2__cta1 {
    border: 1px solid white;
    color: white;
}

.bp2__cta2 {
    color: black;
    border: 1px solid black;
    background-color: #04F77C;
}

.bp2__cta3 {
    color: black;
    border: 1px solid black;
    background-color: white !important;
}

.bp2__cta2:hover {
    color: black;
}

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

.bp2__btn__dk {
    height: 40px;
    width: 180px;
    border-radius: 50px;
    font-family: "Gotham-Black";
    font-size: 14px;
}

/* Icons */

.bp2__btn__icon {
    width: 60px;
    height: auto;
}

/* Boxes */
.bp2__full__card {
    border: 1px solid white;
    border-radius: 8px;
    text-align: center;
}

.bp2__upper__card {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: linear-gradient(90deg, rgba(0,102,51,1) 0%, rgba(48,225,123,1) 100%);
    text-align: center;
    padding: 10px 0 10px 0;
}

.bp2__lower__card {
    border: 1px solid white;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    padding: 50px 0 50px 0;
}

/* Cookies panel */

.bp2__cookies {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 15vh;
    font-size: 12px;
    color: white;
    font-family: "Gotham-Book";
    background-color: black;
    z-index: 9999;
    padding: 20px;
    display: flex;
}

.bp2__cookies button {
    border-radius: 50px;
    padding: 10px;
    width: 150px;
    font-size: 12px;
    margin: 0 10px;
    font-family: "Gotham-Black";
}

#cookiesInfo {
    justify-content: center;
    align-items: center;
}

#cookiesInfo p  {
    text-align: center;
    width: 65%;
}

#cookiesInfo-mobile {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#cookiesInfo-mobile p {
    text-align: center;
    font-size: 11px;
}

#cookiesInfo-mobile div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

#cookie-accept-mb {
    width: 100px;
}

#cookie-refuse-mb {
    width: 35px;
}

@media screen and (max-width: 880px) {
    .bp2__cookies {
        height: 40vh;
        padding-top: 5vh;
    }
    .bp2__cookies p  {
        text-align: center;
        width: 100%;
        padding: 0 35px;
    }
}

}