* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a img {
    border: 0;
}


@font-face {
    font-family: "Frutiger LT Arabic";
    src: url("../fonts/frutiger-lt-arabic/FrutigerLTArabic45Light.ttf");
}

body {
    height: 100%;
    font-family: "Frutiger LT Arabic";

}

body.interne {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.content_box h1,
.content_box p {
    color: #212529 !important
}

.content_box_white h1,
.content_box_white p,
.content_box_white h2 {
    color: #fff !important
}

.content_box p {
    margin-bottom: 0
}

#forMobile {
    display: none;
}

#accordionExample {
    margin: 10%;
    margin-bottom: 40px
}

#accordionExample h1 {
    color: #fff
}

.oneTheme {
    float: left;
    border-radius: 50%;
    background: #fff;
    padding: 50px 10px;
    text-align: center;
    width: 30%;
    margin: 1%;
    max-width: 250px;
    height: 250px
}

.oneTheme font {
    width: 100%;
    text-align: center;
    font: 20px Frutiger LT Arabic;
    color: #454545;
    float: left;
    margin-top: 25px
}

body.quiz {
    height: 100%;
    background: url("../img/bg-quiz.jpg") center top no-repeat;
    background-size: cover
}

a .oneTheme:hover {
    opacity: 0.8
}

.container {
    text-align: center
}

.container h1 {
    text-align: center;
    color: #fff;
    font: 36px Frutiger LT Arabic;
    margin-top: 5px
}

#container {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.txt-desc-one {
    color: #FFF;
    text-align: center;
    font-family: "Frutiger LT Arabic";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-top: 80px;
}

@media screen and (max-width: 767.98px) {
    .txt-desc-one {
        padding-top: unset;
    }
}

.txt-desc-two {
    color: #FFF;

    text-align: center;
    /* H2 */
    font-family: "Frutiger LT Arabic";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.card-header,
#accordion .collapse,
.card-body {
    border: none;
    background: #f2f2f2
}

.btn-link {
    background: #f2f2f2 url(../img/moins.png) 99% 10px no-repeat;
    white-space: inherit;
    text-align: left;
    color: #000;
    min-height: 60px;
    padding-right: 60px !important
}

.btn-link:hover,
.btn-link:focus {
    color: #000;
    text-decoration: none
}

#accordion .collapsed {
    background: #f2f2f2 url(../img/plus.png) 99% 10px no-repeat
}

#accordion .collapse {
    background: url(../img/moins.png) top right no-repeat
}

.card-header .btn-link {
    width: 100%;
    padding: 0
}

.card {
    border-radius: 0;
    border: none;
    margin-top: 20px
}

.card-body {
    padding: 0 0 1.25rem 1.25rem;
    color: #0f6987
}

.card-body span.dateGain {
    color: #000
}

.contenu {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1300px;
}

.contenuAvantages {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 900px;
    text-align: center
}

header #part1 {
    float: left;
    width: 45%;
    text-align: center
}

header #part1 img {
    max-width: 240px
}

body.quiz #logo {
    margin: 20px 0 0 70px;
    position: absolute
}

body.quiz .contenu {
    max-width: 1100px
}

header #logo {
    width: 100%;
    float: left;
    margin-bottom: 20px
}

header h1 {
    text-align: center;
    font: 24px/32px Frutiger LT Arabic;
    color: #fff
}

header h1 span {
    font: 28px Frutiger LT Arabic;
    color: #fbe256
}

header h2 {
    color: #fff;
    font: italic 28px Frutiger LT Arabic;
    margin-top: 40px;
    background: url("../img/arrow.png") bottom right no-repeat;
    padding-bottom: 60px;
}

.slider,
.slider2 {
    width: 90%;
    max-width: 900px;
    position: absolute;
    float: right;
    margin: 1% 5% 0 0;
    text-align: center;
    right: 0
}

.slider_slides-cont,
.slider_slides-cont2 {
    position: relative;
    padding-bottom: 49.25%;
}

