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

.jeu-rules-details {
    .sri-loc2 {
        .loc2-label {
            margin-left: 81px;
        }
    }
}

.jeu-rules-details-wrapper {
    @include span-columns(8);
    @include shift(2);
    float: none;
    margin-bottom: 60px;

    video {
        width: 100%;
    }
}

.jeu-rules-details-txt1 {
    background-color: $color-grey-background;
}

.jeu-rules-details-txt1-container {
    @include outer-container;
}

.jeu-rules-details-txt1-wrapper {
    @include span-columns(10);
    @include shift(1);
    margin-top: 80px;
    margin-bottom: 80px;
}

.jeu-rules-details-txt1-title {
    color: $color-golden;
    text-transform: uppercase;
    font-family: "Lucien-bold";
    font-size: 1.4em;
    text-align: center;
}

.jeu-rules-details-txt1-subtitle {
    color: $color-grey-light;
    font-size: 0.9em;
    text-align: center;
    margin: 20px auto 40px auto;
    width: 62%;
}

.jeu-rules-details-txt1-txt {
    font-size: 1em;
    font-family: "Lucien-book";
    line-height: 1.4em;
}

.jeu-rules-infos-wrapper {
    @include outer-container;
}

///// LOCATOR ////////////////////////////

.jeu-rules-details-loc {
    margin-left: 180px;
}

///// KNOW THE BASICS ////////////////////

.jeu-rules-details-know-the-basics {
    background-color: #f4f4f4;
    position: relative;
    margin-top: 80px;
    @include outer-container;
}

.jeu-rules-details-know-the-basics-infos {
    @include span-columns(6);
    
    padding: 80px 70px;
}

