/*Fichier créé le 28/6 par https://www.codeur.com/-gilles_k pour rendre le site responsif*/

/*ajoute menu reponsive*/


/* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
    position: relative;
    min-height: 100px;
    width: 100%;
    background-color: none;
    z-index: 0;
    /*border-radius: 12px;*/
    /*display: flex;
    justify-content: space-between;
    align-items: center;*/
}

/* Style the links inside the navigation bar */
.topnav a:not(:first-child) {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 9px 20px 0;
    text-decoration: none;
    font-size: 17px;
    background-color: none;
}

.topnav a img {
    padding: 15px 10px;
    width: 40%;
}

/* Change the color of links on hover */
/*
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
 */

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
.desc {
    display: none;
}
.pub300x100 {
    display: none;
}

#menuhaut-mobile {
    display: none;
}
/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    body {
        background-color: black;
        min-width: 0 !important;
    }

    p {
        line-height: 1em !important;
    }

    /*fod de couleur de la page*/
    #art-main {
        background-color: black;
        background-image: none
    }

    /*ajoute menu reponsive*/
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
        transform: scale(3.5) !important;
        margin-right: 16px;
        margin-top: 28px;
        color: white;
    }
.foot {
  font-size: 1rem !important;
}
.desc {
    display:block;
	font-size: 1rem !important;
	color:#fff;
}
	.pub300x100 {
    display:block;
	font-size: 1rem !important;
	color:#fff;
		margin-left: 25px;
    margin-right: 25px;

}
    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    .topnav.responsive {
        position: relative;
        width: 100% !important;
        overflow: visible;
    }

    .topnav a.icon {
        position: absolute;
        top: 0;
        right: 0;
    }

    .topnav.responsive a:nth-child(1) {
        float: none;
        text-align: left;
    }

    .topnav.responsive a:nth-child(n+2):nth-last-child(n+2) {
        float: none;
        display: block;
        text-align: right;
        background-color: black;
        line-height: 2em;
        padding-right: 30px;

    }

    /*recadre la page ne plein largeur*/
    .art-header, .art-sheet, .art-sheet.article {
        width: 100% !important
    }

    .art-content-layout {
        /* ne fonctionne pas
        max-width: 768px!important;
        */
    }

    /*supprime le header classique */
    .art-header, .art-nav.desktop-nav {
        display: none;
    }

    /*supprimer le bandeau de titre*/
    #art-main .art-layout-cell.art-content > h2, #art-main .art-layout-cell.art-content > br, #art-main .art-layout-cell.art-content > span, #art-main .art-layout-cell.art-content::before {
        display: none;
    }

    /**supprimer le descriptif du site sans supprimer les entête de chapitre */
    #art-main .art-layout-cell.art-content > span {
        display: none;
    }

    /*supprimer le 1er slider et le 2ème aui est en 3ème position*/
    div.art-layout-cell.art-content > article:first-of-type, div.art-layout-cell.art-content > article:nth-of-type(3) {
        display: block;
        /*display: none !important;*/
    }


    /*bloc text*/
    .art-layout-cell > div.centre_title {
        padding-left: 3% !important;
    }

    /*Titre des blocs*/
    .art-postheader {
        font-size: 2.5rem !important;

    }

    /*Titre des blocs*/
    .art-postmetadataheader {
        padding: 0 2% !important;
    }

    /*DISPOSITION DES COLONES PRINCIPAES dDE WWW.ZONE-SEXE.COM*/
    /*Main Colone*/
    .art-content-layout-row .art-layout-cell.art-content {
        width: 100% !important;
        display: block !important;
    }

    /*Sidbar*/
    .art-content-layout-row .art-layout-cell.art-sidebar1 {
        width: 100% !important;
        display: block !important;
    }

    .art-blockcontent ul li {
        /*width: 90%!important;*/
    }

    .art-blockcontent ul li, .art-blockcontent ul li a {
        font-size: 1.5rem !important;
        line-height: 1em;
    }


    /*2EME BLOCK - IMAGES MINIATURE ET TEXTES*/
    /*ensemble du bloc*/
    /*.art-post {
        padding: 0 2%!important;
    }*/
    /*images*/
    .art-layout-cell > div:not(.box_main) {
        width: 99% !important;
        padding: 0 1% !important;
       
    }

    img.thumb_mini {
        width: 100% !important;
    }

    /*espace avant chaque image*/
    .art-layout-cell > div:not(:first-child) img.thumb_mini {
        padding-top: 5% !important;
    }


    /*textes*/
    /*    posté sur et reste du paragrpahe*/
    .art-postcontent {
        font-size: 2rem !important;


    }

    /*    titre home incluant sidebar*/
    .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited, .art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover {
        font-size: 2.5rem !important;
        padding-top: 0 !important;

    }

    /*    origine*/
    .art-postcontent .centre_title > a, .art-postcontent .centre_title > a.hover, .art-postcontent .centre_title > a.visited {
        font-size: 100% !important;
        line-height: 1.2em !important;

    }


    /*1ER BLOCK - SILDER */
    .jcarousel-skin-tango .jcarousel-container-horizontal {
        width: 100% !important;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal {
        width: 100% !important;
    }

    /*item bloc du slider plus large*/
    .jcarousel-skin-tango .jcarousel-item {
        width: 450px !important;
    }

    /* bloc image*/
    .jcarousel-skin-tango .jcarousel-item > div {
        width: 50% !important;
    }

    #mycarousel, #mycarousel2 {
        margin-left: -75px !important;
    }

    /* bloc de texte*/
    #mycarousel .centre_title, #mycarousel2 .centre_title {
        width: 40% !important;
    }

    /*    posté sur et reste du paragrpahe*/
    #mycarousel .art-postcontent, #mycarousel2 .art-postcontent {
        font-size: 1.5rem !important;

    }


    /*    titre*/
    #mycarousel h3 a, #mycarousel2 h3 a {
        font-size: 1.2rem !important;
        padding-top: 0 !important;
    }

    /*    origine*/
    #mycarousel .art-postcontent a, #mycarousel .art-postcontent a.hover, #mycarousel .art-postcontent a.visited, #mycarousel2 .art-postcontent a, #mycarousel2 .art-postcontent a.hover, #mycarousel2 .art-postcontent a.visited {
        font-size: 100% !important;
        line-height: 1em !important;
    }


    /*supprime bullets du craousel*/
    .art-postcontent ul > li:before, .art-post ul > li:before {
        display: none;
    }


    /*annonces*/
    .art-layout-cell.layout-item-0 {
        padding: 0 1%
    }

    /*telephone des annonces */
    #art-main .art-postcontent a {
        font-size: 90% !important;
    }

    /*zone géographique d'une annonce */
    #art-main .art-postcontent h4 {
        font-size: 90% !important;
    }

    .bloc_annonce img {
        width: 100%;
    }


    .bloc_annonce .gauche {
        width: 100%;
    }

    /*catégorie value*/
    .bloc_annonce .droite p a {
        font-size: 2rem !important;
    }

    #centre .bloc_annonce .droite p a {
        font-size: initial !important;
        display: block;
        padding: 1% 0;
    }


    /*zone géographique*/
    .bloc_annonce .droite h4 {
        font-size: 1.5rem
    }

    /*texte sous image bloc annonce*/
    .bloc_annonce .droite {
        width: 100%;
        float: left;
    }

    /*footer*/
    footer {
        display: none !important;
    }


    /*PAGE ANNONCE*/
    article a img {
        width: 100% !important;
    }

    fieldset {
        width: 75% !important;
        padding: 5% 17% 5% 5% !important;
    }

    fieldset input[type="text"] {
        width: 110%;
    }

    fieldset textarea {
        width: 110%;
    }


    /*PAGE annonces.zone-sexe.com*/
    /*formualaire de recherche*/
    #form_search select {
        margin-bottom: 4% !important;
        margin: 0%;
        width: 61%;
        font-size: 1rem;
        padding: 5px;
    }


    #form_search input[type="submit"] {
        float: right;
        margin-left: 0;
        font-size: 1rem;
    }

    /*text de résultat de la recherche*/
    .art-layout-cell.layout-item-0 {
        line-height: 1em;
    }


    /*chiifres de pagination*/
    div.pagination {
        padding: 0 5%;
    }

    div.pagination a, div.pagination a b {
        font-size: 1.2rem !important;
        padding: 3%;
        min-width: 7%;
        text-align: center;
        margin-bottom: 2%;
    }

    div.pagination a:first-child {
        padding-left: 0;

    }

    /*ANNUAIRE DES BLOGS*/
    .box_main {
        padding: 2% 5% !important;
        font-size: 1rem !important;
        line-height: 2em;
    }

    .box_main h1.col_title {
        font-size: 150%;
        line-height: 2em;
        padding: 0 2%;
    }

    .box_main h3 {
        font-size: 1.2rem;
        line-height: 1em;
    }


    .box_main .contenu > div {
        padding: 2% 0 !important;
        margin-top: 10px !important;
    }

    /*annuaire blog espace entre bloc */
    #art-main .box_main .contenu > div {
        margin-top: 30px !important;
    }


    .box_main .contenu > p > span {
        line-height: 1.5em;
        font-size: 140%;
    }

    /*http://annonce-de-femme-pour-sexe.zone-sexe.com/remoonte le texte vers l'image*/
    .box_main .contenu > div > img.pic_menu {
        /*margin-top: -20px;*/
    }


    /* TEMPLATE http://les-coquine-net.zone-sexe.com/*/
    /*supprime les colones et menus non indispensables*/
    #menuhaut, #col_droite, #col_gauche, .bloc_title,#header {
        display: none !important;
    }
	#header {
		background-size: cover;
        width: 100%;
		height: 150px;
	}
    #page {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex;
        flex-direction: column;
    }



    /*ordonne les colone*/
    #header {
        order: 0;
    }

    header {
        order: 1;
    }

    #menuhaut {
        order: 2;
    }


    #centre {
        order: 5;
    }

    #logo_zone_sexe {
        order: 6;
    }

    #logo_annonce {
        order: 8;
    }

    #footer_haut {
        order: 9;
    }


    #footer_bas {
        order: 10;
    }





    /*adapte col_gauche avec annonce*/
    #col_gauche {
        width: 100% !important;

    }