.slider_slide,
.slider_slide2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.slider_slide:first-child,
.slider_slide2:first-child {
    opacity: 1;
    visibility: visible;
}

.slider_slide.slider_slide--faded-out,
.slider_slide2.slider_slide2--faded-out {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s linear
}

.slider_slide.slider_slide--faded-in,
.slider_slide.slider_slide--faded-in {
    opacity: 1;
    visibility: visible;
    transition: 0.5s linear 0.5s
}

.slider_slide>img {
    max-width: 100%
}

.slider_nav {
    padding: 15px;
    display: none
}

.slider_pagination {
    z-index: 100;
    position: relative;
    display: none
}

.slider_pagination_btn {
    display: inline-block;
    padding: 6px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: transparent;
}

.slider_pagination_btn:before {
    content: '';
    display: inline-block;
    padding: 6px;
    border-radius: 100%;
    background-color: #ccc;
}

.slider_pagination_btn:hover:before {
    background-color: #aaa;
}

.slider_pagination_btn:focus:before {
    background-color: #777;
}

.slider_pagination_btn.slider_pagination_btn--sel:before {
    background-color: #fbe256
}

.slider_progress-bar {
    width: 100%;
    height: 7px;
    background-color: #fff;
}

.slider_progress-bar_bar {
    width: 0;
    height: 100%;
    background-color: #555;
}

.slider_progress-bar_bar--moving {
    width: 100%;
    transition: 3.5s linear;
}


#menuToggle {
    display: block;
    position: fixed;
    top: 50px;
    left: 50px;

    z-index: 1;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 80%;
}

#menuToggle a {
    text-decoration: none;
    color: #232323;

    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: #e44499;
}


#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */

    -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: #fff;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
    position: fixed;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;

    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    height: 110%
}

#menu li {
    padding: 10px 0;
    font-size: 22px;
    font-family: "Frutiger LT Arabic";
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked~ul {
    transform: none;
}

#allBlocForm {
    text-align: center;
    position: relative;
    z-index: 1
}

.blocForm {
    background: #fff;
    margin: 1% 2% 2% 2%;
    width: 40%;
    padding: 20px;
    position: relative;
    border-radius: 15px;
    text-align: center;
    display: inline-block
}

.titleForm {
    position: absolute;
    margin-top: -8%;
    padding: 0 10px;
    border-radius: 50px;
    color: #fff;
    background: #e44499;
    font: 24px "Frutiger LT Arabic";
    text-transform: uppercase;
    width: 70%;
    left: 15%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 6px #cfcfcf;
}

.titleForm img {
    position: relative;
    top: -4px;
    right: 15px
}

.titleForm span {
    line-height: 70px;
    height: 70px
}

.blocForm h3 {
    color: #333333;
    font: 20px "Frutiger LT Arabic";
    margin: 50px 0 20px 0;
    float: left;
    width: 100%;
}

.mentiontodo {
    color: #333;
    font: 14px "Frutiger LT Arabic";
    margin: 20px 0
}

.blocForm a {
    background: #fbe256;
    color: #333;
    border-radius: 50px;
    padding: 20px;
    font: 24px "Frutiger LT Arabic";
    text-transform: uppercase;
    text-decoration: none;
    width: 70%;
    margin-left: 15%;
    display: block
}

.blocForm a:hover {
    background: #e44499;
    color: #FFFFFF
}

#blocWinners {
    background: url("../img/bg_vert.png") top center no-repeat;
    background-size: cover;
    width: 100%;
    padding: 300px 0 50px 0;
    position: relative;
    float: left;
    margin-top: -8%;
    min-height: 500px
}

.oneWinner {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 20px;
    float: left;
    margin: 2%;
    width: 28%;
    position: relative
}

#gift {
    background: url("../img/gift.png") no-repeat;
    position: absolute;
    top: 160px;
    left: 0;
    width: 281px;
    height: 289px;
}

#blocAvantages #gift {
    right: 0;
    top: 0;
    left: inherit
}

