@import url('./colors.css');

@font-face {
    font-family: Bold888;
    src: url('../font/888-Bold.otf') format('opentype');
}

@font-face {
    font-family: CondensedMedium888;
    src: url('../font/888-CondensedMedium.otf') format('opentype');
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}
html {
    overflow-x: initial !important;
  }
.container {
    background-color: var(--white);
    color: var(--black);
    margin: 0;
    font-family: CondensedMedium888;
    min-width: 320px;
}

.container__main {
    display: block;
    margin: 0 auto;
    padding: 0;
}

.transition-fade {
    opacity: 1;
    transition: 500ms;
}

html.is-animating .transition-fade {
    opacity: 0;
}

.container__nav,
.container__footer {
    background-color: var(--black);
    height: 50px;
    font-size: 14px;
    padding: 0 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    bottom:0;
}

.container__footer {
    font-size: 12px;
}

.container__home-link {
    background: center / contain no-repeat url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="utf-8"%3F%3E%3C!--Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)--%3E%3Csvg xmlns="http://www.w3.org/2000/svg" width="1576.71" height="359.44"%3E%3Cpath fill="%23FFF" d="M92.23 0C42.52 0 0 39.7 0 92.08c0 52.4 42.52 92.08 92.23 92.08 49.7 0 92.22-40 92.22-92.08S141.93 0 92.23 0zm.04 128.82a36.74 36.74 0 0 1-36.53-36.74 36.85 36.85 0 0 1 36.95-36.74 36.74 36.74 0 1 1-.42 73.48z"/%3E%3Cpath fill="%23FFF" d="M92.23 128.82C42.52 128.82 0 168.47 0 220.84c0 52.36 42.52 92.02 92.23 92.02 49.7 0 92.22-39.97 92.22-92.02s-42.52-92.02-92.22-92.02zm-.04 128.74a36.7 36.7 0 0 1-36.45-36.72 36.8 36.8 0 0 1 36.92-36.68h.03a36.7 36.7 0 1 1-.5 73.4zM277.5 0c-49.7 0-92.22 39.7-92.22 92.08 0 52.4 42.53 92.08 92.23 92.08s92.22-40 92.22-92.08S327.22 0 277.51 0zm.04 128.82a36.74 36.74 0 0 1-36.52-36.74 36.84 36.84 0 0 1 36.94-36.74h.01a36.74 36.74 0 1 1-.43 73.48z"/%3E%3Cpath fill="%23FFF" d="M277.5 128.82c-49.7 0-92.22 39.65-92.22 92.02 0 52.36 42.53 92.02 92.23 92.02s92.22-39.97 92.22-92.02-42.52-92.02-92.22-92.02zm-.04 128.74a36.7 36.7 0 0 1-36.44-36.72 36.8 36.8 0 0 1 36.92-36.68h.03a36.7 36.7 0 0 1-.5 73.4zM462.75 0c-49.7 0-92.22 39.7-92.22 92.08 0 52.4 42.52 92.08 92.22 92.08 49.7 0 92.22-40 92.22-92.08S512.46 0 462.75 0zm.04 128.82a36.74 36.74 0 0 1-36.53-36.74 36.85 36.85 0 0 1 36.95-36.74 36.74 36.74 0 1 1-.42 73.48z"/%3E%3Cpath fill="%23FFF" d="M462.75 128.82c-49.7 0-92.22 39.65-92.22 92.02 0 52.36 42.52 92.02 92.22 92.02 49.7 0 92.22-39.97 92.22-92.02s-42.51-92.02-92.22-92.02zm-.04 128.74a36.7 36.7 0 0 1-36.45-36.72 36.8 36.8 0 0 1 36.93-36.68h.02a36.7 36.7 0 0 1-.5 73.4zM687.34 199.56l-8.68 26.25c-5.77-4.24-21.12-14.23-31.12-14.23-8.23-.24-15.35 3.76-14.68 10.66.22 4.22 3.78 7.79 15.12 11.79 20.9 7.57 42.69 16 43.36 40.46.45 22.47-18.23 37.58-48.03 37.58-22.45.22-41.35-12.23-48.9-21.12l12.67-24c9.56 9.33 23.34 18.9 36.23 19.1 9.57.23 17.12-4.2 16.69-10.67-.45-6.88-8.02-9.56-14.47-12-35.79-12-44-21.78-44.46-42.02-.22-20.24 18.45-37.13 47.14-36.46a65.47 65.47 0 0 1 39.13 14.66zM839.7 248.71v.44c0 35.35-23.79 61.59-59.36 61.59-17.8 0-30.02-7.34-37.59-19.12v67.82H711.4V188.9h31.35v16.89c7.79-12 20-19.12 37.59-19.12 35.79 0 59.36 26.68 59.36 62.04zm-31.8-.24c0-18.9-12.9-31.79-30.68-31.79-16.9 0-30.9 12.9-30.9 31.8v.45c0 18.9 13.56 31.79 30.45 31.79 17.56 0 31.14-13.1 31.14-31.8v-.44zM974.95 256.26h-86.04c2.46 16.24 13.12 27.12 30.46 27.12 12.9 0 22.45-7.1 27.58-17.78l24.24 12.67c-9.58 17.35-25.8 32.25-53.59 32.25-35.57 0-60.92-26.24-60.92-61.8v-.24c0-35.13 25.35-62.03 59.36-62.03 40.25 0 58.91 31.12 58.91 59.58v10.23zm-30.66-20.22c0-8.46-6.23-22.47-27.14-22.47-15.55 0-24 10.01-27.12 22.47h54.26zM1109.56 225.36l-27.36 11.33c-4.22-10-12.22-20.22-27.57-20.22-17.1 0-29.13 12.89-29.13 31.79v.45c0 18.9 12.46 31.8 29.58 31.8 15.79 0 24.46-10.45 27.58-21.13l28 9.34c-7.11 24.9-27.33 41.8-56.03 41.8-35.57 0-60.92-26.23-60.92-61.8v-.24c0-35.12 25.13-62.03 60.92-62.03 27.57 0 46.69 16 54.93 38.9zM1171.44 188.9h32.46v29.56h-32.46v49.37c0 8.89 4.88 14.01 13.1 14.01 6.01 0 13.35-1.12 19.36-2.9v25.8c-6.9 3.77-18.45 6-27.58 6-22.44 0-36.24-11.57-36.24-36.68v-55.6h-14.66v-29.57h14.66v-32.46h31.36v32.47zM1348.02 188.9v119.4h-31.34v-15.34c-7.78 11.11-19.57 17.56-36.46 17.56-35.59 0-59.14-26.24-59.14-61.8v-.24c0-35.13 23.33-62.03 59.14-62.03 16.9 0 28.68 6.45 36.46 17.35v-14.9h31.34zm-33.56 59.36c0-18.68-13.56-31.8-31.14-31.8-16.9 0-30.45 12.9-30.45 31.8v.45c0 18.9 14.01 31.8 30.9 31.8 17.78 0 30.69-12.9 30.69-31.8v-.45zM1412.15 188.9h32.46v29.56h-32.46v49.37c0 8.89 4.88 14.01 13.1 14.01 6.01 0 13.35-1.12 19.36-2.9v25.8c-6.9 3.77-18.45 6-27.57 6-22.45 0-36.25-11.57-36.25-36.68v-55.6h-14.66v-29.57h14.66v-32.46h31.36v32.47zM1576.71 256.26h-86.05c2.47 16.24 13.13 27.12 30.47 27.12 12.9 0 22.45-7.1 27.57-17.78l24.25 12.67c-9.58 17.35-25.8 32.25-53.6 32.25-35.57 0-60.91-26.24-60.91-61.8v-.24c0-35.13 25.34-62.03 59.36-62.03 40.25 0 58.91 31.12 58.91 59.58v10.23zm-30.68-20.22c0-8.46-6.21-22.47-27.12-22.47-15.57 0-24.01 10.01-27.12 22.47h54.24z"/%3E%3C/svg%3E');
    display: block;
    width: 105px;
    height: 30px;
}

