/*
Theme Name: XXX Date ! 
Theme URI: 
Author: Anaud 
Author URI: 
Description: Thème fake dating adulte .
Version: 1.0
License: Thème sous licence logicielle de la propriété intellectuelle. La revente du thème est strictement interdite sous peine de poursuite. 
License URI: 

Text Domain: 

*/



html, body {
    
    position:relative;
    width:100%;
    min-height:100%;
    max-width: 100%;
    overflow-x: hidden;
    margin:0;
    padding:0;
    
}


body {
    
    background: #FF0071;
    color:#610B38;
    font-family:'Arial';

}

a {

    color:inherit;
    text-decoration: none;

}


.couleur_1 {

    background: #FF0071; 

}

.couleur_2 {

    background: #950042; 
    color:#ffffff;

}

.couleur_3 {

    color:#FF0071;
    background:#F8E0F7;

}





@font-face {
    font-family: 'juliette_michelregular';
    src: url('juliette_michel-webfont.woff2') format('woff2'),
         url('juliette_michel-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


.rall {
    
    height:0;
    border:0;
    clear:both;
    width:auto;
    margin:0 0 10px 0;}


::-moz-selection {   background-color:#222222; color:#ffffff;}
::selection      {  background-color:#222222; color:#ffffff;}



header {

    position:fixed;
    width:90%;
    max-width:90%;
    min-width: 90%;
    z-index: 97;
    min-height:100px;
    height:100px;
    max-height:100px;
    margin:0;
    padding:0 5% 0 5%;
    overflow:visible;
    
    background-color: #FF0071; 
    background-image: url("img/bg.png");


}


.logo {
    
    position:relative;
    float:left;
    width:300px;
    height:100px;
    display:block;
    max-height: 100% !important;
    max-width: calc(100% - 70px) !important;
    margin:0;
    padding:0;
    overflow:hidden;

}

.logo img{
    
    position:relative;
    display:block;
    max-height: 100% !important;
    width:auto;
    height:auto;
    max-width:100% !important; 
    margin:auto;
    padding:0;


    animation: shake 2s;
    animation-iteration-count: infinite;
}


@keyframes shake {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



#menu {

    position:relative;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    width:calc(100% - 300px);
    height:100px;
    max-height: 100px;

    line-height:100px;
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
    color:#ffffff;
    letter-spacing:1px;

    
}
 

#menu li{
    position:relative;
    width:auto;
    margin:0 10px 0 0;
    display:inline-block;
    padding:0;
     
}
     
#menu a{
    position:relative;
    display:block;
    padding:0 10px;
    text-decoration: none; 

}




#menu li img, #menu li svg, #menu_mobile li img, #menu_mobile li svg {

    position:relative;
    width:20px;
    height:20px;
    margin-right:5px;
    top:5px;

}


#menu li ul{

    position:absolute;
    top:100%;
    left:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    max-height:0;
    overflow:hidden;

    
    background-color: #950042;
    font-size:12px;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;

}



#menu li ul li{

    position:relative;
    width:calc(20% - 19px);
    margin:0 15px 15px 0;
    padding:0;
    height:100px;
    line-height:20px;

    overflow:hidden;
    float:none;
    display: inline-block;
    vertical-align: top;

    font-size:10px;
    border-width:0 0 1px 0;
    border-style:solid;
    border-color:#FF0071;

}


#menu li ul li a{

    margin:0;
    padding:0;

}


#menu li ul li img, #menu li ul li svg {

    position:relative;
    float:left;
    width:100px;
    height:100px;
    margin:0 10px 0 0;
    top:0;

}


#close_menu {
    position:relative;
    width:100%;
    line-height:30px;
    cursor:pointer;
    margin:0 0 20px 0;
    padding:0;
}


#btn_menu_mobile {

    display:none;

    position:absolute;
    top:25px;
    right:5%;
    width:50px;
    height:50px;
    line-height:50px;
    font-size:50px;
    cursor: pointer;

}