.winnersname {
    font: 20px Frutiger LT Arabic;
    text-transform: uppercase;
    color: #000;
    float: left;
    width: 100%;
    margin: 10px 0;
}

.winnersdate {
    font-style: italic;
    color: #000;
    font: italic 18px Frutiger LT Arabic;
    float: left;
    width: 100%
}

.price {
    float: left;
    width: 100%;
    padding: 10px 0;
    border-top: solid 3px #52d3bb;
    border-bottom: solid 3px #52d3bb;
    font: 20px Frutiger LT Arabic;
    text-transform: uppercase;
    margin-top: 20px
}

.picto {
    background: url("../img/star.png") no-repeat;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 73px;
    height: 83px
}

#linkForAll {
    float: right;
    margin: -4% 6% 20px 0;
}

#linkForAll a {
    background: #e44499 url(../img/to.png) 90% 6px no-repeat;
    border-radius: 30px;
    color: #fff;
    text-transform: uppercase;
    font: 18px "Frutiger LT Arabic";
    text-decoration: none;
    padding: 12px 50px 12px 25px;
}

#linkForAll a:hover {
    background: #fbe256 url(../img/to_black.png) 90% 6px no-repeat;
    color: #000
}

#footer {
    background: #373737;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font: 16px Frutiger LT Arabic;
    float: left;
    width: 100%
}

.forMob {
    display: none
}

nav {
    z-index: 3;
    position: relative
}

#partimg1 {
    margin: 5px 1% 5px 1%;
    width: 47%;
    padding: 20px 0px 0px 20px;
    position: relative;
    border-radius: 15px;
    text-align: left;
    display: inline-block;
}


#partimg2 {
    margin: 5px 1% 5px 1%;
    width: 47%;
    padding: 20px 20px 0px 0px;
    position: relative;
    border-radius: 15px;
    text-align: right;
    display: inline-block;
}

.imgGauche {
    width: 200px;
}

.imgDroite {
    width: 430px;
}

#partForSubscribers {
    background: #fff;
    margin: 5px 2% 0% 2%;
    width: 40%;
    padding: 50px;
    position: relative;
    border-radius: 15px;
    text-align: center;
    display: inline-block;
    float: left;
}

.msgwelcome {}

#partForSubscribers #logo {
    margin-top: -90px
}

#partForSubscribers #logo img {
    max-width: 240px
}

header #partForSubscribers h1 {
    text-align: center;
    font: 22px Frutiger LT Arabic;
    margin-bottom: 5px;
    color: #1C1C1C;
    direction: rtl;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#partForSubscribers p {
    color: #1C1C1C;
    font: 18px Frutiger LT Arabic;
    direction: rtl;
    margin-bottom: 20px;
    float: left;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#partForSubscribers h4 {
    color: #1C1C1C;
    font: 14px Frutiger LT Arabic;
    direction: rtl;
    margin-top: 20px;
    float: left;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

input.zoneText {
    border: solid 1px #909090;
    padding: 20px;
    float: left;
    width: 100%;
    border-radius: 30px;
    font: 16px Frutiger LT Arabic;
    color: #333;
    text-align: center
}

#partForSubscribers form {
    float: left;
    width: 74%;
    margin-left: 13%
}

#partForSubscribers font {
    float: left;
    width: 100%;
    font: 14px Frutiger LT Arabic;
    color: #333;
    margin-top: 10px
}

input.btSubmit {
    background: #fbe256;
    color: #333;
    border-radius: 50px;
    padding: 22px;
    font: 24px "Frutiger LT Arabic";
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    display: block;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 3px 6px #cfcfcf;
    float: left;
    margin-bottom: 20px;
    border-radius: 24px;
    background: #FFF;
}

input.btSubmitInscription {
    background: #223C79;
    color: #FFF;
    border-radius: 16px;
    padding: 10px 16px;

    font: 18px "Frutiger LT Arabic";
    text-decoration: none;
    width: 100%;
    display: block;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    float: left;
    margin-bottom: 10px;
    width: 100%;
    direction: rtl;
}