.container__nav--anchor {
    color: var(--nav-text);
    text-decoration: none;
    padding-left: 14px;
}

.container__footer--text {
    color: var(--nav-text);
}

.container__header-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background: center / cover no-repeat url('../images/careers-image.jpg');
}

.container__header-logo {
    background: center / contain no-repeat url('../images/888SpectateLogo.png');
    background-size: 150px;
    width: 250px;
    height: 250px;
}


.current-openings {
    margin: auto;
    max-width: 1125px;
    padding: 10px 14px 25px;
}

.container__section-who-are-we {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35vh;
    background: center / cover no-repeat url('../images/background.jpg');
}

.container__who-are-we-header {
    color: var(--white);
    text-align: center;
}

.main-content__article-who {
    margin: 25px;
}

.main-content__article-who p {
    width: 990px;
    color: var(--white);
    text-align: center;
}

.horizontal-line {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px solid var(--main-color);
    width: 10%;
}

.container__main-header {
    text-align: center;
    font-size: 20px;
    font-family: Bold888;
    margin: 25px;
}

.container__main-header--larger {
    font-size: 24px;
}

.container__section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

.main-content__header {
    font-family: Bold888;
    font-size: 20px;
    text-align: center;
}

.main-content__article,
.main-content__article-benefits {
    box-sizing: border-box;
    min-width: 320px;
    max-width: 500px;
    text-align: left;
    padding: 0 30px;
    margin: 20px 0;
}