#menu_mobile {

    position:fixed;
    z-index:9999;
    left:-100%;
    width:calc(90% - 60px);
    height:100%;
    margin:0;
    padding:50px 30px;
    top:0;
    
    list-style:none;
    text-align:left;

}

#menu_mobile .fermer{

    position:relative;
    width:100%;
    height:30px;
    line-height:30px;
    font-size:20px;
    margin:0;
    padding:0;
    cursor: pointer;


}


#menu_mobile .fermer .dashicons{


    height:30px;
    line-height:30px;
    font-size:20px;
    margin:0 10px 0 0;
    padding:0;


}


#menu_mobile li {

    margin:10px 0 0 0;
    padding:10px 0;
    width:100%;
    line-height:20px; 
}


#menu_mobile ul {

    margin:0 0 0 10%;
    padding:0;
    list-style:none;
    width:90%; 

}


#menu_mobile li a{
    
    display:block;
    text-decoration: none;

}




#barre {

    position:fixed;
    z-index:96;
    top:0;
    left:0;
    width:90%;
    max-height:80px;
    padding:10px 5%;

    background:#950042;
    color:#ffffff;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    line-height: 30px;
    font-size: 14px;
}


#barre .dashicons{

    position:absolute;
    top:25px;
    width:22px;
    height:22px;     
    left:50px;
    line-height: 22px;
    font-size: 22px;

    border:2px solid #ffffff;
    cursor:pointer;

}



#barre p{

    position: relative;
    margin:0;
    padding:0;

}


#barre .bouton{

    position:relative;
    display:inline-block;
    margin:auto;
    padding:0 20px;

    font-size:13px;
    cursor:pointer;
    border:1px solid #ffffff;

    -moz-border-radius: 6px;
    -webkit-border-radius:  6px;
    border-radius:  6px;
    
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;

}



#barre .bouton .dashicons {

    position:relative;
    display:block;
    float:left;
    left:0;
    top:4px;
    border:0;
    margin:0 5px 0 0;

    line-height: 20px;
    font-size: 16px;

}




#badge {

    position: fixed;
    z-index:97;
    top:0;
    right:0;
    width:200px;
    height:200px;
    background-image: url("img/badge.png");


}




.corps {
    
    position:relative;
    width:90%;
    margin:30px auto 30px auto;
    padding:0;
    overflow:hidden;
    max-width:100%;
    
}


.decalage_header {
    
    margin-top:150px !important;
    
}


#recherche, #formulaire {
    
    position:relative;
    width:47%;
    margin:0 0 40px 0;
    padding:0;
    height:500px;
    z-index:1111;
    
            
}


#recherche {
    
    float:left;
    background-color:rgba(255, 255, 255, 0.07);
    text-align: left;
            
}


#recherche .titre_formulaire{
    
    position:relative;
    display:block;
    margin:0 0 20px 0;
    padding:0;
    height:60px;
    
    line-height:60px;
    font-size:20px;
    
    background:#546DBA;
    text-align:center;
    color:#ffffff;
    font-weight: normal;
}

 


#formulaire {

    float:right;

}


#recherche p   {
    
    position:relative;
    width:90%;
    margin:5px 5%;
    padding:0;
    
}


.nouveau_select {
    
    position:relative;
    width:90%;
    margin:0 5% 22px 5%;
    padding:0;
    overflow:visible;
    
    height:40px;
    line-height:40px;
    border-width: 0 0 1px 0;
    border-color:#eeeeee;
    border-style: solid;
    cursor:pointer;

          
}

.nouveau_select span{
    
    position:relative;
    display:inline-block;
     line-height:20px;
    height:20px;
    width:20px;  
    margin:10px 10px 0 0;   
    font-size:20px;
           
}


.nouveau_select ul{

    position:absolute;
    max-height:0px;
    overflow: hidden;  
    left:55px;
    top:100%;
    z-index:9998;
    width:90%;
    list-style: none;
    margin:0;
    padding:0;
    opacity: 0;

    border-radius:4px;
    
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);


    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    transition: opacity 250ms;
            
}