input.btSubmitQuata {
    color: #333;
    padding: 22px;
    font: 24px "Frutiger LT Arabic";
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    display: block;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    float: left;
    margin-bottom: 20px;
    border-radius: 24px;
    background: #FFF;

}

input.btSubmitQuata:hover {
    background: #223C79;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}


input.btSubmit:hover {
    background: #e44499;
    color: #FFFFFF
}

#blocInstructions {
    float: left;
    width: 35%;
    padding-top: 55px;
    margin-left: 10%
}

.oneInstruction {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 50px;
    margin-bottom: 20px;
    padding-left: 40px;
    direction: rtl;

    color: #1C1C1C;

    font-family: "Frutiger LT Arabic";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.number {
    /*
    =position: absolute;
    font: 80px Frutiger LT Arabic;
    color: #e44499;
    right: -20px;
    top: 5px;
    -webkit-text-stroke: 2px #fff;
    text-stroke: 2px #fff;
    */
    position: absolute;
    font-family: "Frutiger LT Arabic";
    width: 40px;
    height: 40px;
    background-color: #EA6032;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;

    font-size: 16px;

    top: 2px;
    right: -30px;
    top: 15px;
}

#blocAvantages {
    width: 100%;
    padding: 30px 0;
    position: relative
}


.header__center {
    color: #FFF;
    font-family: "Frutiger LT Arabic";
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    align-items: center;
    width: 70%;
    margin: auto
}

.headerclub {
    color: #EA6032;
    font-family: "Frutiger LT Arabic";
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    width: 70%;
    margin: auto
}

.header__center::before,
.header__center::after {
    content: "";
    display: block;
    /*  height: 3px;
    background-color: currentColor; */
}

.oneAvantage {
    width: 31%;
    margin: 50px 1%;
    padding: 2%;
    background: #EA6032;
    text-align: center;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font: 24px "Frutiger LT Arabic";
    float: left;
    min-height: 180px
}

.twoAvantage {
    width: 31%;
    margin: 50px 1%;
    padding: 2%;
    background: #339E53;
    text-align: center;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font: 24px "Frutiger LT Arabic";
    float: left;
    min-height: 180px
}

.threeAvantage {
    width: 31%;
    margin: 50px 1%;
    padding: 2%;
    background: #F2B62C;
    text-align: center;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    font: 24px "Frutiger LT Arabic";
    float: left;
    min-height: 180px
}

.oneAvantage font,
.twoAvantage font,
.threeAvantage font {
    width: 100%;
    display: flex;
    height: 50px;
    vertical-align: middle;
    align-content: space-around;
    text-align: center;
    justify-content: space-around;
    align-items: center;
}

.oneAvantage font strong,
.twoAvantage font strong,
.threeAvantage font strong {
    display: contents;
    font-size: 32px !important;
    font: 28px "Frutiger LT Arabic";
}

.oneAvantage font span,
.twoAvantage font span,
.threeAvantage font span {
    display: contents;
    font-size: 32px !important;
    color: #223C79;
    font: 28px "Frutiger LT Arabic";
}

.oneAvantage img,
.twoAvantage img,
.threeAvantage img {
    margin-bottom: 15px
}

.row {
    justify-content: center !important;
}

.blocDetail {
    display: inline-block;
    width: 22%;
    margin: 0 3%;
    text-align: left;
    font-size: 18px;
    border-right: solid 1px #eee;
}

.blocDetail:last-child {
    border: none
}

.blocDetail span {
    font: 28px "Frutiger LT Arabic";
    color: #e44499
}

#forMobile .blocDetail {
    display: inline-block;
    width: 100%;
    margin: 3% 0;
    text-align: left;
    font-size: 18px;
    border-right: none;
    border-bottom: solid 1px #eee;
    padding: 3% 0
}