#af-mobile {
    display: block;
}
	#af-pc {
    display: none;
}
    #page .fixe {
        /*display: none;*/
    }

    /*centre le contenu principal horizontalement*/
    #page #centre > .column:first-child {
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /*repositionne le texte des images miniatures...*/
    #page #centre > .column:not(:first-child) h3 {
        height: 4em !important;
    }

    /*...mais ne touche pas aux titres*/
    #page #centre > .column:not(:first-child) .centre_title h3 {
        height: initial !important;
        padding: 1%;
    }

    /*on rajoute le selector #page pour ne pas toucher au template noir et orange de zone sexe*/
    #page header#myTopnav {
        background-size: 100% !important;
        height: 114px;
        background-position-x: 0px !important;
        z-index: 100;

    }
	    #style2 header#myTopnav {
        background-size: 100% !important;
        height: 114px;
        background-position-x: 0px !important;
        z-index: 100;

    }


    /*uniqement pour le bouton du menu */
    #page .topnav a:last-child {
        background: none;
       

    }

    /*texte des menus */
    #page .topnav.responsive a:nth-child(2), #page .topnav.responsive a:nth-child(2), #page .topnav.responsive a:nth-child(3), #page .topnav.responsive a:nth-child(4), #page .topnav.responsive a:nth-child(5), #page .topnav.responsive a:nth-child(6), #page .topnav.responsive a:nth-child(7) {
        font-size: 150% !important;
    }

    /*on réserve un espace de 114px pour bien positionner le menu mobile vers le bas sous l'image*/
    #page .fill {
        height: 114px;
    }
    #style2 .fill {
        height: 114px;
    }
    #centre {
        width: 100%
    }

    #centre img {
        width: 100% !important;
		
    }

    #centre .column .column {
        width: 95%;
        text-align: center;
    }

    #centre .column .column div {
        margin-top: 2%;
    }

    #page #centre .centre_title h3 a {
        font-size: 130%;
        line-height: 2em;
        /*padding: 0 2%;*/
    }

    /*supprime le message pubicitaire*/
    .art-responsive-embed {
        
    }

    #footer_bas {
        display: flex;
        justify-content: center;
    }

    #footer_bas .footer {
        margin: 0;
        width: 90%;
        padding: 0;
        text-align: center;
    }

    .footer_top .menu_footer, .footer_top {
        width: 90%;
    }

    .footer_top .menu_footer {
        margin: 0;
    }

    #footer_bas .footer .copyright p {
        text-align: center;
        /*font-size: 12px;*/
        line-height: 2em !important;
    }

    .footer .copyright p a {
        font-size: 100%;
    }

/*modif du 19/05/21 correction espacement des éléments*/
   .footer_top .menu_footer ul li {
	padding : 0.5em 0 15px 0.5em;
 }
.column {
padding: 10px 0px;
display: flex;
flex-direction : column;
}
.column h3 {
margin-top: 0.5em;
margin-bottom : 0.3em;
height : 3em !important;
}
.column div {
width : 100% !important;
height : auto !important;
padding: 0 !important;
}
* {
box-sizing: border-box;
}
.hr {
width : auto;
}


.col_menu ul li {
line-height: 60px;
background: url(../templates/tpl_zone-sexe/images/icones/arr.gif) 0 25px no-repeat;
}

.col_menu> div> a:nth-child(1n+1) {
font-size : 16px !important;
padding : 0.4em !important;
}

.col_menu> div> a:nth-child(2n+1) {
font-size : 14px !important;
font-weight : bold;
padding : 0.4em !important;
}
.col_menu> div> a:nth-child(3n+1) {
font-size : 18px !important;
padding : 0.4em !important;
}

}
/*correction taille desktop en dehors de la media querie*/
.column img {
max-width : 100%;
}

.column div {
height : auto !important;

}