@import url(https://fonts.googleapis.com/css?family=Lobster);
@font-face {font-family: 'FFDINWebProMedium';src: url('webfonts/301BC8_5_0.eot');src: url('webfonts/301BC8_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/301BC8_5_0.woff2') format('woff2'),url('webfonts/301BC8_5_0.woff') format('woff'),url('webfonts/301BC8_5_0.ttf') format('truetype');}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "FFDINWebProMedium", sans-serif;
}

.p-0 {
    padding: 0px;
}
.mb-40 {
    margin-bottom: 40px!important;
}

.my-container{margin:0 auto; max-width: 1280px;}
.stop{clear:both;}
.stop.landscape-tablette{display:none;}

.contenu_popup_2{
    background-color: #FFF !important;
    color:#000 !important;
}
header {
    background-size: cover!important;
}

/* **** MOBILE **** */

@media (min-width:320px){
    
    .my-container{padding: 0 15px;}
    
    /* HEADER */
    header{height: 485px;}
    header.background1{background: #FFF url(../images_sl/index/fond_1.jpg) no-repeat scroll center top / auto 1024px;}
    header.background2{background: #FFF url(../images_sl/index/fond_2.jpg) no-repeat scroll center top / auto 1024px;}
    header.background3{background: #FFF url(../images_sl/index/fond_3.jpg) no-repeat scroll center top / auto 1024px;}
    header.background4{background: #FFF url(../images_sl/index/fond_4.jpg) no-repeat scroll center top / auto 1024px;}
    header.background5{background: #FFF url(../images_sl/index/fond_5.jpg) no-repeat scroll center top / auto 1024px;}
    header.background6{background: #FFF url(../images_sl/index/fond_6.jpg) no-repeat scroll center top / auto 1024px;}
    
    header .bloc-connexion{display:none;}
    
    header img{
        display:block;
        width: 220px;
        padding-top: 15px;
        margin: 0 auto;
    }
    
    header h1{
        font-size: 36px;
        color: #FFF;
        padding-top: 50px;
        width: 100%;
        text-align:center;
        margin-bottom: 25px;
        font-family: 'Lobster', sans-serif;
        line-height: 32px;
        font-weight: normal;
    }
    
    header a.connexion,
    header a.inscription{
        display: block;
        width: 250px;
        height: 50px;
        line-height: 46px;
        vertical-align: middle;
        text-align:center;
        margin: 0 auto;
        text-decoration: none;
        font-size: 20px;
        text-transform: uppercase;
    }
    
    header a.connexion{
        color: #FFF;
        border: 2px solid #FFF;
    }
    
    header a.inscription{
        margin-top: 12px;
        background-color: #FFF;
        color:#000;
        line-height: 50px;
    }
    
    header .form-mobile{
        width: 250px;
        margin: 0 auto;
        display: none;
    }
    
    header .form-mobile input{
        border:none;
        height: 35px;
        padding-left: 10px;
        font-size: 16px;
        margin-top: 10px;
    }
    
    header .form-mobile input:first-child{width: 250px;}
    
    header .form-mobile input[type="submit"]{
        -webkit-appearance: none;
        height: 35px;
        line-height:31px;
        width: 45px;
        color:#FFF;
        border: 2px solid #FFF;
        background-color: #000;
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
        padding-left: 0;
    }
    
    header .m-mr{margin-right: 9px;}
    
    header  .form-mobile input[type="checkbox"]{
        height: 10px;
        margin-right: 5px;
    }
    
    header  .form-mobile span,
    header  .form-mobile a{
        font-size: 12px;
        color: #FFF;
        text-decoration: none;
    }
    
    header  .form-mobile span{padding-top: 10px;}
    
    header  .form-mobile a{
        display:block;
        float:right;
        margin-top: 10px;
    }

    header .nbr-connecte p {
        color: white;
        text-align: center;
        font-size: 28px;
        margin-top: 35px;
        font-family: "FFDINWebProMedium", sans-serif!important;
        line-height: 30px;
    }
    header .nbr-connecte span {
        color: #970160;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 8px;
        margin-right: -8px;
        font-family: "FFDINWebProMedium", sans-serif!important;
    }
    /* END HEADER */
    
    /* SECTION PURPLE */
    section.purple{background-color: rgb(151, 1, 96);}

    .membre-connecte {
        font-family: "FFDINWebProMedium", sans-serif!important;
        font-size: 22px!important;
        color: white!important;
        padding-top: 30px!important;
    }
    .membre-connecte span {
        font-family: "FFDINWebProMedium", sans-serif!important;
        color: white;
        font-weight: bold;
    }

    .blocs-membre {

    }
    .bloc-membre {
        width: 50%;
        margin: auto;
        display: flex;
        justify-content: center;
    }
    .membre {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 125px;
        height: 125px;
        margin: 0 7px 14px 7px;
        position: relative;
    }
    .membre-pseudo {
        color: white!important;
        font-family: 'Roboto-Medium'!important;
        margin: 0px!important;
        position: absolute;
        bottom: 0;
        font-size: 13px!important;
        margin-bottom: 6px!important;
        padding: 0 2px!important;
        z-index: 1;
        width: 100%;
    }
    .membre-pseudo img {
        height: 16px;
        margin-bottom: -3px;
        margin-right: 4px;
    }
    .degrade {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .blocs-membre .picto-etat-connexion {
        position: absolute;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: 3px solid rgb(151, 1, 96);
        top: -3px;
        left: -3px;
    }
    
    .blocs-circle {
        padding-top: 75px;
        max-width: 320px;
        margin: auto;
    }
    
    .bloc-circle{
        color: #FFF;
        text-align: center;
        font-size: 20px;
        margin-bottom: 25px;
        float: left;
        width: 50%;
    }
    
    .bloc-circle .circle{
        width: 115px;
        height: 115px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #FFF;
        padding-top: 28px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    
    .circle img{
        height: 60px;
        text-align: center;
    }
    
    section.purple p{
        padding: 0 15px;
        margin: auto;
        font-size: 35px;
        color: #FFF;
        text-align: center;
        font-family: 'Lobster', sans-serif;
        margin-bottom: 30px;
        max-width: 564px;
    }
    
    .ctr-btn{  
        width: 100%;
        float: left;
        margin-bottom: 15px;
    }
    
    section.purple a{
        display:block;
        width: 250px;
        height: 50px;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 48px;
        text-align: center;
        vertical-align: middle;
        font-size: 21px;
        margin: 0 auto;
    }
    
    section.purple a.connexion{
        border: 2px solid #FFF;
        color: #FFF;
        line-height: 48px;
    }
    
    section.purple a.inscription{
        background-color: #FFF;
        color: rgb(151, 1, 96);
    }
    /* END SECTION PURPLE */
    
    /* SECTION BLACK */
    section.black{background-color: #000;}
    
    section.black img{
        display:block;
        width: 220px;
        padding: 30px 0;
        margin: 0 auto;
    }
    
    section.black p{
        color: #FFF;
        font-size: 14px;
        text-align: justify;
        padding-bottom: 32px;
    }
    /* END SECTION BLACK */
    
    /* FOOTER */
    footer{background-color: #000;}

    footer img {
        width: 100%;
        max-width: 380px;
        padding-top: 30px;
    }

    footer p {
        color: white;
        padding-top: 50px;
        text-align: left;
    }
    
    footer .footer-link {
        margin: 15px 0;
    }

    footer .footer-link a:first-child {
        margin-left: 0px;
    }

    footer a{
        color: #FFF;
        text-decoration: none;
        font-size: 20px;
    }

    footer .site{
        display:block;
        width: 100%;
        text-align: center;
    }
    
    .footer-ctr-btn{
        width: 100%;
        margin: 0 auto;
        padding-bottom: 30px;
        text-align: center;
    }
    
    .footer-ctr-btn a:nth-child(1){
        text-align: right;
        border-right: 2px solid #FFF;
        padding-right: 10px;
    }
    .footer-ctr-btn a:nth-child(2){
        padding-left: 10px;
        text-align: left;
    }
    /* END FOOTER */
        
}

@media (min-width:450px){
    
    .bloc-circle .circle{
        height: 95px;
        width: 95px;
        padding-top: 24px;
    }
    
    .circle img{height: 50px;}
    
}

@media (max-width:767px){
    
    footer{text-align: center;}
    
    footer .separation{
        display:inline-block;
        height: 14px;
        width: 2px;
        background-color: #FFF;
    }
    .separation.br-mobile{display: none;}
    footer a{padding: 0 10px;}
    
}

/* **** TABLETTE **** */

@media (min-width:768px){
    
    .my-container{padding: 0 30px;}
    .footer-ali{display: none;}
    header{height: 710px;}
    
    /* HEADER */
    header.background1{background: #FFF url(../images_sl/index/fond_1.jpg) no-repeat scroll top center / auto 710px;}
    header.background2{background: #FFF url(../images_sl/index/fond_2.jpg) no-repeat scroll top center / auto 710px;}
    header.background3{background: #FFF url(../images_sl/index/fond_3.jpg) no-repeat scroll top center / auto 710px;}
    header.background4{background: #FFF url(../images_sl/index/fond_4.jpg) no-repeat scroll top center / auto 710px;}
    header.background5{background: #FFF url(../images_sl/index/fond_5.jpg) no-repeat scroll top center / auto 710px;}
    header.background6{background: #FFF url(../images_sl/index/fond_6.jpg) no-repeat scroll top center / auto 710px;}
    
    header .bloc-connexion{
        display:block;
        padding-top: 30px;
        width: 600px;
        margin: 0 auto;
    }
    
    header .bloc-connexion span{
        display:block;
        float:left;
        font-size: 20px;
        color: #FFF;
    }
    
    header .bloc-connexion-pseudo,
    header .bloc-connexion-pwd{
        display:block;
        width: 190px;
        float:left;
    }
    
    header .bloc-connexion-pseudo span,
    header .bloc-connexion-pwd a{
        color: #FFF;
        font-size: 14px;
        text-decoration: none;
    }
        
    header .bloc-connexion-pseudo{margin-right: 8px;}
    
    header .bloc-connexion-pwd{margin-right: 12px;}
    
    header .bloc-connexion-pseudo span{float:none; display:inline-block;}
    
    header .bloc-connexion-pseudo input[type="text"],
    header .bloc-connexion-pwd input{
        width: 190px;
        height: 35px;
        border:none;
        margin-bottom: 10px;
        padding-left: 10px;
        font-size: 16px;
    }
    
    header .bloc-connexion > span{margin-right: 33px;}
    
    header input[type="submit"]{
        -webkit-appearance: none;
        height: 35px;
        line-height:31px;
        width: 35px;
        color:#FFF;
        border: 2px solid #FFF;
        background-color: #000;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer;
    }
    header .bloc-connexion input[type="checkbox"]{margin-right: 8px;}
    
    header img{
        width: 300px;
        padding-top: 50px;
    }
    
    header h1{
        font-size: 70px;
        padding-top: 55px;
        margin-bottom: 40px;
        line-height: 65px;
    }
    
    header a.connexion{display:none;}
    
    header a.inscription{
        border:2px solid #FFF;
        background:none;
        color:#FFF;
        line-height: 90px;
        width: 420px;
        height: 90px;
        font-size: 34px!important;
    }
    
    .form-mobile,
    .stop-media{display:none;}
    /* END HEADER */
    
    /* SECTION PURPLE */
    .bloc-membre {
        width: 25%;
    }
    .membre {
        width: 125px;
        height: 125px;
    }
    .bloc-circle{
        width: 25%;
        margin-bottom: 25px;
    }
    .blocs-circle {
        padding-top: 50px;
        max-width: 535px;
        margin: auto;
    }

    
    section.purple a.inscription,
    section.purple a.connexion{
        width: 165px;
        height: 50px;
        line-height: 50px;
    }
    
    section.purple a.connexion{line-height: 46px;}
    
    section.purple p{
        padding: 0 15px;
        margin: auto;
        font-size: 35px;
        color: #FFF;
        text-align: center;
        font-family: 'Lobster', sans-serif;
        margin-bottom: 30px;
        max-width: 564px;
    }
    
    .ctr-btn {
        width: 50%;
    }

    section.purple .ctr-btn{margin-bottom: 50px;}
    section a.connexion{margin-right: 8px;}
    section a.inscription{margin-left: 8px;}
    /* END SECTION PURPLE */
    
    /* FOOTER */
    footer{
        text-align: center;
        padding-bottom: 30px;
    }

    footer .footer-link {
        text-align: left;
    }
    
    footer a{
        display:inline-block;
        margin: 0 10px;
    }
    
    footer .separation{
        display:inline-block;
        height: 16px;
        width: 2px;
        background-color: #FFF;
    }
    
    .br-mobile{display:none;}
    /* END FOOTER */
}

@media (min-width:768px) and (max-width: 1024px){
    header .bloc-connexion > span{padding-top: 7px;}
} 

/* END TABLETTE */

/* DESKTOP */

@media (min-width: 1024px) and (orientation: landscape){
    
    .stop.landscape-tablette{display:block;}
    
    /* HEADER */
    header.background1{background: #FFF url(../images_sl/index/fond_1.jpg) no-repeat scroll top center / cover;}
    header.background2{background: #FFF url(../images_sl/index/fond_2.jpg) no-repeat scroll top center / cover;}
    header.background3{background: #FFF url(../images_sl/index/fond_3.jpg) no-repeat scroll top center / cover;}
    header.background4{background: #FFF url(../images_sl/index/fond_4.jpg) no-repeat scroll top center / cover;}
    header.background5{background: #FFF url(../images_sl/index/fond_5.jpg) no-repeat scroll top center / cover;}
    header.background6{background: #FFF url(../images_sl/index/fond_6.jpg) no-repeat scroll top center / cover;}
    
    header img{
        float:left;
        padding-top: 30px;
        width: 300px;
    }
    
    header .bloc-connexion{
        float:right;
        padding-top: 75px;
    }
    
    header h1{
        padding-top: 100px;
        font-size: 70px;
    }
    
    header .bloc-connexion > span{padding-left: 30px;}
    /* END HEADER */
    
    /* SECTION PURPLE */
    .membre-connecte {
        padding-top: 50px!important;
    }
    .blocs-circle{
        width: 90%;
        margin: 0 auto;
    }
    
    section.purple a.inscription,
    section.purple a.connexion{
        width: 200px;
        height: 56px;
        line-height: 56px;
        font-size: 25px;
    }
    
    section.purple a.connexion{line-height: 56px;}
    
    section.purple p{
        padding: 0 15px;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
        max-width: 564px;
    }
    /* END SECTION PURPLE */
    
    /* SECTION BLACK */
    section.black img{
        float: left;
        margin-right: 25px;
    }
    
    section.black p{
        padding-top: 60px;
        padding-left: 375px;
    }
    /* END SECTION BLACK */
}

@media (min-width: 1200px) {
    .vertical-hr {
        height: 76%;
        width: 1px;
        background-color: white;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        margin-left: -15px;
    }
}
@media (max-width: 670px) {
    .saut-ligne-flex {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    .horizontal-hr {
        height: 1px;
        width: 90%;
        background-color: white;
        position: absolute;
        bottom: -20px;
        margin: auto;
        max-width: 650px;
        left: 0;
        right: 0px;
    }
}
@media (max-width: 768px) {
    .horizontal-hr {
        height: 1px;
        width: 90%;
        background-color: white;
        position: absolute;
        bottom: -32px;
        margin: auto;
        max-width: 650px;
        left: 0;
        right: 0px;
    }
}