.oneBlocQuota {
    display: table;
    width: 40%;
    margin: 0 auto;
    float: none;
    background: #f2f2f2;
    padding: 2%;
    margin-bottom: 2%
}

.imgQ {
    float: left;
    width: 40%;
    margin-right: 3%
}

.imgQ img {
    max-width: 100%
}

.desQ {
    float: left;
    width: 57%;
    font: 18px Frutiger LT Arabic;
    color: #000
}

.desQ h4 {
    font-family: MTNBrighterSansM;
    color: #000;
    font-size: 24px;
    margin-bottom: 20px
}

#pageInterne .desQ p {
    min-height: 60px;
    font-size: 16px
}

.oneG {
    float: left;
    color: #000;
    text-align: left;
    text-transform: uppercase;
    width: 50%;
    font-size: 22px;
    margin: 2% 0 5% 0;
    position: relative;
    font-family: Frutiger LT Arabic
}

.oneForJ font.dateG {
    text-transform: none;
    font: 18px Frutiger LT Arabic
}

font.dateG {
    margin-bottom: 15px;
    display: block;
}

span.color2 {
    color: #e44499;
    font: 18px Frutiger LT Arabic
}

span.colorOneShot {
    color: #EA6032;
    font-family: "Frutiger LT Arabic";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}

span.colorDaily {
    color: #F2B62C;
    font-family: "Frutiger LT Arabic";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}

.oneG a img {
    background: none;
}

.oneG img {
    margin: 10px 0;
    position: relative;
}

.oneG a.linkInterne {
    text-transform: none;
}

.type2 img {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: no-drop;
}

.lock {
    background: url(../img/lock.png) center center no-repeat;
    position: absolute;
    top: 15%;
    height: 100%;
    width: 90%;
    z-index: 10;
    cursor: no-drop;
}

#zonetimeCount {
    position: absolute;
    width: 87%;
    text-align: center;
    margin-top: -80px;
    color: #ee0000;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 0;
    font-size: 18px;
    text-transform: none;
}

.isDisabled {
    cursor: no-drop;
    background: #ccc !important;
    z-index: 20;
    position: relative;
}

a.linkInterne {
    background: #ffcc00;
    color: #000;
    padding: 7px 20px;
    margin: 10px 0 20px 0;
    display: inline-block;
    border-radius: 23px;
    width: 100%
}

a.linkInterne:hover {
    background: #ffe05c;
    text-decoration: none
}

.type2 {
    position: relative;
}

.oneForJ {
    width: 31%;
    margin: 0 1%;
    padding: 2%;
    border-radius: 20px;
    background: rgba(34, 60, 121, 0.45);
}

.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.p-2 {
    padding: 0 !important;
    width: 100%;
    text-align: center
}

.question_title h1 {
    font: 24px "Frutiger LT Arabic";
    color: #000
}

.left_side_img img {
    border-radius: 10px
}

#h1Page {
    position: absolute;
    width: 100%;
    bottom: -80px
}

.modal-confirm {
    color: #636363;
    width: 40%;
    max-width: 450px;
    font-size: 16px;
    margin: 0 auto;
}

.modal {
    top: 10% !important
}

.modal-confirm .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
}

.modal-confirm .modal-header {
    border-bottom: none;
    position: relative;
}

.modal-confirm h4 {
    text-align: center;
    font-size: 26px;
    margin: 30px 0 -15px;
}

.modal-confirm .form-control,
.modal-confirm .btn {
    min-height: 40px;
    border-radius: 3px;
}

.modal-confirm .close {
    position: absolute;
    top: -5px;
    right: -5px;
}

.modal-confirm .modal-footer {
    border: none;
    text-align: center;
    border-radius: 5px;
    font-size: 13px;
}

