@charset "UTF-8";

/*Theme Name: Jardinons Ensemble  

Theme URI: http://www.webmaster-freelance.paris
Author: Benjamin Levaux
Author URI: http://www.webmaster-freelance.paris
Description: Le thème de Graines de Jardin 
Version: 1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*//* ------------------------------ RESET ------------------------------ */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	outline:none;
	font-size:100%;
    box-sizing: border-box;
    -webkit-apperance:none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
table {border-collapse: collapse;border-spacing: 0;}

/* ------------------------------ END RESET ------------------------------ */

/* ------------------------------ GLOBAL ------------------------------ */

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:1rem;
	line-height:1.3;
	margin:0;
	max-width:100%;
	-webkit-text-size-adjust: none;
    -webkit-appearance: none;
	position:relative;
    color:#000000;    
    overflow-x: hidden;
    background: white;
}
img {max-width:100%;height:auto;max-height:100%;width:auto;}
a img {border:0;}

a {color:#034915;}
a:hover {}

strong {font-weight:700;}

hr {height:1px;background-color:#336600;border:0;margin:15px 0;}

.clear {clear:both;}

/*.wpb_text_column p:last-child, .wpb_text_column *:last-child { margin-bottom: auto !important;}*/

.grand-hotel-regular {
  font-family: "Grand Hotel", cursive;
  font-weight: 400;
  font-style: normal;
}

.row {display: flex;flex-wrap: wrap; position: relative;margin:0 -20px;}

.col {padding:0 20px;max-width:100%;position: relative;}

.col_10 {width:83.33%}
.col_9 {width:75%}
.col_8 {width:66.66%}
.col_7 {width:58.33%}
.col_6 {width:50%}
.col_5 {width:41.66%}
.col_4 {width:33.33%}
.col_3 {width:25%}
.col_2 {width:16.66%}
.col_1 {width:8.33%}

.between {justify-content: space-between;}
.nowrap {flex-wrap: nowrap;}
.grow {flex:1;}

.right {text-align: right;}
.center {text-align: center;}

.top {align-items: flex-start;}
.milieu {align-items:center;}

.alignleft {float:left; margin:10px;}

.d_none {display: none;}

.main ol li, .main ul li {margin:15px 0;}

/* ------------------------------ STRUCTURE ------------------------------ */

.container {width:1200px;margin:0 auto;}

.main {margin:50px 20% 0 20%;padding-bottom: 50px;}

.bg {    
    background-image: url("img/bg_page.webp");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100vw auto;
}

/* ------------------------------ CONTENT ------------------------------ */

h1, h2, h3 { font-family: "Grand Hotel", cursive;color:#034915;line-height: 1.1;}

h1 {
    font-size:3.5rem;
    color:#FFF;
    background-image: url("img/bandeau_4.gif");
    background-size: cover;
    background-position: center;
    text-align: center;
    padding:40px 20px;
    margin-bottom: 50px;
}

h2 {font-size:2.2rem;margin:50px 0 25px 0;color:#429385;border-bottom: 3px solid #429385;padding-bottom: 2px;}

h3 {font-size:2rem;margin:10px 0 20px 0;}
.single h1 {margin-bottom:0px;}

h3 a {text-decoration: none;}


small {font-size:0.9rem;color:#666;}

.image_une img {display: block; margin:0 auto;}


.loop {padding:0;}
.loop li {margin:0 0 25px 0;list-style-type: none;border:1px solid #034915;border-radius: 5px; padding:0;display: flex;}
.loop li li {margin:15px 0;list-style-type: disc;border:0;padding:0;display: list-item;}

.loop .alaune {width:33%;margin:0;flex-shrink: 0;}
.loop .texte {padding:15px;flex-grow: 1;}

.ladate {color:#034915;font-size:0.8rem;margin:0 0 20px 0;}

.more {text-align: right !important;}
.more a {color:#a64d94;text-decoration: underline;text-transform: uppercase;font-size: 0.8rem;}


.nav-links {text-align: center;margin:50px 0 0 0;}
.nav-links a, span.current, .nav_actu a  {background-color: #429385;color:#FFF;text-decoration: none;padding:10px 20px;border-radius: 5px;}
.nav-links a:hover, span.current, .nav_actu a:hover  {background-color: #a64d94;color:#FFF;text-decoration: none;}

.nav_actu {margin:50px 0 0 0;display: flex;}
.gauche {width:50%;}
.droite {text-align:right;width:50%;}

.screen-reader-text{ display: none }

.post-categories {list-style-type: none;padding:0;margin-top:0;}
.post-categories li {display: inline-block;padding-right:15px;}

.wp-caption-text {font-size:0.8rem;}


.dates_event  {margin:15px 0px 25px 0;}
.dates_event span {
    display: inline-block;
    background: #a64d94;
    color: #FFF;
    font-size: 1rem;
    margin-right: 15px;
    padding: 5px 20px;
    border-radius: 5px;
}

.infos_jardin {clear:both;}
.loop .infos_jardin {margin-top:20px;font-size:0.9rem;}
.loop .infos_jardin li {list-style-type: square;margin:5px 0;}



.gallery {margin:50px;display: flex;flex-wrap: wrap;}
.gallery-item {
    width: 25% !important;
    margin:10px 0 !important;
    padding:0 10px !important;
}
.gallery-item img {border:none !important;}

#filtres {display: flex;justify-content: space-between;}

select {
    background: #FFF;
    border:1px solid #034915;
    color:#034915;
    padding:5px 10px;
    -webkit-appearance: none;
    background-image: url('img/down.webp');
    background-repeat:  no-repeat;
    background-size:18px 18px;
    background-position: right 5px center;
    padding-right:25px;
    font-size:0.9rem;
    width:45%;
}

.remonte {margin-top:-160px;}

/* ------------------------------------------ CALENDRIER -----------------------------*/
.ui-datepicker-header {position: relative;}
.ui-datepicker-title {text-align: center;padding:10px 30px;font-size: 1.2rem;}
.ui-datepicker-prev {left:30px;position: absolute;color:#FFF;font-size: 2.5rem;line-height: 1;}
.ui-datepicker-next {right:30px;position: absolute;color:#FFF;font-size: 2.5rem;line-height: 1;}

#calendrier {background: #429385;padding:5px 20px 20px 20px; color:#FFF;border-radius: 10px;margin-bottom: 30px;}
#calendrier h3 {color:#FFF;text-align: center;font-size: 2rem;}
#calendrier a {font-weight: bold;text-decoration: none;cursor: pointer;}
#calendrier table {width: 100%;}
#calendrier th {background: #000;color:#a64d94;padding:5px 8px;text-align: center;border:1px solid #999;}
#calendrier td {background: #FFF;padding:5px 8px;text-align: center;border:1px dotted #999;}
#calendrier .actif {background: #a64d94;border:1px dotted #FFF;}
#calendrier .actif a {color:#FFF;}
#calendrier .ui-datepicker-unselectable {border:0;}

.agenda_jour {
    position: fixed;
    z-index:100;
    top:40vh;left:calc(50% - 200px);
    width:400px;
    background: #FFF;
    padding:20px;
    display: none;
    overflow: scroll;
    max-height: 400px;
    box-shadow: #999 0 0 10px;
}
.agenda_jour .jour {color:#429385;}
.agenda_jour h3 {margin: 0;}
.agenda_jour ul {margin:30px 0;padding:0 0 0 24px;}
.agenda_jour li {margin:7px 0;}

.close {position: absolute;top:30px;right:20px;color:#429385;font-size:2.2rem;line-height:0;font-weight: 200;cursor: pointer;}

/* ------------------------------------------ CAROUSEL -----------------------------*/

#carousel_home {padding:100px 50px 0 50px;z-index:50;}

.slide {display: flex;align-items: center;}
.img_slide {width: 33%;padding:0 10px;}
.img_slide img {margin:0 auto;}
.texte_slide {width: 66%;padding:0 10px;}

.owl-dots {text-align: center;margin:25px 0 15px 0;}
.owl-dot {width:12px;height:12px; background-color: #429385 !important;border-radius: 6px;margin:0 6px;}
.owl-dot.active {background-color: #a64d94 !important;}

.owl-nav button span {display: none;}

.owl-prev, .owl-next {
    position:absolute;
    top:calc(50% - 50px);
    left:-50px;
    display: inline-block;
    width:40px;
    height:40px;
    background-size:contain !important;
    cursor: pointer;
}
.owl-next {left:auto;right:-50px;}

.owl-prev {background-image: url('img/left.webp') !important;}
.owl-next {margin-left:10px;background-image: url('img/right.webp') !important;}

.disabled {display: none;}


.btn {
    background-image: url("img/bg_don.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color:#FFF;
    text-decoration: none;
    text-transform: uppercase;
    padding:10px 20px;
    display: inline-block;
}
.btn:hover {background-image: url("img/bg_don_hover.webp");}



/* ------------------------------ HEADER ------------------------------ */

header .row {margin:0;justify-content: space-between;font-size:0.9rem;}
header {position: fixed;width:100vw;padding:10px;background:#FFF;z-index:100;}
.sous_header {height:100px;}

.logo {max-width:120px;}

#main_menu a, .menu_mobile a {text-transform: uppercase;text-decoration: none;color:#034915}
#main_menu a:hover, .menu_mobile a:hover, .current-menu-item > a {color:#a64d94 !important}

#main_menu ul {list-style-type: none;margin:0;padding:0; display: flex;justify-content: space-around;align-items: center; }
#main_menu li {margin:0;padding:5px 7px;position: relative;}

#main_menu > ul > li {margin:0 5px;}

#main_menu ul ul {display: none;position: absolute;top:28px;background: #FFF;width: 200px;margin:0 -10px;box-shadow: 0 3px 6px #999;}

#main_menu li.menu-item-has-children:hover ul {display: block}

#main_menu  li li {border-bottom: 1px solid #034915;font-size:0.8rem;}
#main_menu  ul ul li:last-child {border:0;}


#main_menu > ul > li > a::after {
    content: "";
    display: block;
    height: 4px;
    width: 0;
    position: absolute;
    bottom: 0;
    left:50%;
    transition: all 0.2s ease-in-out;
    background: #034915;
}
#main_menu > ul > li:hover a::after {width: 100%;left:0;}

.don {background-image: url("img/bg_don.webp");background-size: cover;background-repeat: no-repeat;background-position: left bottom;color:#FFF;}
.don:hover {background-image: url("img/bg_don_hover.webp");}
.don a {
    color:#FFF !important;
    font-family: "Grand Hotel", cursive !important;
    font-size:2rem !important;
    text-transform:none !important;
    line-height: 1 !important;
    padding:0 10px !important;
}
.don:hover a, #main_menu .don a:hover {color:#FFF !important;}
.don a::after {display: none !important;}

/*header li.menu-item-has-children {font-size:1.1rem;}
header li.menu-item-has-children li {font-size:0.7rem;;margin:4px 0 4px 15px;}
header li.current-menu-item > a, header li.current-post-parent > a {color:#999900;}*/

.searchform div {display: flex;}
.searchform label {display: none;}
.searchform input[type=text] {
    padding:5px 5px;
    border-radius: 7px;
    border:2px solid #034915;
    margin:0 10px 0 0;
    -webkit-appearance: none;
}
header .searchform input[type=text] {
    width:90px;
}
.searchform input[type=submit] {
    background: url('img/loupe.webp') no-repeat center;
    background-size: contain;
    text-indent: -9999em;
    border: 0;
    width:30px;
    height:30px;
    -webkit-appearance: none;
}
.searchform input::placeholder {color:#034915;text-transform: uppercase;}

.resultats {margin:50px 0;}
.resultats li {margin:15px 0;list-style-type: none;border-bottom: 1px solid #ddd;text-align: justify;}
.resultats h4 {font-size:1.2rem;font-weight: bold;}

.open_menu {
    width: 26px;
    height: 23px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin:0 40px 0 0;
}
.trait_haut {top: 0px;}
.trait_milieu {top: 8px;}
.trait_bas {top: 16px;}
.trait {
    width: 26px;
    height: 3px;
    background: #034915;
    transition: 0.4s ease all;
    position: absolute;
}

.incline_un {transform: rotate(45deg);top:12px;}
.incline_deux {transform: rotate(-45deg);top:12px;}

.menu_mobile {display: none;position: fixed;background: #FFF;width:100%;z-index: 100;top:75px;left:0;padding:15px;box-shadow: 0 7px 7px #CCC;}
.menu_mobile ul {margin:0;padding:20px;list-style-type: none;}
.menu_mobile ul ul {display: none;padding:20px 0 20px 20px;}
.menu_mobile li {width: 100%;margin:0;padding:10px 0;border-top:1px dashed #ccc;position: relative;}
.menu_mobile a {display: block;}

.menu_mobile ul .menu-item-has-children .chevron { 
    top: 8px;
    right: 5px;
    width: 30px;
    height: 25px;
    background-size: 24px 24px;
    background-image: url('img/down.webp');
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    padding-right: 0 !important;
    cursor: pointer;
}
.chevron.open {background-image: url(img/up.webp) !important;}

.menu_mobile .don {margin-top:30px;border:0;text-align: center;}

.menu_mobile .searchform div {display: flex; justify-content: center;}

/* ------------------------------  FOOTER -----------------------------*/

footer {background: #429385;color:#FFF;padding:30px 0;font-size: 0.8rem;}
footer a {text-decoration:none;color:#FFF;text-transform: uppercase;}
footer ul {margin:0;padding:0;list-style-type: none;display: flex;justify-content: space-around;}
footer .current-menu-item > a {color:#FFF !important}

.rss {background-image: url("img/logo_RSS.webp");background-size: contain;background-repeat: no-repeat;background-position: left center;padding-left:25px;}

/* ------------------------------  RESPONSIVE -----------------------------*/

@media (max-width: 1200px) {
    .container {width:100%;}
    .main {margin:50px 10% 0 10%;}
}

@media (min-width: 1024px) {
    .mobile {display: none !important;}
}

@media (max-width: 1024px) {
    .desktop {display: none !important;}  
    .main {margin:50px 50px 0 50px;}
    
    h1 {font-size:2.8rem;}
    
    .bg {    background-size: cover;}
    .remonte {margin-top:-80px;}


}
@media (max-width: 640px) {
    .main {margin:50px 20px 0 20px;}

    h1 {font-size:2.3rem;}
    .remonte {margin-top:-30px;}
    
    .loop li {display: block;}
    .loop .alaune {width:100%;}


    .slide {flex-direction: column;}
    .img_slide, .texte_slide {width: 100%;}

    .owl-prev {left:-15px;}
    .owl-next {right:-15px;}

}
@media (max-width: 400px) {
    .agenda_jour {
        width:90%;
        top:auto;
        bottom:0;
        left:5%;
    }
}