.nouveau_select:hover ul{

    opacity: 1;
            
}
   


    

.trait_autour {

    position:relative;
    display:inline-block;
    width:auto;
    margin:auto;

}

.trait_autour:before, .trait_autour:after {

    position:absolute;
    width:40px;
    height:1px;
    top:50%;
    display: block;
    content:'';
    z-index:90;
    background:#aaaaaa;

}

.trait_autour:before {

    right:100%;
    margin:0 20px 0 0;

}

.trait_autour:after {

    left:100%;
    margin:0 0 0 20px;

}


 




.posts {
    
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
    
}


.posts li{
    
    position:relative;
    float:left;
    width:15%;
    margin:10px 0.83%;
    padding:0;
    overflow: hidden;

    background-color: #ffffff;

    -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);

    -moz-border-radius: 6px;
    -webkit-border-radius:  6px;
    border-radius:  6px;
    
}


.posts li a{

    text-decoration:none;
    
}


.posts li .thumb {

    position:relative;
    width:100%;
    max-width:100%;
    margin:auto;
    padding:0;
    display:block;  overflow:hidden;

}


.posts li .thumb:after{
    padding: 133.33% 0% 0% 0%;  
    margin:0;
    display:block;
    content:'';
    overflow:hidden;

}
      
      
      
.posts li .thumb img{
    
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;

}


      
.posts li:hover .thumb img{
    
    transform: scale(1.2);

}


.posts li .thumb .phrase{

    position: absolute;
    width:100%;
    line-height: 30px;
    top:calc(50% - 15px);
    left:0;
    background-color:rgba(0, 0, 0, 0.5);
    font-size:12px;
    color:#ffffff;
    text-align: center;

        
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}


.posts li:hover .thumb .phrase{

    top:50%;
    opacity:0;
    
}



.posts li .thumb .drapeau {

    display:block;
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:20px;
  
}


.posts li .thumb .drapeau span {

    display:block;
    width:33.333334%;
    height:100%;
    float:left; 
  
}
 

.posts li .thumb .drapeau span:nth-child(1) {
    background:blue;
}

.posts li .thumb .drapeau span:nth-child(2) {
    background:white;
}

.posts li .thumb .drapeau span:nth-child(3) {
    background:red;
    float: right;
}
 


.posts li .thumb .certifie {

    display:block;
    position:absolute;
    top:10px;
    left:10px;

    line-height:20px;
    font-size:11px;
    text-transform: uppercase;
    font-weight: bold;
    color:#ffffff;

    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);

  
}

.posts li .thumb .certifie .dashicons{

    display:block;
    position:relative;
    float:left;
    line-height:20px;
    font-size:18px;

  
}

.posts li .thumb .masque{
    
    position:absolute;
    display:block;
    top:0;
    left:0;
    padding:0;
    width:100%;
    height:100%;
    opacity:0;

    background-color:rgba(255, 0, 113, 0.29);
    
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;

}


.posts li:hover .thumb .masque{

    opacity:1;
    

}

.posts li .thumb .masque .dashicons-search {

    position:absolute;
    display:block;
    width:40px;
    height:40px;
    top:52%;
    left:calc(50% - 20px);
    line-height: 40px;
    font-size: 28px;
    color:#ffffff;

    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}



.posts li:hover .thumb .masque .dashicons-search {

    top:calc(50% - 10px);

}