.modal-confirm .icon-box {
    color: #fff;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -70px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    z-index: 9;
    background: #82ce34;
    padding: 15px;
    text-align: center;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.modal-confirm .icon-box i {
    font-size: 58px;
    position: relative;
    top: 3px;
}

.modal-confirm.modal-dialog {
    margin-top: 80px;
}

.modal-confirm .btn {
    color: #fff;
    border-radius: 4px;
    background: #82ce34;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    border: none;
    width: 80%;
    margin: 0 auto;
}

.modal-confirm .btn:hover,
.modal-confirm .btn:focus {
    background: #6fb32b;
    outline: none;
}

.trigger-btn {
    display: inline-block;
    margin: 100px auto;
}

.modal-backdrop.show {
    opacity: .8 !important;
}

@media only screen and (max-width:1600px) {
    .slider {
        max-width: 800px;
        margin: 0 2% 0 0
    }

    body.quiz #logo img {
        max-width: 200px
    }

}

@media only screen and (max-width:1500px) {
    .slider {
        max-width: 650px;
        margin: 8% 2% 0 0
    }

    .slider_slide>img {
        max-width: 100%;
        max-height: 340px;
    }
}

@media only screen and (max-width:1400px) {
    body.quiz #logo {
        margin: 0;
        position: relative;
        width: 100%;
        text-align: center;
    }

    body.quiz #logo img {
        max-width: 200px
    }
}

@media only screen and (max-width:1024px) {
    .blocForm {
        width: 44%
    }

    .titleForm {
        font-size: 24px
    }

    .blocForm h3 {
        font-size: 22px
    }

    header #part1 {
        width: 100%
    }

    body {
        background-position-x: 16%;
    }

    .slider {
        position: relative;
        width: 100%;
        margin: -15% 2% 5% 0
    }

    .slider_pagination {
        display: none
    }

    .slider_slide>img {
        max-height: 300px;
    }

    header h2 {
        background: none
    }

    #gift {
        display: none
    }
}

@media only screen and (max-width:940px) {
    .oneForJ {
        width: 96%;
        margin: 2%;

        padding: 2%;

        text-align: center;
        border-radius: 20px;
        background: rgba(34, 60, 121, 0.45);
    }

    #partimg1 {
        width: 45%;
        margin: 10% 2% 0 2%;
    }

    #partimg2 {
        width: 45%;
        margin: 5% 2% 0% 2%;
        padding: 0;
    }

    .imgGauche {
        width: auto;
    }

    .imgDroite {
        width: 190px;
    }

    #partForSubscribers {
        width: 96%;
        margin: 10px 2% 0 2%;
    }

    #blocInstructions {
        width: 90%;
        margin: 10% 2% 4% 2%;
        padding: 0;
    }

    .oneAvantage,
    .twoAvantage,
    .threeAvantage {
        width: 96%;
        margin: 2%;
        padding: 2%;
    }

    header.interne {
        float: left;
        width: 100%;

    }

    #blocAvantages {
        padding-top: 30px
    }

    .header__center {
        display: inline-block;
        margin-bottom: 30px
    }

    #logo img {
        max-width: 200px
    }

    .slider_slide>img {
        max-height: 200px;
    }

    .blocForm {
        width: 96%;
        margin: 0 2% 15% 2%;
    }

    .titleForm {
        font-size: 22px;
        width: 94%;
        left: 3%;
        margin-top: -15%;
        padding: 0px 10px
    }

    .titleForm img {
        position: relative;
        top: -4px;
        right: 5px;
        max-width: 30px;
    }

    .slider {
        margin: -15% 2% 25% 0;
    }

    #blocWinners {
        padding: 180px 0 50px 0;
        margin-top: -30%;
    }

    .oneWinner {
        width: 96%;
        margin-bottom: 20px
    }

    .picto {
        background-size: 80%;
        right: 0;
        width: 60px
    }

    #linkForAll {
        float: right;
        margin: -4% 6% 40px 0;
    }

    .blocForm a {
        background: #fbe256;
        color: #333;
        border-radius: 50px;
        padding: 20px;
        font: 24px "Frutiger LT Arabic";
        text-transform: uppercase;
        text-decoration: none;
        width: 100%;
        margin-left: 0%;
        display: block;
    }

    #menuToggle {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    h1 br {
        display: none
    }

}