.jeu-rules-details-know-the-basics-infos-title {
    font-family: "Lucien-bold";
    font-size: 1.4em;
    color: $color-golden;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.jeu-rules-details-know-the-basics-infos-txt {
    display: block;
    font-family: "Lucien-book";
    font-size: 1em;
    text-align: center;
    strong {
        font-family: "Lucien-bold";
    }
}

.jeu-rules-details-know-the-basics-img {
    @include span-columns(6);
    @include omega();
    img {
        display: block;
        width: 100%;
    }
}

.jeu-rules-details-know-the-basics-img-container {
    display: table;
    height: 100%;
    width: 100%;
}

.jeu-rules-details-know-the-basics-img-wrapper {
    display: table-cell;
    vertical-align: middle;
}

///// LE CAS DU ZERO ////////////////////

.jeu-rules-details-caszero {
    position: relative;
}

.jeu-rules-details-caszero-img {
    @include span-columns(6);
    img {
        display: block;
        width: 100%;
    }
}

.jeu-rules-details-caszero-infos {
    @include span-columns(6);
    @include omega();
    position: absolute;
    height: 100%;
    right: 0;
}

.jeu-rules-details-caszero-infos-container {
    display: table;
    height: 100%;
    padding: 80px 70px;
}

.jeu-rules-details-caszero-infos-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.jeu-rules-details-caszero-infos-title {
    font-family: "Lucien-bold";
    font-size: 1.4em;
    color: $color-golden;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.jeu-rules-details-caszero-infos-txt {
    display: block;
    text-align: left;
    font-family: "Lucien-book";
    font-size: 1em;
    strong {
        font-family: "Lucien-bold";
    }
    p
    {
        margin-bottom: 16px;
    }
    ul, ol
    {
        li
        {
            margin-top: 6px;
        }
    }
}

///// ANNOUNCEMENT //////////////////////

.jeu-rules-details-announcement {
    background-color: #f4f4f4;
    position: relative;
}

.jeu-rules-details-announcement-infos {
    @include span-columns(6);
    
    padding: 80px 70px;
}

.jeu-rules-details-announcement-infos-title {
    font-family: "Lucien-bold";
    font-size: 1.4em;
    color: $color-golden;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.jeu-rules-details-announcement-infos-txt {
    display: block;
    text-align: left;
    font-family: "Lucien-book";
    font-size: 1em;
    strong {
        font-family: "Lucien-bold";
    }
}

.jeu-rules-details-announcement-img {
    @include span-columns(6);
    @include omega();
    text-align: center;
    padding: 80px 70px;
    position: absolute;
    height: 100%;
    right: 0;
}

.jeu-rules-details-announcement-img-container {
    display: table;
    height: 100%;
    width: 100%;
}

.jeu-rules-details-announcement-img-wrapper {
    display: table-cell;
    vertical-align: middle;
}

///// ROULETTE //////////////////////////

.jeu-rules-roulette {
    background-color: #243348;
    color: white;
}

.jeu-rules-roulette-separator {
    border: none;
    height: 1px;
    background-color: $color-grey-light;
    width: 100%;
}

.jeu-rules-roulette-container {
    @include outer-container;
    text-align: center;
}

.jeu-rules-roulette-wrapper {
    @include span-columns(10);
    @include shift(1);
    margin-bottom: 60px;
}

.jeu-rules-roulette-title {
    text-align: center;
    border: 1px solid white;
    display: inline-block;
    margin: 80px auto 20px auto;
    text-transform: uppercase;
    font-family: "Lucien-light";
    padding: 15px 30px;
}

.jeu-rules-roulette-subtitle {
    text-align: center;
    color: $color-grey-light;
    margin-bottom: 60px;
}

.jeu-rules-roulette-img {
    img {
        width: 100%;
    }
}

/*.jeu-rules-roulette-img-mobile {
    img {
        display: block;
        width: 100%;
    }
}*/

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

@include tablet-landscape-and-below {

    .jeu-rules-details-loc {
        margin-left: 0;
    }

    .jeu-rules-details {
        .sri-loc2 {
            .loc2-label {
                margin-left: 0;
            }
        }
    }
    .jeu-rules-details-wrapper {
        @include span-columns(10);
        @include shift(1);
    }

    .jeu-rules-details-txt1-subtitle {
        width: 80%;
    }

    ////// KNOW THE BASICS ////////////////////

    .jeu-rules-details-know-the-basics-infos {
        @include span-columns(12);
    }

    .jeu-rules-details-know-the-basics-infos-title {
        margin-bottom: 30px;
    }

    .jeu-rules-details-know-the-basics-img {
        @include span-columns(12);
    }

    ////// LE CAS DU ZERO ////////////////////

    .jeu-rules-details-caszero-img {
        @include span-columns(12);
        float: none;
    }
    .jeu-rules-details-caszero-infos {
        @include span-columns(12);
        position: relative;
        float: none;
        padding: 60px 0;
        margin-top: 0;
    }

    ///// ANNOUNCEMENT //////////////////////

    .jeu-rules-details-announcement-infos {
        float: none;
        margin: 0;
        width: 100%;
    }
    .jeu-rules-details-announcement-img {
        float: none;
        margin: 0;
        padding-top: 0;
        position: relative;
        width: 100%;
    }
    .jeu-rules-details-announcement-infos-title {
        margin-top: 40px;
    }
}

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

@include tablet-portrait-and-below {
    .jeu-rules-details-know-the-basics-infos-txt {
        font-size: 1.4em;
    }

    .jeu-rules-roulette-wrapper {
        @include span-columns(12);
        @include shift(0);
    }
    .jeu-rules-roulette-title {
        margin-top: 40px;
        font-size: 3vw;
    }
    .jeu-rules-roulette-subtitle {
        padding: 0 20px;
        font-size: 2.6vw;
    }
}

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

@include mobile-landscape-and-below {
    .jeu-rules-details-wrapper {
        @include span-columns(12);
        @include shift(0);
        margin-bottom: 0;
    }
    .jeu-rules-details-txt1-subtitle {
        width: 100%;
    }
    .jeu-rules-details-know-the-basics-infos {
        padding: 30px;
    }
    .jeu-rules-details-know-the-basics-infos-txt {
        font-size: 1em;
    }

    ///// CAS DU ZERO ////////////////////
    .jeu-rules-details-caszero-img {
        width: 100%;
    }
    .jeu-rules-details-caszero-infos {
        width: 100%;
        position: relative;
    }
    .jeu-rules-details-caszero-infos-container
    {
        display: block;
        padding: 30px;
    }
    .jeu-rules-details-caszero-infos-wrapper {
        display: block;
    }

    ///// ANNOUNCEMENT ////////////////////

    .jeu-rules-details-announcement-infos {
        padding: 30px;
        width: 100%;
    }
    .jeu-rules-details-announcement-img {
        padding: 0 30px 30px;
        position: relative;
        width: 100%;
        img {
            width: 80%;
            margin: 0 auto;
            padding-bottom: 40px;
        }
    }
    .jeu-rules-details-announcement-img-container {
        display: block;
    }

    ///// ROULETTE /////////////////////////

    .jeu-rules-roulette-title {
        font-size: 3.8vw;
    }
    .jeu-rules-roulette-subtitle {
        font-size: 3.4vw;
    }

}