.posts li .thumb .masque .trait {

    position:relative;
    display:block;
    width:100%;
    height:100%;
    border:1px solid #ffffff;
    top:0;
    left:0;

    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.posts li:hover .thumb .trait {

    top:10%;
    left:10%;

    width:80%;
    height:80%;

}




.posts li .pseudo{
    
    position:relative;
    display:block;
    float:left;
    width: calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin:10px;
    padding:0;
    height:30px;
    line-height:30px;
    max-height:30px;
    overflow:hidden;

    text-align: left;
    font-size:13px;
    font-weight: bold;
  
}


 


.posts li .bouton{
    
    position:relative;
    display:block;
    float:right;
    margin:10px;
    padding:0 5px;
    height:30px;
    line-height:30px;
    width:calc(50% - 30px);
    max-width:calc(50% - 30px);
    overflow:hidden;

    color:#ffffff;
    text-align:center;    
    font-size:12px;
    font-weight: normal;
    letter-spacing: 1px;

    cursor:pointer;

    -moz-border-radius: 4px;
    -webkit-border-radius:  4px;
    border-radius:  4px;

}



.posts li .age{
    
    position:relative;
    display:block;
    float:left;
    margin:0 10px 10px 10px;
    padding:0;
    height:20px;
    line-height:20px;
    width:50px;
    overflow:hidden;
    
    text-align:left;
    font-size:12px;


}

.posts li .connection{
    
    position:relative;
    display:block;
    float:right;
    margin:0 10px 10px 0;
    padding:0;
    height:20px;
    line-height:20px;
    width:calc(100% - 80px);
    overflow:hidden;
    
    text-align:right;    
    font-size:12px;

}




#bandeau_geoloc {
    
    width:auto;
    position:relative;
    padding:20px;
    margin:20px 0 40px 0;
    overflow:hidden;
    left:0;
    top:20px;
    z-index:2;

    text-align:center;
    background-color:#950042;
    background-image: url("img/bg.png");

    color:#ffffff;
    letter-spacing:2px;
    font-size:13px;
    border-radius:5px;

}

.bords_bandeau_geoloc {

    position:absolute;
    display:block;
    width:5%;
    padding:0;
    margin:0;
    background-color:#950042;
    background-image: url("img/bg.png");

}


.bord_bandeau_geoloc_g {

    left:0;

}

.bord_bandeau_geoloc_d {

    right:0;

}


.ville_visiteur {

    letter-spacing:1px;
    font-weight: bold;
    text-decoration:underline;
    text-transform: uppercase;

}




#bandeau {

    display: grid;
    grid-template-columns: 31% 31% 31%;
    grid-column-gap: 3.5%;
    width:90%;
    position:relative;
    padding:30px 5%;
    margin:50px 0;
    overflow:hidden;
    list-style:none;
    
    z-index:2;

    background-color:#950042;
    color:#ffffff;

}


#bandeau .case {
    
    position:relative;
    float:left;
    padding:0;
    margin:0 1.666666% 33px 1.666666%;
    overflow:hidden;
    text-align:center;
    line-height:18px;
    font-size:14px;

}


#bandeau .case .rond {

    position:relative;
    width:150px;
    height:150px;
    margin:0 auto 20px auto;
    text-align:center;
    background-color: rgba(255, 255, 255, 0.1);

}


#bandeau .case .rond .dashicons {

    position:relative;
    display:block;
    line-height:150px;
    width:150px;
    font-size:55px;
    color:#ffffff;


}



.rond {

    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; 
    overflow:hidden;

}




#pagination {

    position:relative;
    width:100%;
    text-align:center;
    
    overflow:hidden;
    list-style:none;
    font-weight:bolder;
    line-height:30px;

}


#pagination li  {

    position:relative;
    display:inline-block;
    overflow:hidden;
    width:30px;
    height:30px;
    padding:0;
    margin:5px;
    color:#ffffff;
    border:1px solid #950042;

}

#pagination a {

    display:block;
    margin:0;
    padding:0;
    text-decoration: none;

}



#pagination .active {

    border:1px solid #950042;
    color:#950042;

}


.gauche, .droite {

    position:relative;
    margin:0;
    padding:0;
    width:49%;

}

.gauche {

    float:left;

}

.droite {

    float:right;
    text-align: center;

}

#carte_france path:hover {
    
    fill:#A40149;

}


