///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.casino-pass-container {

}

/* HEADER */
.casino-pass-header {
    text-align: center;
    height: 440px;
    width: 100%;
    display: table;
    position: relative;
    overflow: hidden;

    picture {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 480px;
        overflow: hidden;
        z-index: -1;

        img {
            position: absolute;
        }

        @media screen and (max-width: 481px) {
            img {
                margin-left: -240px;
                left: 50%;
            }
        }
        @media screen and (min-width: 481px) {
            img {
                left: 50%;
                margin-left: -512px;
                height: 100%;
            }
        }
        @media screen and (min-width: 1025px) {
            img {
                width: 100%;
                height: auto;
                margin-left: 0;
                left: 0;
            }
        }
    }
}

.casino-pass-header-wrapper {
    display: table-cell;
    padding: 0 40px;
    vertical-align: middle;
}

.casino-pass-header-title {
    color: white;
    text-transform: uppercase;
    font-family: "lucien-light";
    font-size: 4em;
    margin-top: 0;
    vertical-align: center;
}

.casino-pass-header-subtitle {
    color: white;
    font-size: 1.6em;
    margin-top: 20px;
}

/* end header */

/* WRAPPER */
.casino-pass-wrapper {
    @include outer-container;
}

.casino-pass-info {
    text-align: center;
    @include span-columns(8);
    @include shift(2);
    margin-top: 60px;
    margin-bottom: 80px;
}

.casino-pass-type {
    @include span-columns(10);
    @include shift(1);

    &.casino-pass-silver {
        margin-bottom: 80px;
    }
}

.casino-pass-type-wrapper {
    border: 1px solid $color-golden;
    text-align: center;
    padding: 40px;
}

.casino-pass-type-title {
    font-family: "lucien-bold";
    text-transform: uppercase;
    font-size: 1.6rem;
    color: $color-golden;
    padding: 0;
    margin-bottom: 20px;
}

.casino-pass-type-info {
    margin-bottom: 60px;
}

.casino-pass-type-advantages {
    font-family: 'lucien-light';
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.casino-pass-type-image {
    @include span-columns(5);
    img {
        width: 100%;
    }
}

.casino-pass-type-list {
    @include span-columns(5);
    @include shift(1);
    list-style: none;
    text-align: left;
    margin-top: 4vw;
}

.casino-pass-type-list-item {
    margin-bottom: 40px;
}

.casino-pass-icon-infos-wrapper {
    display: inline-block;
    text-align: center;
    float: left;
    width: 60px;
    height: 80px;
    margin-right: 35px;
    .icon-svg {
        display: inline-block;
        height: 80px;
        width: 42px;
        svg {
            fill: $color-golden;
        }
    }
    .icon-glass {
        width: 68px;
    }
}

.casino-pass-icon-infos-wrapper-promo {
    display: inline-block;
    text-align: center;
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 35px;
    .wrapper-promo-circle {
        display: inline-block;
        border: 1px solid $color-golden;
        $iconwidth: 55px;
        border-radius: $iconwidth;
        width: $iconwidth;
        height: $iconwidth;
        text-align: center;
        span {
            line-height: $iconwidth;
            color: $color-golden;
            font-family: 'lucien-light';
        }
        &.wrapper-promo-circle-decal {
            margin-left: 8px;
        }
    }
}

.casino-pass-type-list-item-title {
    font-family: "lucien-bold";
    text-transform: uppercase;
    font-size: 1.1rem;
    color: $color-golden;
    padding: 0;
}

.casino-pass-type-list-item-txt {
    font-size: 1em;
}

.casino-pass-type-notice {
    background: $color-grey-background;
    max-height: 50px;
    overflow: hidden;
    margin-top: 2px;
    cursor: pointer;
    text-align: center;
    transition: all 200ms linear;
    transition-timing-function: ease-in-out;

    .casino-pass-type-notice-btn {
        display: inline-block;
        p {
            font-family: 'lucien-regular';
            font-size: 1.2rem;
            text-transform: uppercase;
            text-align: center;
            line-height: 50px;
            display: inline-block;
        }
        .icon-svg {
            display: inline-block;
            width: 20px;
            height: 10px;
            margin-left: 20px;
        }
    }

    .casino-pass-type-notice-content {
        padding: 20px;
        text-align: left;
        p {
            font-size: 1em;
        }
        ul {
            list-style: none;
            li {
                margin-top: 20px;
            }
        }
    }

    &.large {
        max-height: 999px;
        .casino-pass-type-notice-content {
            display: block;
        }
    }
}

.casino-pass-upgrade {
    @include span-columns(12);
    text-align: center;
    margin: 80px 0 40px 0;
    h2 {
        font-family: 'lucien-light';
        font-size: 1.5rem;
        text-transform: uppercase;
        width: 45%;
        display: block;
        margin: 0 auto;
    }
}

.casino-pass-upgrade-icon {
    display: inline-block;
    margin-top: 30px;
    height: 90px;
    width: 75px;
    svg {
        fill: $color-golden;
    }
}

/* -- end wrapper */

@include desktop-xl {
    .casino-pass-upgrade {
        h2 {
            width: 35%;
        }
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .casino-pass-header-title {
        font-size: 3em;
        
        br
        {
          display: none;
        }
    }
    .casino-pass-header-subtitle {
        font-size: 1.2em;
    }
    .casino-pass-type-image {
        @include span-columns(12);
        img {
            display: inline-block;
            width: 40%;
        }
    }

    .casino-pass-type-list {
        @include span-columns(10);
        margin-top: 20px;
    }

    .casino-pass-icon-infos-wrapper, .casino-pass-icon-infos-wrapper-promo {
        height: 80px;
    }

    .casino-pass-type-notice {
        p {
            font-size: 0.8em !important;
        }
    }

    .casino-pass-upgrade {
        h2 {
            width: 60%;
        }
    }

}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .casino-pass-header-wrapper {
      padding: 0 20px;
    }
    .casino-pass-header-title {
        font-size: 2.7em;
    }
    .casino-pass-type-list-item {
        text-align: center;
    }
    .casino-pass-icon-infos-wrapper, .casino-pass-icon-infos-wrapper-promo {
        margin-right: 0;
        float: none;
    }
    .casino-pass-type-list-item-title {
        font-size: 1rem;
    }
    .casino-pass-type-image {
        img {
            width: 100%;
        }
    }
    .casino-pass-upgrade {
        h2 {
            width: 100%;
        }
    }
}