@media only screen and (max-width:560px) {
    #blocWinners {
        padding: 140px 0 50px 0;
    }

    .winnersname,
    .price {
        font-size: 22px
    }

    header h1,
    header h1 span {
        font-size: 24px;
        line-height: 28px
    }

    header h2 {
        color: #fff;
        font: italic 24px Frutiger LT Arabic;
        margin-top: 30px;
    }

    .content_box h1 {
        font-size: 26px !important
    }
}

.line_box {
    display: flex;
    margin-bottom: 40px;
}

.text_circle {
    flex: 1;
    text-align: center;
    position: sticky;
}

.text_circle:after {
    background-color: grey;
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    right: 0;
    width: 50%;
    z-index: -1;
}

.stav_projektu .text_circle:after,
.stav_projektu .text_circle:before {
    background-color: #D1D5DB;
}

.line_box h4 {
    color: #223C79;
    font-weight: bold;
}

.line_box h4,
.line_box p {
    font-size: 12px;
    margin-bottom: 0;
    padding: 0 5px;
}

.subline {
    position: absolute;
    right: -25px;
    bottom: -43%;
}

.subline:before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    bottom: 14px;
    right: 15px;
    background-color: #223C79;
    border-radius: 50%;
    top: -25px;
}

.subline h6 {
    margin-bottom: 0;
}

.timeline {
    margin: 40px 0;
}

.text_circle.done:after,
.text_circle.done+.text_circle:before,
.stav_projektu .text_circle.done:after,
.stav_projektu .text_circle.done+.text_circle:before {
    background-color: #223C79;
}

.text_circle.sub:after {
    background-color: #223C79;
}

.text_circle:not(:first-child):before {
    bottom: 1.25em;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    left: 0;
    width: 50%;
    z-index: -1;
    background-color: #D1D5DB;
}

.stav_projektu .text_circle:not(:first-child):before {
    background-color: #D1D5DB;
}

.text_circle:last-child:after {
    width: 0;
}

.circle {
    height: 100%;
}

.tvar {
    height: 40px;
    width: 40px;
    border: 2px solid #e44499;
    display: flex;
    position: relative;
    border-radius: 100%;
    top: -43px;
    margin: 3px auto;
    background-color: #fff;
}

.tvar span {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    color: #fff;
    padding-top: 5px;
    color: #666
}


.tvar span.activeSpan {
    background-color: #223C79;
    color: #fff;
}

.tvar span.activeSpan::before {
    content: "\f00c";
    /* Unicode for Font Awesome check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    position-area: center;
    color: #fff;
    font-size: 1.2rem;
}

.tvar span.NoactiveSpan {
    background-color: #fff;
    color: #fff;
}

.tvar span.NoactiveSpan::before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    position-area: center;
    color: #223C79;
    font-size: 0.85rem;
}

.stav_projektu .tvar {
    border: 2px solid #223C79;
}

.stav_projektu .done .tvar,
.stav_projektu .sub .tvar {
    border: 0px solid #223C79;
}

.subline h6 {
    color: #e44499;
}

.timeline .card-header:hover {
    background-color: #ececec;
    cursor: pointer;
}

/* iPhone X ----------------------------------- */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    .subline:before {
        top: -43px;
    }
}

@media only screen and (device-width : 812px) and (device-height : 375px) and (orientation : landscape) and (-webkit-device-pixel-ratio : 3) {
    .subline:before {
        top: -31px;
    }
}

/* iPad portrait ----------------------------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .subline:before {
        top: -29px;
    }
}

/* mobile width till 767px ----------------------------------- */
@media (max-width: 767px) {
    .subline:before {
        top: -30px;
    }
}

/* Portrait iPad Pro */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    .subline:before {
        top: -23px;
    }
}

/* mobile width till 480px ----------------------------------- */
@media (max-width: 480px) {
    .subline:before {
        top: -43px;
    }
}