.home .gauche .texte {

    position:absolute;
    top:0;
    left:0;
    width:277px;
    display:block;
    height:40px;

    line-height: 20px;
    font-size: 14px;
    font-weight: bold;

}



#nom_region {

    position:absolute;
    top:40px;
    left:0;
    width:277px;
    display:block;
    height:50px;

    text-transform: uppercase;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;

}

#timer {

    position:relative;
    display:inline-block;
    width:auto;
    margin:auto;
    padding:0 50px;
    text-align:center;
    z-index:11;

}


#timer titre{

    position:relative;
    display:block;
    width:100%;

}


#timer div{

    position:relative;
    display:inline-block;
    font-size:12px;

}


#timer div span{

    position:relative;
    display:block;
    padding:10px;
    margin:10px;
    width:40px;
    line-height: 50px;

    color:#ffffff;
    font-size: 30px;
    font-weight: bolder;
    border-radius:5px;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#45484d+0,000000+100 */
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    
}


#cadre_inscription {

    position:relative;
    width:90%;
    padding:88px 11px 33px 11px;
    top:-55px;
    margin:auto;

    border:1px solid #950042;

}


.home h1 {

    font-family: 'michella_gardenregular';
    line-height:60px;
    font-size: 56px;
    margin:0 0 10px 0;
    padding:0;
    font-weight:normal;

}



 .listes {

    position:relative;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    line-height: 24px;

}





#boucle_temoignages {
    position:relative;
    list-style:none;
    padding:0;
    margin:0 auto 20px auto;
    width:100%;
    height:200px;
    overflow:hidden;
    text-align:center;
    }

#boucle_temoignages li {
    position:absolute;
    top:0;
    width:80%;
    left:100%;
    height:100%;
    }


#boucle_temoignages li:first-child{
    left:10%;
    }

#boucle_temoignages .thumb {
    float:left;
    width:150px;
    height:150px;
    margin:25px 0 0 50px;
}

#boucle_temoignages .thumb img{
    width:100%;
    height:100%;
}



#boucle_temoignages .texte {
    float:left;
    width:calc( 100% - 300px );
    padding:0 0 0 50px;
    margin:45px 0 0 50px;
    min-height:110px;
    max-height:110px;
    
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#950042;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    text-align:left;
    line-height:20px;
    font-size:14px;
    
    }



#boucle_temoignages h5{
    width:100%;
    margin:0 0 10px 0;
    padding:0;
    line-height:20px;
    font-size:16px;
    font-weight:bolder;
    text-align:left;
}


#less_slider, #more_slider {
    position:absolute;
    width:10%;
    top:0;
    height:100%;
    cursor:pointer;
}   

#more_slider {
    right:0;
    width:10%;
    }   

#less_slider {
    left:0;
    width:10%;
    }   

#less_slider .dashicons, #more_slider .dashicons {

    position: absolute;
    display: block;
    height:50px;
    line-height: 50px;
    font-size: 40px;
    width:50px;
    top:50%;
    left:50%;
    position:absolute;
    margin:-25px 0 0 -25px;
}   






.archive h1 {

    position:relative;
    width:100%;
    margin:0 0 10px 0;
    padding:0 0 10px 0;

    line-height:22px;
    font-size:20px;
    text-transform:uppercase;
    word-wrap: break-word;
    letter-spacing: 1px;
 
}   

 

.archive .texte {

    position:relative;
    width:100%;
    margin:0;
    padding:0;

    line-height:16px;
    font-size:14px;
 
}   

 

@font-face {
    font-family: 'michella_gardenregular';
    src: url('fonts/michella_garden-webfont.woff2') format('woff2'),
         url('fonts/michella_garden-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


.single #gauche {

    position:relative;
    float:left;
    width:300px;
    margin:0 30px 0 0;
    padding:0;
    max-width: 100%;

}


.single #gauche .liste_categories {

    position:relative;
    width:100%;
    list-style: none;
    padding:0;
    margin:10px auto 30px auto;

}