.content_privacy {
    margin: 0;
}

.main-content__article--full-width {
    max-width: 700px;
}

.main-content__article--full-width--map {
    width: 70%;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 70%;
    position: relative;
    height: 50px;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.main-content__article--center-align {
    text-align: center !important;
}

.main-content__article--left-align {
    text-align: left;
}

.main-content__logo {
    padding-top: 100px;
    position: relative;
}

.main-content__logo::before {
    content: '';
    position: absolute;
    width: 95px;
    height: 95px;
    left: 50%;
    margin-left: -47px;
    margin-top: -95px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.main-content__nav--anchor {
    color: var(--main-color);
    text-decoration: none;
}

.main-content__logo--culture::before {
    background-image: url('../images/culture.png');
}

.main-content__logo--global::before {
    background-image: url('../images/global.png');
}

.main-content__logo--you::before {
    background-image: url('../images/back-you.png');
}

.main-content__logo--power::before {
    background-image: url('../images/people-power.png');
}

.main-content__list-ordered,
.main-content__list-unordered {
    text-align: left;
    list-style-type: none;
}

.main-content__list-bullet {
    margin-bottom: 10px;
}

.main-content__list-bullet::before {
    color: var(--main-color);
    content: "\2022";
}

.main-content__list-number {
    counter-increment: list;
}

/* div.sticky {
    font-size: 100%;
    padding: 25px 25px 25px 70px ;
    position: fixed;
    left: 0;
    bottom: 50px;
    width: 8%;
    background-color: #373266;

  } */

/* Output the numbers using the counter() function, but use a custom color and position the numbers how we want */
.main-content__list-number::before {
    color: var(--black);
    content: counter(list) ".";
}

.main-content__list-bullet::before,
.main-content__list-number::before {
    display: inline-block;
    width: 20px;
    margin-left: -20px
}

/* Small devices (phones, 750px and down) */
@media only screen and (max-width: 768px) {
    .container__header-banner {
        height: 22vh;
    }

    .container__header-logo {
        background-size: 135px;
        width: 150px;
        height: 150px;
    }

    .container__main-header {
        font-size: 20px;
        margin: 20px;
    }

    .horizontal-line {
        margin-bottom: 20px;
        width: 17%;
    }

    .container__section-who-are-we {
        height: auto;
    }

    .container__who-are-we-header {
        font-size: 20px;
    }

    .main-content__article-who p {
        width: auto;
    }

    .main-content__article-benefits {
        max-width: 400px;
        margin: 0;
        padding: 0 20px;
    }

    .main-content__list-unordered {
        margin: 0;
        padding-left: 30px;
    }

    .container__footer {
        font-size: 10px;
    }

}

/* Medium devices (landscape mode, 915px and down)  */
@media (orientation: landscape) and (max-width: 915px) {

    .container__header-banner {
        height: auto;
    }

    .main-content__article-benefits {
        margin: 0;
    }

    .main-content__list-unordered {
        margin: 0;
        padding-left: 30px;
    }
}

/* Small to large devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 1100px) {

    .container__main-header {
        font-size: 20px;
        margin: 20px;
    }

    .horizontal-line {
        margin-bottom: 20px;
        width: 10%;
    }


    .container__section-who-are-we {
        height: auto;
        background: center / contain repeat url('../images/background.jpg');

    }

    .container__who-are-we-header {
        font-size: 20px;
    }

    .main-content__article-who p {
        width: auto;
    }

    .container__section article {
        max-width: 400px;
    }

    .main-content__article-benefits {
        max-width: 400px;
        padding: 0 16px
    }

}


/* Extra large devices (large laptops and desktops, 1500px and up) */
@media only screen and (min-width: 1500px) {
    .main-content__article {
        max-width: 650px
    }

    .container__main-header {
        margin-top: 35px;
        margin-bottom: 25px;
    }

    .horizontal-line {
        margin-bottom: 20px;
        width: 7%;
    }
}

/* Adding Evoke Dialog

        /******* EVOKE DIALOG **************/
       
        .evoke-dialog {
            box-sizing: border-box;
            width: 100%;
            max-width: 790px;
            margin: 0 auto;
            padding: 40px;
            top: 50%;
            transform: translateY(-50%);
            border: 0;
            background-color: var(--evoke-indigo);
            color: #ffffff;
            font-size: 20px;
            font-family: "futura-pt", Sans-serif;
            font-weight: 300; /* This is the Futura Light typeface */
            position: fixed;
           
        }

        .evoke-dialog__container { 
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 90px 50px 50px 50px;
            column-gap: 50px;
            border-bottom: var(--evoke-teal) solid 2px;
        }

        .evoke-dialog__container > div {
            width: 50%;
            
        }

        .evoke-dialog a {
            color: white;
            font-size: 0.95rem;
            font-weight: bold;
            text-decoration: none;
        }
        .evoke-dialog a:hover {
            text-decoration: underline;
        }

        .evoke-dialog__copy p:first-of-type {
            margin-top: 0;
        }

        .evoke-dialog__copy a span {
            display: inline-block;
            border-radius: 50%;
            padding: 13px;
            background-color: var(--evoke-teal);
            margin-left: 14px;
        }

        .evoke-dialog__copy a span svg {
            width: 12px;
            height: 12px;
        }

        .evoke-dialog__brands {
            display: flex;
            justify-content: flex-end;
        }

        .evoke-dialog__brands IMG {
            width: 100%;
            max-width: 235px;
            margin-top: 30px;
        }

        .evoke-dialog__close {
            position: absolute;
            top: 40px;
            right: 40px;
            padding: 10px 14px;
            border-radius: 50%;
            background-color: #ffffff;
            color: var(--evoke-indigo);
            cursor: pointer;
            border: 0;
        }

        body { /* dont include this on your site */
            background-color: white;
        }

        /*** Mobile responsiveness overrides =========== */

        @media (max-width: 780px) {
            .evoke-dialog {
                max-width: 390px;
                padding: 20px;
            }
            .evoke-dialog__container {
                flex-direction: column;
                row-gap: 50px;
                padding: 55px 0 30px 0;
            }
            .evoke-dialog__container > div {
                width: 100%;
            } 

            .evoke-dialog__close { 
                top: 20px;
                right: 20px;
            }

            .evoke-dialog__copy p:first-of-type {
            margin-top: initial;
            
            }
            .evoke-dialog__copy p:first-of-type {
            margin-bottom: 0;
            
            }
            .evoke-dialog__brands {
                margin-bottom: 20px;
            }
        }

        /******* /EVOKE-DIALOG ***************/
        /******* EVOKE TAB *****************/
            .evoke-tab {
                position: fixed;
                left: 0;
                bottom: 50px;
                border: 0;
                height: 80px;
                width: 150px;
                background-color:var(--evoke-indigo);
                padding: 16px 16px 16px 40px;
                animation: 0.5s ease-out 0s 1 evoke-tab-slide-in;
            }
            .evoke-tab IMG {
                
                width: 100%;
                height: auto;
            }

            @keyframes evoke-tab-slide-in {
                0% {
                    transform: translateX(-100%);
                }
                100% {
                    transform: translateX(0);
                }
            }

        /******* /EVOKE TAB ****************/