@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;
}

.container{margin:0 auto}
.stop{clear:both;}
.stop.landscape-tablette{display:none;}

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

.grey_light { 
    background-color: #f1f1f1;
    padding: 75px 0 5px 0;
}

.grey_light .container { 
    width: 100%;
    max-width: 1200px;
}

.grey_light p {
    margin-bottom: 30px;
    text-align: center;
    font-family: "Lobster", sans-serif;
    font-size: 35px;
}

.new-profil-co {
    display: block;
    position: relative;
    width: 16.5%;
    float:left;
    min-height: 20px;
    padding:5px 20px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    color: #942750;
    font-weight: 700;
}
        
.new-profil-co-picto-rond {
    position: absolute;
    top: 10px;
    left: 25px;
    width: 13px;
}

.new-profil-co-img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.new-profil-co-name {
    display: block;
    margin-top: 5px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.new-profil-co-picto {
    height: 16px;
    padding: 2px 5px 0 0;
}

@media (max-width: 768px) {
    .new-profil-co { width:33.3%; }
}

@media (max-width: 400px) { 
    .new-profil-co { width:50%; }
}

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

@media (min-width:320px){
    
    .container{padding: 0 15px;}
    
    /* HEADER */
    header{height: 485px;}
    header.background1{background: url(../images_sl/index/fond1.jpg) no-repeat scroll center -35px  / auto 1024px;}
    header.background2{background: #FFF url(../images_sl/index/fond2.jpg) no-repeat scroll center top / auto 630px;}
    header.background3{background: #FFF url(../images_sl/index/fond3.jpg) no-repeat scroll center top / auto 630px;}
    header.background4{background: #FFF url(../images_sl/index/fond4.jpg) no-repeat scroll center top / auto 630px;}
    header.background5{background: #FFF url(../images_sl/index/fond5.jpg) no-repeat scroll center -100px / auto 1024px;}
    header.background6{background: #FFF url(../images_sl/index/fond6.jpg) no-repeat scroll center top / auto 1024px;}
    
    header .bloc-connexion{display:none;}
    
    header img{
        display:block;
        width: 220px;
        padding-top: 65px;
        margin: 0 auto;
    }
    
    header h1{
        font-size: 36px;
        color: #FFF;
        padding-top: 70px;
        width: 100%;
        text-align:center;
        margin-bottom: 25px;
        font-family: 'Lobster', sans-serif;
        line-height: 1;
    }
    
    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;
    }
    
    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;
    }
    /* END HEADER */
    
    /* SECTION PURPLE */
    section.purple{background-color: rgb(151, 1, 96);}
    
    .blocs-circle{padding-top: 75px;}
    
    .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;
        font-size: 35px;
        color: #FFF;
        text-align:center;
        font-family: 'Lobster', sans-serif;
        margin-bottom: 30px;
    }
    
    .ctr-btn{  
        width: 50%;
        float: left;
        margin-bottom: 70px;
    }
    
    section.purple a{
        display:block;
        width: 125px;
        height: 35px;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 39px;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
        margin: 0 auto;
    }
    
    section.purple a.connexion{
        border: 2px solid #FFF;
        color: #FFF;
        line-height: 35px;
    }
    
    section.purple a.inscription{
        background-color: #FFF;
        color: rgb(151, 1, 96);
    }
    /* END SECTION PURPLE */
    
    /* SECTION GREY */
    section.grey{background: url(../images_sl/index/fond_grey.png) no-repeat scroll top center / 1280px;}
    
    section.grey p{
        padding: 0 15px;
        font-size: 35px;
        color: #000;
        text-align:center;
        font-family: 'Lobster', sans-serif;
        margin-bottom: 30px;
        padding-top: 70px;
    }
    
    section.grey a,
    section.grey_light a.connexion,
    section.grey_light a.inscription{    
        display:block;
        width: 125px;
        height: 35px;
        text-transform: uppercase;
        text-decoration: none;
        line-height: 39px;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
        margin: 0 auto;
        
    }
    
    section.grey a.connexion,
    section.grey_light a.connexion {
        border: 2px solid #000;
        color: #000;
        line-height: 35px;
    }
    
    section.grey a.inscription,
    section.grey_light a.inscription{
        background-color: #000;
        color: #FFF;
    }

    /* END SECTION GREY */
    
    /* 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 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: 150px;
        width: 150px;
        padding-top: 35px;
    }
    
    .circle img{height: 80px;}
    
}

@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){
    
    .container{padding: 0 30px;}
    .footer-ali{display: none;}
    header{height: 710px;}
    
    /* HEADER */
    header.background1{background: #FFF url(../images_sl/index/fond1.jpg) no-repeat scroll top center / auto 1500px;}
    header.background2{background: #FFF url(../images_sl/index/fond2.jpg) no-repeat scroll top center / auto 710px;}
    header.background3{background: #FFF url(../images_sl/index/fond3.jpg) no-repeat scroll top center / auto 710px;}
    header.background4{background: #FFF url(../images_sl/index/fond4.jpg) no-repeat scroll top center / auto 710px;}
    header.background5{background: #FFF url(../images_sl/index/fond5.jpg) no-repeat scroll top center / auto 710px;}
    header.background6{background: #FFF url(../images_sl/index/fond6.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: 350px;
        padding-top: 80px;
    }
    
    header h1{
        font-size: 70px;
        padding-top: 70px;
        margin-bottom: 60px;
    }
    
    header a.connexion{display:none;}
    
    header a.inscription{
        border:2px solid #FFF;
        background:none;
        color:#FFF;
        line-height: 46px;
    }
    
    .form-mobile,
    .stop-media{display:none;}
    /* END HEADER */
    
    /* SECTION PURPLE */
    .bloc-circle{
        width: 25%;
        margin-bottom: 50px;
    }
    
    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 65px;
        font-size: 50px;
        color: #FFF;
        margin-bottom: 50px;
    }
    
    section.purple .ctr-btn{margin-bottom: 80px;}
    section a.connexion,
    section.grey_light a.connexion {margin-right: 8px;}
    section a.inscription,
    section.grey_light a.inscription{margin-left: 8px;}
    /* END SECTION PURPLE */
    
    /* SECTION GREY */
    section.grey{background: url(../images_sl/index/fond_grey.png) no-repeat scroll top center / 1500px;}
    
    section.grey a.inscription,
    section.grey a.connexion{
        width: 165px;
        height: 50px;
        line-height: 50px;
    }
    
    section.grey_light a.connexion{line-height: 46px;}

    section.grey_light a.inscription,
    section.grey_light a.connexion{
        width: 165px;
        height: 50px;
        line-height: 50px;
    }
    
    section.grey_light a.connexion{line-height: 46px;}
    
    section.grey p{
        padding-top: 185px;
        font-size: 50px;
        margin-bottom: 50px;
    }
    
    section.grey .ctr-btn{margin-bottom: 140px;}
    
    section.black img{width: 350px;}

    /* SECTION GREY LIGHT */

    /* END SECTION GREY */

    .grey_light p { font-size: 50px; }

    .grey_light { padding: 125px 0 55px; }

    /* END SECTION GREY LIGHT */
    
    /* FOOTER */
    footer{
        text-align: center;
        padding-bottom: 30px;
    }
    
    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 */

    /* SECTION GREY LIGHT */
    .grey_light p {
        margin-bottom: 50px;
    }
    /* END SECTION GREY LIGHT */
}

@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/fond1.jpg) no-repeat scroll top center / cover;}
    header.background2{background: #FFF url(../images_sl/index/fond2.jpg) no-repeat scroll top center / cover;}
    header.background3{background: #FFF url(../images_sl/index/fond3.jpg) no-repeat scroll top center / cover;}
    header.background4{background: #FFF url(../images_sl/index/fond4.jpg) no-repeat scroll top center / cover;}
    header.background5{background: #FFF url(../images_sl/index/fond5.jpg) no-repeat scroll top center / cover;}
    header.background6{background: #FFF url(../images_sl/index/fond6.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 */
    .blocs-circle{
        width: 80%;
        margin: 0 auto;
    }
    
    section.purple a.inscription,
    section.purple a.connexion{
        width: 185px;
        height: 55px;
        line-height: 55px;
    }
    
    section.purple a.connexion{line-height: 51px;}
    
    section.purple p{
        padding: 0 50px;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 50px;
    }
    /* END SECTION PURPLE */
    
    /* SECTION GREY */
    section.grey a.inscription,
    section.grey a.connexion{
        width: 185px;
        height: 55px;
        line-height: 55px;
    }
    
    section.grey a.connexion{line-height: 51px;}

    section.grey_light a.inscription,
    section.grey_light a.connexion{
        width: 185px;
        height: 55px;
        line-height: 55px;
    }
    
    section.grey_light a.connexion{line-height: 51px;}
    
    section.grey p{
        padding: 185px 50px 0 50px;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 50px;
    }
    
    section.grey{background: url(../images_sl/index/fond_grey.png) no-repeat scroll top center / cover;}
    /* END SECTION GREY */
    
    /* SECTION BLACK */
    section.black img{
        float: left;
        margin-right: 25px;
    }
    
    section.black p{
        padding-top: 60px;
        padding-left: 375px;
    }
    /* END SECTION BLACK */

}