.single #gauche .liste_categories li{

    position:relative;
    width:100%;
    padding:0;
    margin:0;
    line-height: 24px;
    font-size:14px;
    
}


.single #gauche .liste_categories li a .dashicons {

    position:relative;
    display:block;
    float:left;
    width:0;
    overflow:hidden;
    line-height: 24px;
    font-size:18px;
    padding:0;
    margin:0;
    text-align: left !important;

    -webkit-transition: all 333ms;
    -moz-transition: all 333ms;
    -o-transition: all 333ms;
    -ms-transition: all 333ms;
    transition: all 333ms;
    
}


.single #gauche .liste_categories li:hover a .dashicons {

    width:18px;
    
}


.single #gauche .liste_categories li a{

    position:relative;
    display:block;
    
}


.single h3, .single h2 {

    position:relative;
    width:100%;
    margin:0 0 10px 0;
    padding:0;
    line-height: 20px;
    font-size: 16px;
    text-transform:uppercase;
    font-weight: bold;

}

 


.single h2 .dashicons, .single h3 .dashicons{

    position:relative;
    margin:0 5px 0 0;
    line-height: 20px;
    font-size: 16px;
    display:block;
    float:left;


}



.single #centre {

    position:relative;
    float:left;
    width:calc(100% - 660px);
    max-width: 100%;
    color:#610B38;

}




.single h1 {

    position:relative;
    width:100%;
    margin:0 0 20px 0;
    padding:0;

    line-height:50px;
    font-size:48px;
    letter-spacing:1px;
    font-family: 'michella_gardenregular';
    text-align: center;
    word-wrap: break-word;
    vertical-align:middle;
    font-weight: normal;
    overflow: hidden;
    text-shadow: 1px 1px 3px #ffffff;

}


.single #centre #image {

    position:relative;
    float:left;
    width:49%;
    max-width:100%;
    min-height: 400px;
    max-height: 400px;
    height: 400px;
    display:block;
    margin:0 auto 50px auto;
    padding:0;
    text-align: center;
    overflow:visible;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

}


.single #centre #image img {

    position: relative;
    display: inline-block;
    margin:0 auto;
    width:auto;
    height:auto;
    max-height:100%  !important;
    max-width:100%  !important;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

}




.single #centre #vignettes {
    
    position:relative;
    width:49%;
    height:50px;
    left:0; 
    padding:0;
    margin:40px 0 10px 0;
    overflow:hidden;
    list-style: none;
    text-align: center;
    clear:both;
    
}


.single #centre #vignettes li {
    
    position:relative;
    display:inline-block;
    width:50px;
    margin:5px;
    padding:0;

    overflow:hidden;
    cursor:pointer; 

}


.single #centre #vignettes li img {
    
    position:relative;
    display:block;
    max-width:100%;
    max-height:100%;
    
}




.single .age_profil {

    position:absolute;
    width:30px;
    height:30px;
    bottom:-25px;
    left:calc( 50% - 25px);
    padding:10px;

    line-height:15px;
    text-align:center;
    font-size:11px;
    font-weight: bold;
    color:#ffffff;
    
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
}





.single .details {

    position:relative;
    height:auto;
    float:right;
    width:49%;
    margin:20px auto 0 auto;
    padding:0;
    max-width: 100%;

    line-height:30px;
    font-size:12px;
    
}


.single .details .dashicons{

    line-height:30px;
    font-size:20px;
    
}




.single .connectee {
    
    position:relative;
    padding:5px 0;
    margin:5px auto;
    display:inline-block;
    width:100%;
    clear:both;
    
    line-height:20px;
    font-size:11px;
    text-align: center;
    text-transform:uppercase;
    font-weight:normal;
    letter-spacing:1px;


    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
}

.single .connectee .dashicons{

    line-height:20px;
    font-size:16px;

}


.single .bouton_contact {
    
    position:relative;
    padding:15px 0;
    margin:5px auto !important;
    display:inline-block;
    width:100%;
    
    line-height:20px;
    font-size:15px;
    text-align: center;
    text-transform:uppercase;
    cursor:pointer;
    font-weight:bold;
    letter-spacing:2px;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    
}

.single .bouton_contact .dashicons {

    line-height:20px;
    font-size:20px;
 
}

.single .bouton_contact a{
    
    position:relative;
    display:block;

    
}



.single #centre .texte {
    
    font-size:14px !important;
    line-height:20px !important;
    margin:30px auto;
    
    
}




.single .details_2 {

    position:relative;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;

}

.single .details_2 p {

    position:relative;
    display:block; 

}
 


.single .details_2 p span{

    font-weight:bold;
    color:#F8E0F7;
    cursor:pointer;
    font-size:13px;
    letter-spacing: 1px;

}
 


.single #profils_similaires{

    position:relative;
    float:right;
    margin:50px auto 0 auto;
    padding:0;
    width:100%;

}


.single #profils_similaires .posts li .pseudo{

    float:none;
    width: 90%;
    max-width: 90%;
    margin:10px 5%;
  

}


.single #profils_similaires .posts li{
    
    width:23%;
    margin:5px 1%;
    
}
 
.single #profils_similaires .posts li .bouton {
    

    float:none;
    margin:5px 5%;
    width:calc(90% - 10px);
    max-width:calc(90% - 10px);
    
}
 


.single #droite {

    position:relative;
    float:left;
    width:300px;
    margin:0 0 0 30px;
    padding:0;
    max-width: 100%;

}



.single #droite #connectees{

    position:relative;
    width:100%;
    list-style: none;
    margin:0 0 20px 0;
    padding:0;
    overflow: hidden;

}

.single #droite #connectees li{

    position:relative;
    float:left;
    width:48%;
    margin:0 0.5% 20px 0.5%;
    padding:0;
    overflow: hidden;
    border:1px solid black;
}


.single #droite #connectees li:after{

    padding: 133.33% 0% 0% 0%;  
    margin:0;
    display:block;
    content:'';
    overflow:hidden;

}

.single #droite #connectees li .thumb {

    position:absolute;
    width:100%;
    max-width:100%;
    height:100%;
    margin:auto;
    padding:0;
    display:block;
    overflow:hidden; 

}


.single #droite #connectees li .thumb img{

    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    
}
      


.single #droite #connectees li .thumb .masque {

    position: absolute;
    bottom:-30px;
    left:0;
    width:90%;
    padding:5px 5%;
    height:20px;
    display:block;
    line-height:20px;
    font-size:12px;
    font-weight: bold;

    background-color: rgba(0, 0, 0, 0.66);
    color:#ffffff;

    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
    
}
      
.single #droite #connectees li .thumb:hover .masque {

    bottom:0px;

    
}
      


.single #droite #connectees li .thumb .masque .dashicons {

    line-height:25px;
    font-size:14px;
    margin:0 5px 0 0;
    
}





.page h1 {

    position:relative;
    width:100%;
    margin:0 0 20px 0;
    padding:0;

    line-height:30px;
    font-size:24px;
    font-weight: normal;
    text-align:left;

}

.page .texte {

    position:relative;
    width:100%;
    margin:0 0 20px 0;
    padding:0;

    line-height:20px;
    font-size:14px;
    text-align:left;

}








footer {

    position:relative;
    width:90%;
    padding:20px 5% 20px 5%;
    margin:20px 0 0 0;
    overflow:hidden;
    
    line-height:20px;
    font-size:14px;

}





footer aside{

    position:relative;
    width:100%;
    padding:0;
    margin:10px auto;
    overflow:hidden;
    text-align:center;
    
    line-height:20px;
    font-size:14px;

}





#masque {

    display:none;
    top:0;
    left:0;
    position:fixed;
    z-index:98;
    
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    
    background-color: rgba(0, 0, 0, 0.88);

}

 

.popup {

    position:fixed;
    display:none;
    width:500px;
    max-width:calc(100% - 50px);
    padding:20px;
    top:100px;
    left:calc(50% - 270px);
    z-index:100;
    overflow:visible;

    text-align: center;
    
    -moz-border-radius: 6px;
    -webkit-border-radius:  6px;
    border-radius:  6px;

}
 

.popup div.fermer{

    position:relative;
    width:100%;
    cursor:pointer;
    text-transform: uppercase;
    font-size:14px;
    font-weight: bold;

}
 
.popup span.fermer{

    position:absolute;
    top:-25px;
    right:-25px;
    width:50px;
    height:50px;
    cursor:pointer;
    line-height:50px;
    font-size:50px;
    font-weight: bold;
    background:#ffffff;

}


#popup_quitter .case {

    position:absolute;
    top:-70px;
    left:-70px;
    width:140px;
    height:140px;
    background-image: url("img/badge-popup.png");
    padding:0;
    animation: shake 2s;
    animation-iteration-count: infinite;
}


@media all and (min-width:00px) and (max-width:1200px) {


    #badge {

        display: none;
    }

    #btn_menu_mobile {

        display:block;
    }
    
    #menu li {

        display:none;
    }

    #barre {
        display:none;
    }
    
    
    #bandeau {
        
        grid-template-columns: 100%;
    
    }

    .gauche, .droite {

        width:100%;
        margin:20px auto;

    }
    
    .home .gauche .texte,  #nom_region {

    position:relative;
    width:100%;
    height:auto;
    margin:0 0 20px 0;
    
    }

    #nom_region {

        top:0;
        
        }


    #timer div{

        font-size:11px;
    
    }
#timer div span{

    position:relative;
    display:block;
    padding:5px;
    margin:5px;
    width:30px;
    line-height: 40px;
    font-size: 20px;
   
    
}


    .listes {
        
        grid-template-columns: 50% 50%;
    }


    .single #centre, .single #gauche, .single #droite, .single #centre #image, .single #centre #vignettes, .single .details {

        width: 100%; margin:20px auto;
        text-align:center;

    }


    .single #centre #image {
        
        margin-bottom:50px;

    }

    .single .details_2 {

        grid-template-columns: 50% 50%;
    
    }

    .single .details_2 p span{

        display:block;
        width:100%;
    
    }

     h3, h2 {

        width:100%;
        text-align:center;

    }

    .single #droite h3, .single #gauche h3 {

        text-align:left;
        
    }



    .single #profils_similaires .posts li{
    
        width:48%;
        margin:5px 1%;
        
    }
    










#boucle_temoignages {

    height:400px;

    }




#boucle_temoignages .thumb {
    float:none;
    width:150px;
    height:150px;
    margin-left:calc(50% - 75px);
    margin-right:0;
    margin-top:20px;
    margin-bottom:20px;
}

 



#boucle_temoignages .texte {
    float:none;
    width:100%;
    padding:20px 0 0 0;
    margin:0;
    min-height:0;
    max-height:200px;
    
    border-width:1px 0 0 0;
    
    text-align:center;

    }



#boucle_temoignages h5{

    text-align:center;
}
 



.popup {

    width:calc(90% - 40px);
    max-width:calc(100% - 50px);
    padding:20px;
    top:100px;
    left:5%;


}
 




}










@media all and (min-width:1300px) and (max-width:1500px) {

 

    .posts li{

        width:18%;
        margin:10px 1%;

    }


}




@media all and (min-width:1000px) and (max-width:1300px) {

    .posts li{

        width:23%;
        margin:10px 1%;

    }

}


@media all and (min-width:900px) and (max-width:1000px) {

    .posts li{

        width:31%;
        margin:10px 1,16%;

    }

}


@media all and (min-width:800px) and (max-width:900px) {

    .posts li{

        width:46%;
        margin:10px 1,2%;

    }

}




@media all and (min-width:0px) and (max-width:800px) {

    .posts li{

        width:80%;
        margin:10px 10%;

    }

}